《匆匆那年》（学习黑黑轻涟效果）
<style> #papa { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/658052c8c458853aef981248.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; display: grid; place-items: center; z-index: 1; }.mypic { position: absolute; width: 260px; right: 120px; bottom:100px; cursor: pointer; animation: rot 6s infinite linear var(--state); }
#vid { position: absolute; width: 1024px; height: 640px; top:-40px; object-fit: cover; opacity: .8; pointer-events: none; mix-blend-mode: screen; z-index: 2; clip-path:polygon(0% 10%, 100% 10%, 100% 40%, 0% 40%); }
#vid1 { position: absolute; width: 675px; height: 422px; top:150px; left: -170px; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 2; clip-path:polygon(30% 9%, 98% 9%, 98% 98%, 30% 98%); }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2414777/00/01/69/5b4869ef60cc6_10s_big.mp4" autoplay="" loop="" muted=""></video>
<video id="vid1" src="https://img.tukuppt.com/video_show/15653652/00/19/08/5efbedb9839c7_10s_big.mp4" autoplay="" loop="" muted=""></video>
<img class="mypic" src="https://pic.imgdb.cn/item/65805308c458853aef9956ea.png" alt="" />
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29759371" autoplay loop></audio>
</div>
<script>
(function() {
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#papa',
lrcAr: geci,
btn: '.mypic',
lrc_css: 'left: 770px; transform: translate(-50%); bottom: 40px; color: snow; --bg: linear-gradient(rgba(0,170,255,.3),rgba(117,207,255,.9));',
});
};
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
})();
</script> 加了两个视频效果进去，发现暂停果然都可以停止呢。{:4_173:} 谢谢黑黑的代码@马黑黑{:4_187:} 同时复习一下歌词颜色的设置{:4_204:} 红影 发表于 2023-12-18 23:37
加了两个视频效果进去，发现暂停果然都可以停止呢。
理论上多少个都可以的 那年是哪年？ 马黑黑 发表于 2023-12-19 08:00
理论上多少个都可以的
我是先看到了那个文字视频，决定做这首歌。然后去找图片找歌曲，找个云的视频不太好，因为不是后期的视频会有痕迹，就只能用这个了。
又想起那些青葱岁月如梦幻泡影，所以选了个泡泡做按钮。
作业构思汇报完毕{:4_173:} 马黑黑 发表于 2023-12-19 08:01
那年是哪年？
是青春时光，已经匆匆而去了{:4_173:} 我一点击那个圆，这云雾就停了，再点击那个圆，那云雾也不动了。 梦油 发表于 2023-12-19 09:40
我一点击那个圆，这云雾就停了，再点击那个圆，那云雾也不动了。
点击会停，再点就继续了啊，不会不动的{:4_173:} 问好红影！好听，好帖，欣赏学习了。准备套用你的帖子学习领悟黑黑老师的代码！{:4_187:} 亦是金 发表于 2023-12-19 10:26
问好红影！好听，好帖，欣赏学习了。准备套用你的帖子学习领悟黑黑老师的代码！
好啊，黑黑今天又有个新的呢，还能把粒子也用上去的{:4_187:} 红影 发表于 2023-12-19 09:26
是青春时光，已经匆匆而去了
只留下了抬头纹 红影 发表于 2023-12-19 09:25
我是先看到了那个文字视频，决定做这首歌。然后去找图片找歌曲，找个云的视频不太好，因为不是后期的视频 ...
@辫子哥哥 来打分 优秀学生{:4_187:} 马黑黑 发表于 2023-12-19 11:35
只留下了抬头纹
俺的抬头纹连蚊子都不敢上了{:4_189:} 岁月·如歌 发表于 2023-12-19 12:24
俺的抬头纹连蚊子都不敢上了
功力不一般{:4_196:} 红影 发表于 2023-12-19 10:24
点击会停，再点就继续了啊，不会不动的
我试试 很美的制作，管理员也是高手{:4_187:}