花潮电视开播（一）

马黑黑 · 发表于 2022-5-11 07:45

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2022-5-11 07:45

代码分享：

<style>
.tvOuter {
margin: 20px auto 0;
width: 740px;
height: 460px;
border-radius: 3px;
background: rgba(0,0,0,.85);
box-shadow: 0px 0px 2px 4px #000;
position: relative;
}
.tvOuter::before, .tvOuter::after {
position: absolute;
content: '';
width: 30px;
height: 30px;
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="http://www.kumeiwp.com/sub/filestores/2021/11/02/a557c06643780b8bbb77853023630432.mp4" controls="controls" autoplay="autoplay" loop="loop"></video>
</div>

复制代码

马黑黑 · 发表于 2022-5-11 07:55

简单说明：

第2行至第21行：电视机的外观，注意一下 .tvouter 的 width、height 便可。tv 脚支架用两个伪元素做成，简单的clip-path切割。

第22行到第27行：.tvInner，视频的CSS样式设定，第26行的 object-jit: fill; 能够确保视频铺满整个珍贵的电视屏幕，但如果想其他效果，可以将 fill 改为 contain 等或干脆不要此句。

关于 video 标签：语法格式与 audio 标签非常接近，其控制界面页合适（依赖于 controls=“controls”)