《时光沙漏》（学习黑黑《三体》单曲播放器）
<style>
@import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc.css';
#tz { margin: 60px 0 30px calc(50% - 681px); width: 1200px; height: 674px; background: url('https://pic1.imgdb.cn/item/67bb34a1d0e0a243d402c113.jpg') no-repeat center/cover; border-radius:32px;overflow: hidden; }
#mplayer { bottom: 30px; background: rgba(239,232,200,.65); left: 27%;}
#lrc { top: 20px; right: 100px; color: rgb(239,232,200); --bg: linear-gradient(90deg, rgba(0,0,0,.15), rgba(208,187,87,.85)); writing-mode: vertical-rl;font: bold 2.0em LiSu;}
.lrc::before { width: 100%; height: 0%;}
@keyframes cover1 { from { height: 0; } to { height: 100%; } }
@keyframes cover2 { from { height: 0; } to { height: 100%; } }
.vid { width: 20%; height: 60%; left: -20px; top: 60px;webkit-mask: radial-gradient(circle，red 25% transparent 70%); -web1kit-mask: radial-gradient(circle，red 25% transparent 70%);border-radius:80%; }
.vid:nth-of-type(1) { top: 0; width: 100%; height: 100%; border-radius:0%;mix-blend-mode: screen; }
#fsbtn { top: 15px; color: tan; border: 2px solid tan; left: 40%; }
</style>
<div id="tz" class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=2124631516"></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/02/18/43/02/video636249b616740.mp4" autoplay loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b48ded397d72_10s_big.mp4" autoplay loop muted></video>
<div id="fsbtn" class="fsbtn"></div>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3player_lrc.js';
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
hcplay(tz, null, geci);
fscreen.fs(tz, fsbtn);
</script>
想弄个熊猫的沙漏视频，怎么也调不好，索性弄小放窗子那，再弄了个千图网的视频加一起。
发现这个代码可以加多个视频呢。谢谢@马黑黑 的代码{:4_187:} 画面的色彩反差给这件作品增添了魅力。{:5_116:} 漂亮的制作，欣赏咯{:4_204:} https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 漂亮的画面加上直式的歌词，真赞啊！{:4_187:} 这个有歌词同步，还是竖排的，不错。 红影 发表于 2025-2-25 10:54
想弄个熊猫的沙漏视频，怎么也调不好，索性弄小放窗子那，再弄了个千图网的视频加一起。
发现这个代码可以 ...
熊猫的logo放在左上角，video标签就不要用 class="vid" 属性，该属性是模块根据千库网视频特色而做的，可以另外将视频设置为id="vid"并在 #vid 中设置遮罩：
mask: linear-gradient(to top right,red 90%, transparent);
-webkit-mask: linear-gradient(to top right,red 90%, transparent);
如果上述语句设置的不到位或错位，可以调试修改 漂亮！谢谢影子精彩分享{:4_204:} 厉害了，一下子二个作业都完成了，个个精彩{:4_205:} 二个视频效果也是用的完美，{:4_199:} 小辣椒欣赏加学习{:4_205:} 欣赏！{:4_187:} 这个歌词的字体太喜欢了 梦油 发表于 2025-2-25 10:59
画面的色彩反差给这件作品增添了魅力。
谢谢梦油鼓励{:4_187:} 朵拉 发表于 2025-2-25 11:20
漂亮的制作，欣赏咯
谢谢朵宝鼓励{:4_187:} 起个网名好难 发表于 2025-2-25 12:13
谢谢难难{:4_187:} 梦江南 发表于 2025-2-25 13:51
漂亮的画面加上直式的歌词，真赞啊！
感觉放旁边好点，就弄了竖排歌词{:4_187:} 马黑黑 发表于 2025-2-25 14:21
这个有歌词同步，还是竖排的，不错。
开始往了怎样让竖排的颜色逐步覆盖，总是从右到左的盖过来，后来想起来了{:4_173:} 马黑黑 发表于 2025-2-25 14:27
熊猫的logo放在左上角，video标签就不要用 class="vid" 属性，该属性是模块根据千库网视频特色而做的，可 ...
对哦，可以放弃class="vid" ，另设的，黑黑又给出了新的思路呢，我前面一直在里面打转{:4_187:}