《中国龙》（学习黑黑彩虹伞SVG格式图片）
<style>
#papa { margin: 80px 0 0 calc(50% - 681px); width: 1200px; height: 669px; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; display: grid; place-items: center; background: url('https://pic.imgdb.cn/item/656218ecc458853aef1a0de8.jpg') no-repeat center/cover; overflow: hidden; }
#vid { position: absolute; width: 100%; height: 122%; top:-9%; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 0; opacity: .95; }
#prog { position: absolute; bottom: 100px; width: 300px; height: 8px; border: 1px solid lightblue; border-radius: 10px;background: linear-gradient(to right, green, red var(--prg), #eee 0); color: red; --prg: 0%; --state: paused; }
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 0; }
#prog::after { right: 0; content: attr(data-du); }
#btnplay { position: absolute; top: -260px; left: calc(50% - 120px); width: 240px; height: 240px; border-radius: 50%; opacity: .75; background: url('https://638183.freep.cn/638183/web/svg/7c-umbrella.svg') no-repeat center/cover; cursor: pointer; animation: rot 6s infinite linear var(--state); }
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 50%; transform: translate(-50%); bottom: 20px; font: bold 2.8em sans-serif; color: hsl(300, 100%, 100%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(60, 100%, 50%, .75), hsla(20, 100%, 50%, .6), hsla(60, 100%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(-1turn); } }
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/01/04/62/614adfa35a4aa_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted" ></video>
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
<span id="btnplay" title="播放/暂停"></span>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29023305.mp3" autoplay loop></audio>
<script>
(function() {
let toMin = (val)=> {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
let vid = document.querySelector('.vid');
let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'),prog.style.setProperty('--state', 'paused'), vid.pause()) : (lrc.style.setProperty('--state', 'running'),prog.style.setProperty('--state', 'running'), vid.play());
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => {
prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
prog.dataset.cu = toMin(aud.currentTime);
prog.dataset.du = toMin(aud.duration);
});
let mKey = 0, mFlag = true;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
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());
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
这个SVG图片真好，想设置多大都可以呢。谢谢@马黑黑 的图图{:4_187:} 偶尔听到这首歌，十分喜欢其中的气势。中华儿女振作起来，站在世界之巅{:4_178:} 我上山是虎
我下海是龙
我在人间是
堂堂的大英雄
{:4_205:} 我挥手起雨
我舞动生风
看我东方升腾的中国龙{:4_178:} 画面雄伟壮美，图意动感与主体完美贴合。龙之伞护佑我中华永岁平安！ 马黑黑 发表于 2023-11-26 07:41
画面雄伟壮美，图意动感与主体完美贴合。龙之伞护佑我中华永岁平安！
被黑黑感动了，我大中华一定会腾飞的{:4_178:} 醉美水芙蓉 发表于 2023-11-26 08:38
红影好棒！做得真漂亮！
问好水芙蓉美女，让我们一起祝福我们伟大的祖国{:4_187:} 红影 发表于 2023-11-26 09:33
被黑黑感动了，我大中华一定会腾飞的
{:4_181:} 马黑黑 发表于 2023-11-26 09:52
其实这首听到的时候我也觉得提别提气{:4_187:} 红影 发表于 2023-11-26 09:57
其实这首听到的时候我也觉得提别提气
不错的 马黑黑 发表于 2023-11-26 10:10
不错的
不惧风雨，不怕地裂天崩，中华民族根基深厚，韧劲很强{:4_204:} 红影 发表于 2023-11-26 10:27
不惧风雨，不怕地裂天崩，中华民族根基深厚，韧劲很强
历朝历代，一切兴衰看高层品性和理念 龙乃上古神兽，万物之主。这图图气势恢宏，叱咤风云！五千年文明的写照。 很有创新，本来伞与龙不相干的，但作者这里比喻龙是咱五千年保护神。 马黑黑 发表于 2023-11-26 10:28
历朝历代，一切兴衰看高层品性和理念
黑黑说得有道理，但民众的爱国心也很重要。 樵歌 发表于 2023-11-26 11:30
龙乃上古神兽，万物之主。这图图气势恢宏，叱咤风云！五千年文明的写照。
谢谢师兄，想做这个彩虹伞效果，不知道做什么好，正好听到这首喜欢的歌儿，就用来做帖子了{:4_187:} 樵歌 发表于 2023-11-26 11:32
很有创新，本来伞与龙不相干的，但作者这里比喻龙是咱五千年保护神。
师兄的解说更美妙，我自己都没想到呢{:4_199:} 红影 发表于 2023-11-26 13:08
谢谢师兄，想做这个彩虹伞效果，不知道做什么好，正好听到这首喜欢的歌儿，就用来做帖子了
师妹就是灵动，结合得非常巧妙呵{:4_199:}