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

花潮电视开播（二）

<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: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

漂亮的制作，赞！{:4_199:}

马黑黑 发表于 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 的宽高尺寸直至与视频界面像吻合。

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

加林森 发表于 2022-5-11 13:19
漂亮的制作，赞！

还可以吧？

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

学习了，下午回来再来跟到制作一个。谢谢老黑！

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

马黑黑 发表于 2022-5-11 13:26
还可以吧？

真漂亮{:5_116:}

梦油 发表于 2022-5-11 17:56

本帖最后由 梦油 于 2022-5-11 18:00 编辑

我带着“低音炮”听的，太美了，太美了，这简直就是一种超值享受。谢谢黑黑朋友。
可惜，俺今天的分没了，不能给你加了。抱歉！

小辣椒 发表于 2022-5-11 17:57

黑黑速度的，二版出来了{:4_178:}

小辣椒 发表于 2022-5-11 17:58

这视频还特别的高科技和黑黑的黑科技有的一拼{:4_189:}

红影 发表于 2022-5-11 18:43

马黑黑 发表于 2022-5-11 13:24
技法说明：

这个，由于好看视频分享的视频不是地道的mp4，我们只能用 iframe 来应付它。先拿掉HTML中的 ...

这个和电视界面吻合很好呢。{:4_187:}

马黑黑 发表于 2022-5-11 19:24

红影 发表于 2022-5-11 18:43
这个和电视界面吻合很好呢。

还过得去吧

马黑黑 发表于 2022-5-11 19:25

小辣椒 发表于 2022-5-11 17:58
这视频还特别的高科技和黑黑的黑科技有的一拼

感谢点点评

马黑黑 发表于 2022-5-11 19:29

加林森 发表于 2022-5-11 13:33
真漂亮

一般般吧

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

马黑黑 发表于 2022-5-11 19:29
一般般吧

太客气了。

马黑黑 发表于 2022-5-11 21:52

小辣椒 发表于 2022-5-11 17:57
黑黑速度的，二版出来了

深圳速度了{:4_170:}

马黑黑 发表于 2022-5-11 21:53

梦油 发表于 2022-5-11 17:56
我带着“低音炮”听的，太美了，太美了，这简直就是一种超值享受。谢谢黑黑朋友。
可惜，俺今天的分没了， ...

不论分不分，只要感情深

马黑黑 发表于 2022-5-11 21:53

加林森 发表于 2022-5-11 19:36
太客气了。

应该的，必须的

小辣椒 发表于 2022-5-11 22:02

马黑黑 发表于 2022-5-11 21:52
深圳速度了

明天会出来三吗{:4_172:}

马黑黑 发表于 2022-5-11 22:08

小辣椒 发表于 2022-5-11 22:02
明天会出来三吗

可以了，不出了
页: [1] 2 3
查看完整版本: 花潮电视开播（二）