再次学习马黑黑老师的代码【你送我一枝玫瑰花】
<style>
#tz { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: 1024px; height: 680px; background: url('https://pic.imgdb.cn/item/6678fb94d9c307b7e964405b.gif') no-repeat center/cover; overflow: hidden; z-index: 1; box-shadow: 2px 2px 3px gray; position: relative; }
#tz::before { content: attr(data-lrc); position: absolute; top: 10px; width: 100%; height: 60px; font: bold 32px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to right, silver, tan, white, tan, silver) 50%/200px 60px; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px #333); text-align: center; }
#player { position: absolute; left: 480px; top: 90px; width: 80px; height: 80px; border-radius: 50%; background: lightblue; box-shadow: inset 0 0 6px white, 0 0 18px purple; cursor: pointer; opacity: .5; transition: 1s; animation: rot 6s linear infinite var(--state); }
#player::after { position: absolute; content: ''; left: calc(50% - 10px); top: calc(50% - 10px); width: 20px; height: 20px; border-radius: 50%; background: olive; }
#player:hover { width: 90px; height: 90px; }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: overlay; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="tz" data-lrc="HUACHAO">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=436046781" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b491dd2b9164.mp4" autoplay loop muted></video>
<div id="player" title="播放/暂停"></div>
</div>
<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js/yslrc.js';
document.body.appendChild(sf);
player.style.backgroundImage = 'conic-gradient(' + 'cyan,tan,gold,transparent,teal,'.repeat(15).slice(0, -1) + ')';
var lrc = `你送我一枝玫瑰花\n你送我一枝玫瑰花\n我要诚恳地谢谢你\n哪怕你自己看得像个傻子\n哪怕你自己看得像个傻子\n我还是能够看得上你\n哪怕你自己看得像个傻子\n哪怕你自己看得像个傻子\n我还是能够看得上你\n你要骄傲轻视我\n你要骄傲轻视我\n我要看看你的本领\n我要看看你的本领\n我要嫁上一个比你还强的\n我要嫁上一个比你还强的\n就会刺痛你的心\n我要嫁上一个比你还强的\n我要嫁上一个比你还强的\n就会刺痛你的心\n百灵鸟儿从手中飞去\n百灵鸟儿从手中飞去\n落到美丽的花园里\n百灵鸟儿从手中飞去\n花儿一样可爱的百灵鸟儿\n梳着你的美发\n花儿一样可爱的百灵鸟儿\n花儿一样可爱的百灵鸟儿\n梳着你的美发\n花儿一样可爱的百灵鸟儿\n我要像黄鹂和百灵鸟\n我们相爱如鸳鸯\n我们的爱情像那燃烧的火焰\n我们的爱情像那燃烧的火焰\n大风也不能把它吹熄\n我们的爱情像那燃烧的火焰\n我们的爱情像那燃烧的火焰\n大风也不能把它吹熄\n我们的爱情像那燃烧的火焰\n我们的爱情像那燃烧的火焰\n大风也不能把它吹熄\n\n大风也不能把它吹熄`;
</script> https://5b0988e595225.cdn.sohucs.com/images/20170929/062e8b7bb79942b3ad2b0868bd570947.gif 起个网名好难 发表于 2024-6-24 13:38
谢谢老师分享支持。下午好！
https://pic.imgdb.cn/item/667542d8d9c307b7e9e7b1d4.gif
欣赏精美制作，问候梦江南朋友。 梦油 发表于 2024-6-24 15:03
欣赏精美制作，问候梦江南朋友。
问好梦油老师，谢谢关注支持！
欣赏精美制作 梦油 发表于 2024-6-24 15:03
欣赏精美制作，问候梦江南朋友。
https://pic.imgdb.cn/item/667542d8d9c307b7e9e7b1d4.gif 漂亮，那朵玫瑰上还有个滚动的水珠呢。流转的边框也漂亮。
左上的四个方块不知道是做什么的，可以加点漂亮的文字啊{:4_173:} 歌词同步的位置和颜色都很漂亮呢。
欣赏梦江南好帖{:4_199:} 月半可可 发表于 2024-6-24 16:16
欣赏精美制作
谢谢老师关注支持。问好！
https://pic.imgdb.cn/item/667542d8d9c307b7e9e7b1d4.gif 红影 发表于 2024-6-24 16:24
漂亮，那朵玫瑰上还有个滚动的水珠呢。流转的边框也漂亮。
左上的四个方块不知道是做什么的，可以加点漂亮 ...
问好影子，左上的四个方块是装饰用的。
https://pic.imgdb.cn/item/667542d8d9c307b7e9e7b1d4.gif 红影 发表于 2024-6-24 16:25
歌词同步的位置和颜色都很漂亮呢。
欣赏梦江南好帖
歌词颜色是马黑黑老师的。
https://pic.imgdb.cn/item/666a6741d9c307b7e9aa2b68.gif 梦江南 发表于 2024-6-24 16:13
问好梦油老师，谢谢关注支持！
梦江南朋友别客气。 歌动听，画面漂亮！ 梦油 发表于 2024-6-24 17:26
梦江南朋友别客气。
早上问好梦油老师！祝新一天开心快乐！ 樵歌 发表于 2024-6-24 18:24
歌动听，画面漂亮！
早上问好樵歌管理员！谢谢关注支持！ 梦江南 发表于 2024-6-24 17:01
问好影子，左上的四个方块是装饰用的。
嗯嗯，挺有趣的{:4_187:} 梦江南 发表于 2024-6-24 17:03
歌词颜色是马黑黑老师的。
用在这里个背景里特别好呢{:4_187:} 欣赏梦江南精彩的制作{:4_199:}
这个动图背景真漂亮 歌曲也是好听，非常不错的制作{:4_178:}