《簪花行路》（学习黑黑落花缤纷效果）
<style>#papa {
margin: 80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://pic2.imgdb.cn/item/645b3fc40d2dde577751bbd5.jpg') no-repeat center/cover;
box-shadow: 0 0 8px #000;
position: relative;
z-index: 1;
--state: paused;
}
css-doodle { position: absolute; }
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 50%; transform: translate(-50%); bottom: 6px; font: bold 2.4em sans-serif; color: hsl(0, 100%, 28%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(60, 100%, 50%, .95)); z-index: 99; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(5, 100%, 14%, .45), hsla(15, 100%, 66%, .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%; } }
.mypic { position: absolute;left: 0px;bottom: 0px;}
</style>
<div id="papa">
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<css-doodle grid="6" id="mplayer">
:doodle {
@size: 200px;
@shape: circle;
right: 60px;
top: 60px;
cursor: pointer;
z-index: 2;
background: snow url('https://pic2.imgdb.cn/item/645b41080d2dde57775316df.png') no-repeat center/cover;
animation: rot 6s infinite linear forwards var(--state);
}
@keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<css-doodle grid="20">
:doodle {
@size: 1024px 640px;
}
position: absolute;
left: @r(100)%;
top: -20%;
:after {
position: absolute;
content: "@p(♩,♪,♫,♬,❉,❁,❀;)";
color: snow;
font-size: @r(3, 30)px;
}
animation: fall @r(25,50)s @r(-20, 20)s infinite var(--state);
@keyframes fall {
0% { top: -20%; transform: rotate(0deg); }
100% {top: 120%; transform: rotate(@p(360, 720)deg); }
}
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1869188306.mp3" autoplay loop></audio>
<img class="mypic" src="https://pic2.imgdb.cn/item/645b550c0d2dde57776b9c6b.png" alt="" />
</div>
<script>
(function(){
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
let mKey = 0, mFlag = true;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), papa.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'running'), papa.style.setProperty('--state', '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('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('seeked', () => calcKey());
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> 跟着学一个，背景图选的不好，感觉歌词无论放哪都不太清楚。
感谢@马黑黑的代码，也从亦是金的帖子里套用了点符号，同样谢谢@亦是金{:4_204:}{:4_204:} 白色系很难调教，此帖能从容应对，很是难得 那个光盘里本来想用红影制造几个字，后来想想，还是用飞花自在吧。 红影 发表于 2023-5-10 20:09
跟着学一个，背景图选的不好，感觉歌词无论放哪都不太清楚。
感谢@马黑黑的代码，也从亦是金的帖子里套 ...
歌词显示是清晰的，不过可以再下调一点就会更好 欣赏红影美帖！飘落的符号和背景颜色协调，美！{:4_187:} 马黑黑 发表于 2023-5-10 20:09
白色系很难调教，此帖能从容应对，很是难得
我选的背景也是白色的花儿，就没改落花的颜色，直接用白的了。
这样有个好处，正好空白的地方看不出来，感觉那边就没有花的感觉，也挺好{:4_173:} 马黑黑 发表于 2023-5-10 20:10
歌词显示是清晰的，不过可以再下调一点就会更好
我本来在最下面，觉得不太好，才调上去的。好吧，我再拿下来。 亦是金 发表于 2023-5-10 20:19
欣赏红影美帖！飘落的符号和背景颜色协调，美！
谢谢亦是金老师，用了你帖子里的音乐符号等小图标，那个图标我不知道哪找，就直接借用了{:4_173:} 红影 发表于 2023-5-10 20:21
我本来在最下面，觉得不太好，才调上去的。好吧，我再拿下来。
放在栏杆的中间最好 马黑黑 发表于 2023-5-10 20:10
歌词显示是清晰的，不过可以再下调一点就会更好
歌词我跳到最下面了，黑黑再看看？ 红影 发表于 2023-5-10 20:20
我选的背景也是白色的花儿，就没改落花的颜色，直接用白的了。
这样有个好处，正好空白的地方看不出来， ...
是的，虚实相互作用，产生的效果也是极佳的 红影 发表于 2023-5-10 20:23
歌词我跳到最下面了，黑黑再看看？
这样也是不错的 马黑黑 发表于 2023-5-10 20:22
放在栏杆的中间最好
那是最开始的设计，觉得歌词看不清了，才放上去了。现在又放回最开始的地方了{:4_173:} 红影 发表于 2023-5-10 20:26
那是最开始的设计，觉得歌词看不清了，才放上去了。现在又放回最开始的地方了
反正都可以的 马黑黑 发表于 2023-5-10 20:23
是的，虚实相互作用，产生的效果也是极佳的
这样不会感觉全屏都是花朵，冷眼看的时候会觉得都集中在靠左的，世界是全屏的呢{:4_173:} 马黑黑 发表于 2023-5-10 20:24
这样也是不错的
饿呢，那就这样了，不再动了{:4_173:} 红影 发表于 2023-5-10 20:27
这样不会感觉全屏都是花朵，冷眼看的时候会觉得都集中在靠左的，世界是全屏的呢
都行的 红影 发表于 2023-5-10 20:28
饿呢，那就这样了，不再动了
觉得好就行 红影 发表于 2023-5-10 20:22
谢谢亦是金老师，用了你帖子里的音乐符号等小图标，那个图标我不知道哪找，就直接借用了
这些小符号在搜狗输入法里有的，https://www.huachaowang.com/forum.php?mod=image&aid=44404&size=300x300&key=affd7ba9f18bca49&nocache=yes&type=fixnonehttps://www.huachaowang.com/forum.php?mod=image&aid=44405&size=300x300&key=cebdf3f5fc63b786&nocache=yes&type=fixnone