马黑黑 发表于 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: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”)

马黑黑 发表于 2022-5-11 07:59

此例针对mp4等视频，可以使用 video 标签播放，设置很简单；如若视频需以其他形式转播，如 iframe ，则需要使用切割大法才能得到相对干净、完整的视频效果。等有空做个示范。

红影 发表于 2022-5-11 09:12

听到了熟悉的漠河舞厅，再一次被这首歌感动。黑黑的花潮电视做得真漂亮。{:4_187:}

红影 发表于 2022-5-11 09:13

马黑黑 发表于 2022-5-11 07:55
简单说明：

第2行至第21行：电视机的外观，注意一下 .tvouter 的 width、height 便可。tv 脚支架用两个 ...

细心地切割了2个支架，真有趣{:4_187:}

红影 发表于 2022-5-11 09:15

这个视屏台下的唱得那么大声，简直是大合唱呢，很和谐的互动{:4_204:}

樵歌 发表于 2022-5-11 11:37

没在左上角标注（HCTV）牙。{:4_189:}

加林森 发表于 2022-5-11 11:44

这个必须好好学习一下。

加林森 发表于 2022-5-11 11:45

老黑的这个制作真漂亮，赞！{:4_199:}

马黑黑 发表于 2022-5-11 12:14

加林森 发表于 2022-5-11 11:45
老黑的这个制作真漂亮，赞！

过得去

小辣椒 发表于 2022-5-11 12:56

热烈祝贺花潮电视节目正式开始，掌声响起来{:4_199:}{:4_199:}

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

小辣椒 发表于 2022-5-11 12:56
热烈祝贺花潮电视节目正式开始，掌声响起来

{:4_180:}

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

红影 发表于 2022-5-11 09:13
细心地切割了2个支架，真有趣

现在时髦的脚支架都不是我切割的那个样纸

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

马黑黑 发表于 2022-5-11 12:14
过得去

我得学学了。

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

加林森 发表于 2022-5-11 13:13
我得学学了。

这个相对容易

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

马黑黑 发表于 2022-5-11 13:26
这个相对容易

慢慢来吧，不急的。

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

加林森 发表于 2022-5-11 13:32
慢慢来吧，不急的。

那是

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

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

自动的不好找的。

大猫咪 发表于 2022-5-11 21:53

谢谢老黑， 真棒！ {:4_187:}这就开始学习 ，晚上好   {:4_179:}{:4_190:}
页: [1] 2
查看完整版本: 花潮电视开播（一）