西皮士 - 辉月

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css';
   
3.         #papa { left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1600px); height: auto; aspect-ratio: 16/9; background: #000 url('https://638183.freep.cn/638183/t24/webp3/hvyt.webp') no-repeat center/cover; }
   
4.         #mplayer { bottom: 20px; }
   
5.         #fsbtn { top: 30px; }
   
6.         .pvid { mask: linear-gradient(to bottom, transparent 20%, transparent, red); -webKit-mask: linear-gradient(to bottom, transparent 20%, transparent, red); }
   
7. </style>
   
8. 
   
9. <div id="papa" class="pa">
   
10.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=427609548" autoplay loop></audio>
    
11.         <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/12/49/52/video63634870b35fe.mp4" autoplay loop muted></video>
    
12.         <video class="vid pvid" src="https://img.tukuppt.com/video_show/2418175/00/01/82/5b4b80fd73a25.mp4" autoplay loop muted></video>
    
13. </div>
    
14. 
    
15. <script type="module">
    
16.         import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js';
    
17.         hcplay(papa);
    
18. </script>

复制代码

愤怒的葡萄

音乐挺好听的。

樵歌

为毛不自己搭个班子，创作动漫丫，多点钱钱不好吗

杨帆

视听盛宴，谢谢马老师精彩分享

马黑黑

杨帆 发表于 2025-4-22 18:23
视听盛宴，谢谢马老师精彩分享

马黑黑

樵歌 发表于 2025-4-22 15:59
为毛不自己搭个班子，创作动漫丫，多点钱钱不好吗

男人有钱变坏。平平淡淡才是真男人

马黑黑

愤怒的葡萄 发表于 2025-4-22 13:30
音乐挺好听的。

好久不见！晚上好！

红影

自适应的16比9的比例，两个视频的用法特别好，熊猫的用到下半部分，索性把上半部的隐去了呢。
千库的视频用了默认配置，让当中的背景也能被很好地展示。

红影

这样的画面配上这样的效果特别好，很缥缈的感觉。
欣赏黑黑好帖

马黑黑

红影 发表于 2025-4-22 19:51
这样的画面配上这样的效果特别好，很缥缈的感觉。
欣赏黑黑好帖

两个视频的处理，可以研究一下

马黑黑

红影 发表于 2025-4-22 19:50
自适应的16比9的比例，两个视频的用法特别好，熊猫的用到下半部分，索性把上半部的隐去了呢。
千库的视频 ...

panda的要水滴效果，所以隐去上半部是合理的。这是经典的根据需要进行的设置。同时注意一下 class 属性

樵歌

马黑黑 发表于 2025-4-22 19:50
男人有钱变坏。平平淡淡才是真男人

肯定是被 人给拴安乐窝习惯了

朵拉

美极了~~

马黑黑

朵拉 发表于 2025-4-22 21:00
美极了~~

马黑黑

樵歌 发表于 2025-4-22 20:44
肯定是被 人给拴安乐窝习惯了

我跟你说，很多人都想把自己的一切能力变现。这会很累，到头来会发现，不论是腰缠万贯，还是穷得叮当响，心里都是空落落的。

人的能力可以不变现，而是让它成为自己的内涵，这样，人的心会是踏踏实实的。

最经典的例子是AK47和M。AK47的发明者放弃专利，M的发明者守着专利，前者一生坦坦荡荡、清清爽爽，后者晚年凄凄惨惨。

红影

马黑黑 发表于 2025-4-22 19:52
两个视频的处理，可以研究一下

嗯嗯，这个两个视频的使用效果特别好

红影

马黑黑 发表于 2025-4-22 19:53
panda的要水滴效果，所以隐去上半部是合理的。这是经典的根据需要进行的设置。同时注意一下 class 属性

class="vid pvid"  原来这个是用了两个样式呢

马黑黑

红影 发表于 2025-4-22 21:53
嗯， class里的要和Html对应

我说的是视频class属性

花飞飞

原来.pvid可以增添第二个视频。。用了线性渐变的两种写法适用于不同浏览器，只显了下方滴效果。。当然参数都可以更改
.vid可更改大背景视频。也可以随意更改。。
这个太实用了。