《你是我年少求剑时刻的舟》（学习黑黑茉莉花效果）
<style>
#papa { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: lightblue url('https://pic.imgdb.cn/item/642e55e8a682492fcc9bf106.jpg') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#lrc { position: absolute; left: 50%; top: 40px; transform: translate(-50%); height: 40px; font: bold 30px/40px sans-serif; background: transparent; color: Gold; display: grid; place-items: center start; pointer-events: none;--motion: cover2; --state: running; --tt: 1s; }
#lrc::before, #lrc::after { position: absolute; content: ''; }
#lrc::before { content: attr(data-lrc); width: 0%; height: 100%; color: OldLace; white-space: pre; overflow: hidden; animation: var(--motion) var(--tt) linear forwards var(--state); }
#lrc::after { width: 60px; height: 60px; left: -70px; border-radius: 50%; background: url('https://pic.imgdb.cn/item/630e356e16f2c2beb13d9226.png') center/cover no-repeat; cursor: pointer; pointer-events: auto; animation: rot 4s infinite linear var(--state); }
@keyframes cover1 { to { width: 100%; } }
@keyframes cover2 { to { width: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
.vid { position: absolute; width: 1024px; height: 540px; clip-path: inset(100px 0px 110px 0px); top: -100px; right:0px; object-fit: cover; opacity: .58; mix-blend-mode: overlay; }
.pic { position: absolute; width: 574px; height: 420px; bottom:-20px; right:20px; opacity: .98; }
</style>
<div id="papa">
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b491dd2b9164_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<img class="pic" src="https://pic.imgdb.cn/item/642e5e79a682492fcca5e64b.gif" alt="" />
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1942366324.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let mKey = 0, mFlag = true;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
aud.addEventListener('timeupdate', () => {for(let j = 0; j < lrcAr.length; j ++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
lrc.onclick = () => aud.paused ? aud.play() :aud.pause();
</script> 学个黑黑茉莉花效果。在黑黑的帖子里看到这个歌手黄诗扶，于是搜了一首歌来。谢谢黑黑的代码{:4_187:} 漂浮的云和飞行的鸟，使整个画面都动起来了。 很漂亮，欣赏老师的精彩，点赞问好！{:4_187:} 这个新鲜出炉的效果，影宝速度{:4_187:} 两个动态加得十分自然。佩服影宝会把多种效果叠加使用，太厉害了！{:4_187:} 这个真的很有新意，点赞。
真的很漂亮，欣赏红影的精彩，问候红影好！{:4_187:} 多种效果的叠加做到恰到好处，非常好 浮云飘了的效果真好。把阳鱼祭上天了，肯定把众仙吓尿{:4_173:} 梦油 发表于 2023-4-6 17:07
漂浮的云和飞行的鸟，使整个画面都动起来了。
这个就是加的视频和动画，主要还是学习代码才是关键{:4_173:} 梦缘 发表于 2023-4-6 17:18
很漂亮，欣赏老师的精彩，点赞问好！
谢谢梦缘鼓励，你的鼓励就是我学习的动力{:4_173:} 雨中悄然 发表于 2023-4-6 18:17
这个新鲜出炉的效果，影宝速度
今天正好比较空，赶紧跟着学习{:4_173:} 雨中悄然 发表于 2023-4-6 18:19
两个动态加得十分自然。佩服影宝会把多种效果叠加使用，太厉害了！
就一个视频一个动图啊，这个加起来容易的。 庶民 发表于 2023-4-6 18:39
这个真的很有新意，点赞。
多谢庶民鼓励{:4_187:} 焱鑫磊 发表于 2023-4-6 19:17
真的很漂亮，欣赏红影的精彩，问候红影好！
多谢焱鑫磊鼓励，问好{:4_187:} 马黑黑 发表于 2023-4-6 20:23
多种效果的叠加做到恰到好处，非常好
记得灌水时讨论过刻舟求剑，这个歌就有点这个意思{:4_173:} 樵歌 发表于 2023-4-6 21:02
浮云飘了的效果真好。把阳鱼祭上天了，肯定把众仙吓尿
这个太极图是以前上传的，懒得每次传图，就去翻以前传过的，就拿了这个来用{:4_173:} 红影 发表于 2023-4-6 21:38
记得灌水时讨论过刻舟求剑，这个歌就有点这个意思
看得出来 马黑黑 发表于 2023-4-6 21:41
看得出来
是跟着你那帖子里的歌手去搜的，之前我都没听过{:4_173:}