花潮电视开播（二）

马黑黑 · 发表于 2022-5-11 13:13

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

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

x

马黑黑 · 发表于 2022-5-11 13:14

代码分享：

<style>
.tvOuter {
left: -27px;
width: 814px;
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: 900px;
height: 600px;
left: -34px;
top: -82px;
clip-path: inset(82px 56px 64px 34px);
}
</style>
<div class="tvOuter">
<iframe class="tvInner" src="https://haokan.baidu.com/v?vid=4987522748064683150&pd=pcshare"></iframe>
</div>

复制代码

加林森 · 发表于 2022-5-11 13:19

漂亮的制作，赞！

马黑黑 · 发表于 2022-5-11 13:24

本帖最后由马黑黑于 2022-5-11 13:25 编辑

技法说明：

这个，由于好看视频分享的视频不是地道的mp4，我们只能用 iframe 来应付它。先拿掉HTML中的父窗体即电视机，设定一下 iframe 的尺寸，就是 .tvInner 的CSS的width和height设定，然后量一量上、右、下、左各切去多少合适，就开始动刀：

clip-path: inset(82px 56px 64px 34px);

上面语句用 inset 刀割出的是矩形，四个参数对应于上右下左各割多少像素，割好了就是视频要搬到电视机屏幕的画面。

然后，恢复父窗体（class="tvOuter"的盒子），先左移、上移 iframe 靠左、靠上，再重新设定CSS中 .tvOuter 的宽高尺寸直至与视频界面像吻合。