远走高飞 歌手： 金志文/赖美云 （学习黑黑遗失地效果）
<style>
#papa { margin: 150px 0 0px calc(50% - 881px); width: 1600px; height: 960px; background: url('https://xlaj.cn/assets/file/zp/20230705180547.gif') no-repeat center/cover, url(' https://xlaj.cn/assets/file/zp/20240227211248.gif') no-repeat 1126px 68%, url('https://xlaj.cn/assets/file/zp/20240227211123.gif')no-repeat 1500px 60%; background-blend-mode: darken; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#lrc { position: absolute; left: 50%;bottom: 40px; font: bold 2.0em sans-serif; color: gray; text-shadow: 1px 1px 1px rgba(0,0,0,.45); --ani: lrcGo1; --duration: 1s; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; background: repeating-radial-gradient(orange, gray 6px); background-clip: text; -webkit-background-clip: text; clip-path: inset(0 100% 0 0); animation: var(--ani) var(--duration) linear forwards var(--state); border-bottom: 2px dashed gray; }
#btnplay { position: absolute; top: 90px; left: 100px; width: 200px; height: 200px; opacity: .7; animation: rotating 6s linear infinite var(--state); cursor: pointer; }
ye-zi { position: absolute; left: calc(50% - 0.5 * var(--ww)); top: 0; width: var(--ww); height: 100px; border-radius: 60%; background: repeating-radial-gradient(gray, tan 25%); transform-origin: 50% 100%; transform: rotate(var(--deg)); }
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
</style>
<div id="papa">
<audio src="https://wj.zp68.com/lxx/yunhua/2023/03/15/yzgf.mp3" autoplay loop></audio>
<div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>
<div id="btnplay"></div>
</div>
<script>
var geci = [ ,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc-01.js';
document.querySelector('body').appendChild(sF);
Array.from({length: all = 5}).forEach((item,key) => {
item = document.createElement('ye-zi');
item.style.cssText += `--ww: 60px; --deg: ${360 / all * key}deg;`;
btnplay.prepend(item);
});
</script>
<br><br><br><br><br> @马黑黑
黑黑套用玩一个，小辣椒是旧图旧音乐，这样速度快一点
修改了播放器颜色中的20%改了25% 感觉线条不是很明显效果好一点（自我感觉）
2个png移动了一下位子，现在的图片位置移动也是和以前不一样了，好在前面玩了裸足女神效果
反正就是套用了，谢谢黑黑源码分享。
播放器和歌词颜色和我的背景图颜色很搭，开始自己改了其他颜色，越看越不舒服，改回来了 匆匆赶个作业，明天起早，先下了 小辣椒 发表于 2024-2-27 21:50
匆匆赶个作业，明天起早，先下了
师傅，辛苦了~~{:4_171:} 这个效果和亲爱的背景很相配呢，这个制作好美{:4_199:} 精美{:4_199:} 有电视机的{:4_199:} 好看，好听 谢谢分享 金志文原来这么年轻，一直喜欢他的歌 三月的阳光 发表于 2024-2-27 22:21
师傅，辛苦了~~
问好阳光，不辛苦，自己喜欢的就会玩玩 红影 发表于 2024-2-27 22:43
这个效果和亲爱的背景很相配呢，这个制作好美
亲爱的，这个背景而且文件不大，所以打开速度还挺快的 马黑黑 发表于 2024-2-27 22:44
精美
黑黑晚上好，谢谢鼓励{:4_187:} 流水光阴 发表于 2024-2-28 13:04
有电视机的
假的{:4_170:} 流水光阴 发表于 2024-2-28 13:05
好看，好听 谢谢分享
谢谢流水欣赏，晚上好{:4_187:} 流水光阴 发表于 2024-2-28 13:05
金志文原来这么年轻，一直喜欢他的歌
帅哥的{:4_172:} 小辣椒 发表于 2024-2-28 20:13
黑黑晚上好，谢谢鼓励
{:4_191:} 小辣椒 发表于 2024-2-28 20:12
亲爱的，这个背景而且文件不大，所以打开速度还挺快的
色彩搭配十分好呢{:4_187:} 红影 发表于 2024-2-28 22:55
色彩搭配十分好呢
凑合看吧{:4_170:} 马黑黑 发表于 2024-2-28 20:36
{:4_180:}
喝茶喝酒随便自己挑{:4_191:}{:4_176:}