AI制作走在乡间的小路上（学习黑黑老师的代码）
本帖最后由 梦江南 于 2025-2-26 08:15 编辑 <br /><br /><style>#papa { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 720px; background: url('https://cccimg.com/view.php/9ffb73f574fa040055c4e0b514d806a1.gif') no-repeat center/cover; box-shadow: 3px 3px 8px black; display: grid; place-items: center; position: relative;border-radius:32px;}
#lrc { position: absolute; left:320px; top: 20px; font: bold 2.0em sans-serif; color: Azure; 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:GreenYellow; background: repeating-radial-gradient(orange, gray 6px); background-clip: text; -webkit-background-clip: text; clip-path: inset(0 50% 0 0); animation: var(--ani) var(--duration) linear forwards var(--state); border-bottom: 3px dashedGold; }
#btnplay { position: absolute; top:410px; left: 200px; 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: 50%; background: repeating-radial-gradient(gray,GreenYellow 20%); 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://music.163.com/song/media/outer/url?id=535028643.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> https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 起个网名好难 发表于 2025-2-24 16:08
问好老师，谢谢沙发支持。{:4_204:} 这个制作的构思真好，那么多吃草的牛儿，这夕阳下的风景真美。
欣赏江南好帖{:4_199:} 这个转动播放器好像没居中？{:4_173:} 这是一首很好听的歌曲，我很喜欢。 红影 发表于 2025-2-24 20:00
这个制作的构思真好，那么多吃草的牛儿，这夕阳下的风景真美。
欣赏江南好帖
早上问好影子，谢谢欣赏支持。{:4_204:} 红影 发表于 2025-2-24 20:02
这个转动播放器好像没居中？
不知道，我弄不好。{:4_201:} 梦油 发表于 2025-2-24 21:00
这是一首很好听的歌曲，我很喜欢。
问好梦油老师，谢谢欣赏支持。 梦江南 发表于 2025-2-25 08:51
早上问好影子，谢谢欣赏支持。
不客气，问好江南{:4_187:} 梦江南 发表于 2025-2-25 08:53
不知道，我弄不好。
可以定义图片中心的吧{:4_173:} 梦江南 发表于 2025-2-25 08:54
问好梦油老师，谢谢欣赏支持。
这些老歌、红歌很有魅力。 阿姨你试着把 height: 70px; 改为100px; 这样播放器不会晃动了，试试效果看看 红影 发表于 2025-2-25 10:48
可以定义图片中心的吧
早上好，不好意思，这个代码不会弄。 梦油 发表于 2025-2-25 14:23
这些老歌、红歌很有魅力。
是的，老歌红歌可能只是我们一代人的回忆了。 小辣椒 发表于 2025-2-25 20:24
阿姨你试着把 height: 70px; 改为100px; 这样播放器不会晃动了，试试效果看看
早上好，谢谢小辣椒指导，已改好了。播放器不晃动了。{:4_204:} 梦江南 发表于 2025-2-26 08:12
是的，老歌红歌可能只是我们一代人的回忆了。
现在能让人记住、会唱，而且久唱不衰的歌曲不多了。 梦江南 发表于 2025-2-26 08:11
早上好，不好意思，这个代码不会弄。
看到改好了，江南真棒{:4_187:} 梦油 发表于 2025-2-26 11:25
现在能让人记住、会唱，而且久唱不衰的歌曲不多了。
是的，这是我们的一代人老了。 红影 发表于 2025-2-26 22:06
看到改好了，江南真棒
这是小辣椒指导的。
页:
[1]
2