西皮士 - 辉月
本帖最后由 马黑黑 于 2025-4-22 12:23 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css';
#papa { left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1600px); height: auto; aspect-ratio: 16/9; background: #eee url('https://638183.freep.cn/638183/t24/webp3/hvyt.webp') no-repeat center/cover; }
#mplayer { bottom: 20px; }
#fsbtn { top: 30px; }
.pvid { mask: linear-gradient(to bottom, transparent 20%, transparent, red); -webKit-mask: linear-gradient(to bottom, transparent 20%, transparent, red); }
</style>
<div id="papa" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=427609548" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/12/49/52/video63634870b35fe.mp4" autoplay loop muted></video>
<video class="vid pvid" src="https://img.tukuppt.com/video_show/2418175/00/01/82/5b4b80fd73a25.mp4" autoplay loop muted></video>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js';
hcplay(papa);
</script> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css';
#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; }
#mplayer { bottom: 20px; }
#fsbtn { top: 30px; }
.pvid { mask: linear-gradient(to bottom, transparent 20%, transparent, red); -webKit-mask: linear-gradient(to bottom, transparent 20%, transparent, red); }
</style>
<div id="papa" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=427609548" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/12/49/52/video63634870b35fe.mp4" autoplay loop muted></video>
<video class="vid pvid" src="https://img.tukuppt.com/video_show/2418175/00/01/82/5b4b80fd73a25.mp4" autoplay loop muted></video>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js';
hcplay(papa);
</script>
音乐挺好听的。 为毛不自己搭个班子，创作动漫丫，多点钱钱不好吗{:4_172:} 视听盛宴，谢谢马老师精彩分享{:4_191:} 杨帆 发表于 2025-4-22 18:23
视听盛宴，谢谢马老师精彩分享
{:4_190:} 樵歌 发表于 2025-4-22 15:59
为毛不自己搭个班子，创作动漫丫，多点钱钱不好吗
男人有钱变坏。平平淡淡才是真男人{:4_170:} 愤怒的葡萄 发表于 2025-4-22 13:30
音乐挺好听的。
好久不见！晚上好！ 自适应的16比9的比例，两个视频的用法特别好，熊猫的用到下半部分，索性把上半部的隐去了呢。
千库的视频用了默认配置，让当中的背景也能被很好地展示。{:4_187:} 这样的画面配上这样的效果特别好，很缥缈的感觉。
欣赏黑黑好帖{:4_199:} 红影 发表于 2025-4-22 19:51
这样的画面配上这样的效果特别好，很缥缈的感觉。
欣赏黑黑好帖
两个视频的处理，可以研究一下 红影 发表于 2025-4-22 19:50
自适应的16比9的比例，两个视频的用法特别好，熊猫的用到下半部分，索性把上半部的隐去了呢。
千库的视频 ...
panda的要水滴效果，所以隐去上半部是合理的。这是经典的根据需要进行的设置。同时注意一下 class 属性 马黑黑 发表于 2025-4-22 19:50
男人有钱变坏。平平淡淡才是真男人
肯定是被 人给拴安乐窝习惯了{:4_189:} 美极了~~{:4_178:} 朵拉 发表于 2025-4-22 21:00
美极了~~
{:4_190:} 樵歌 发表于 2025-4-22 20:44
肯定是被 人给拴安乐窝习惯了
我跟你说，很多人都想把自己的一切能力变现。这会很累，到头来会发现，不论是腰缠万贯，还是穷得叮当响，心里都是空落落的。
人的能力可以不变现，而是让它成为自己的内涵，这样，人的心会是踏踏实实的。
最经典的例子是AK47和M。AK47的发明者放弃专利，M的发明者守着专利，前者一生坦坦荡荡、清清爽爽，后者晚年凄凄惨惨。 马黑黑 发表于 2025-4-22 19:52
两个视频的处理，可以研究一下
嗯嗯，这个两个视频的使用效果特别好{:4_187:} 马黑黑 发表于 2025-4-22 19:53
panda的要水滴效果，所以隐去上半部是合理的。这是经典的根据需要进行的设置。同时注意一下 class 属性
class="vid pvid"原来这个是用了两个样式呢{:4_187:} 红影 发表于 2025-4-22 21:53
嗯， class里的要和Html对应
我说的是视频class属性 原来.pvid可以增添第二个视频。。{:4_173:}用了线性渐变的两种写法适用于不同浏览器，只显了下方滴效果。。当然参数都可以更改
.vid可更改大背景视频。也可以随意更改。。
这个太实用了。