学习马黑黑老师的代码【画你】
本帖最后由 梦江南 于 2024-6-21 16:34 编辑 <br /><br /><style>#tz { margin: 30px 0; left: calc(50% - 21px); transform: translateX(-50%); width: 800px; height: 1200px; background: url('https://pic.imgdb.cn/item/66752360d9c307b7e9a21054.jpg') 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: 320px; top: 190px; 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=1943043778" 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我用一生守护着你`;
</script> https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif 起个网名好难 发表于 2024-6-21 16:57
谢谢老师欣赏支持！https://pic.imgdb.cn/item/667542d8d9c307b7e9e7b1d4.gif
欣赏佳作，问候江南。 欣赏老师的精美音画：漂亮{:4_204:} 这个还没来得及看，梦江南真快 {:4_187:} 梦油 发表于 2024-6-21 21:20
欣赏佳作，问候江南。
问好梦油老师，谢谢支持，祝周末快乐！{:4_204:} 执著 发表于 2024-6-21 22:57
欣赏老师的精美音画：漂亮
问好执著，谢谢关注 支持。祝周末快乐！{:4_204:} 红影 发表于 2024-6-22 00:23
这个还没来得及看，梦江南真快
您 这么忙，我是闲人，消息当然比您灵通了。周末快乐！{:4_204:} 梦江南 发表于 2024-6-22 08:40
您 这么忙，我是闲人，消息当然比您灵通了。周末快乐！
这个制作很漂亮，字体设计奇妙，还有电影胶片一样的图组设计，底图的条纹设计也好看，还可以一键暂停。
很赞的制作{:4_199:} 红影 发表于 2024-6-22 10:50
这个制作很漂亮，字体设计奇妙，还有电影胶片一样的图组设计，底图的条纹设计也好看，还可以一键暂停。
...
问好影子，谢谢夸赞支持鼓励！{:4_204:} 梦江南 发表于 2024-6-22 08:35
问好梦油老师，谢谢支持，祝周末快乐！
梦江南朋友别客气。 梦江南 发表于 2024-6-22 13:32
问好影子，谢谢夸赞支持鼓励！
不客气啊，应该谢谢你带来的好帖才是{:4_187:} 梦油 发表于 2024-6-22 16:43
梦江南朋友别客气。
没客气，梦油早上好！{:4_204:} 红影 发表于 2024-6-22 23:19
不客气啊，应该谢谢你带来的好帖才是
谢谢您的平台，让我有玩的机会 ，向您们致敬！{:4_204:} 梦江南 发表于 2024-6-23 08:22
谢谢您的平台，让我有玩的机会 ，向您们致敬！
太客气了，这里就一个大家一起玩的地方，我们也都玩到了啊{:4_173:}
页:
[1]