小辣椒 发表于 2024-7-17 22:18

视频大电视机效果发帖

<style>
.tvOuter {
        margin: 150px 0 0 calc(50% - 681px);
            
        width: 1200px;
        height: 720px;
                left:0px;
        border-radius: 3px;
        background: rgba(0,0,0,.85);
        box-shadow: 0px 0px 2px 14px #000;
        position: relative;
}
.tvOuter::before, .tvOuter::after {
        position: absolute;
        content: '';
        width: 60px;
        height: 60px;
        top: 100%;
        left: 20%;
        background: inherit;
        clip-path: polygon(10% 100%,50% 0%,90% 100%,70% 100%,50% 30%,30% 100%);
}
.tvOuter::after { left: 80%;}
.tvInner {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: fill;
}

</style>

<div class="tvOuter">
        <video class="tvInner" src="https://china-img.soulapp.cn/video/2022-10-30/44d9a2b9-1ca1-49b7-83ed-2d6c69b44412.mp4" controls="controls" autoplay="autoplay" loop="loop"></video>

</div>      

<br><br><br><br><br><br><br><br>

小辣椒 发表于 2024-7-17 22:19

本帖最后由 小辣椒 于 2024-7-18 17:33 编辑 <br /><br />电视机视频看看也是好玩，{:6_206:}

小辣椒 发表于 2024-7-17 23:30

这个代码不是mp4后缀不能出来

小辣椒 发表于 2024-7-17 23:45

这个(50% - 681px);是现在视频宽度1200决定的宽度+81 是你自己实际视频的尺寸

liumang 发表于 2024-7-18 22:42

小辣椒 发表于 2024-7-17 23:45
这个(50% - 681px);是现在视频宽度1200决定的宽度+81 是你自己实际视频的尺寸

谢谢小辣椒的分享{:5_150:}

微风音乐 发表于 2024-7-19 12:06

小辣椒 发表于 2024-7-17 23:45
这个(50% - 681px);是现在视频宽度1200决定的宽度+81 是你自己实际视频的尺寸

谢谢 大辣椒{:5_151:}

微风音乐 发表于 2024-7-19 12:07

liumang 发表于 2024-7-18 22:42
谢谢小辣椒的分享

{:5_157:}{:5_157:}

小辣椒 发表于 2024-7-20 11:23

微风音乐 发表于 2024-7-19 12:06
谢谢 大辣椒

哈哈，不{:5_146:}客气
页: [1]
查看完整版本: 视频大电视机效果发帖