策马奔腾 - 凤凰传奇（黑黑老师代码）
本帖最后由 梦江南 于 2025-3-1 15:33 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 520px); width: 900px; height: 1200px; position: relative; background: silver url('https://cccimg.com/view.php/c63384bf1237bb8450c3b7c9d43ec140.gif') no-repeat center/cover; box-shadow: 4px 4px 8px rgba(0,0,0,.6); overflow: hidden; display: grid; place-items: center; --state: paused; border-radius:32px;}
#mplayer { position: absolute; bottom: 35px; text-align: center; color: #3b3b3b; }
#mplayer p { margin: 0; padding: 0; cursor: pointer; }
#mprog { width: 240px; accent-color: lightyellow; outline: none; cursor: pointer; }
#btnplay { width: 60px; animation: rotating 6s infinite linear var(--state); }
#lrc { --motion: cover2; --tt: 1s; --bg: repeating-linear-gradient(135deg, orange 1px, yellow 6px); position: absolute; top: 35px; font: bold 2.4em sans-serif; color: hsl(100, 100%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; border-bottom: 6px dotted orange; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; background-clip: text; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
#vid { position: absolute; width: 300px; height: 300px; object-fit: cover; aspect-ratio: 1; border-radius: 50%; filter: drop-shadow(3px 4px 20px #000); mix-blend-mode: soft-light; cursor: pointer; }
@keyframes cover1 { from { width: 0%; }to { width: 100%; } }
@keyframes cover2 { from { width: 0%; }to { width: 100%; } }
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio src="https://cccimg.com/view.php/d649a2a70aa799e825bbb906d16b3af9.mp3
" autoplay loop></audio>
<div id="mplayer">
<p><img id="btnplay" src="https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png" title="播放/暂停" alt="" /></p>
<p>
<output id="mcur">0:00</output>
<input id="mprog" type="range" min="0" step="any" max="100" value="0" title="调节进度" />
<output id="mdu">0:00</output>
</p>
</div>
<div id="lrc" data-lrc="HuaChao LRC Player">HuaChao LRC Player</div>
</div>
<script>
var geci = [ ,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
var sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/js/lrcku_range.js';
sf.charset = 'utf-8';
document.querySelector('body').appendChild(sf);
vid.onclick = (e) => aud.paused ? aud.play() : aud.pause();
</script>
https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 阿姨太赞了，震撼的场景，漂亮{:4_199:} 本帖最后由 梦江南 于 2025-3-1 16:06 编辑
起个网名好难 发表于 2025-3-1 15:56
问好老师，谢谢欣赏支持{:4_204:}。 背景动图制作太美了，配这个音乐也是很相配 歌词同步做的也是好，阿姨也是一个优秀学生{:4_205:} 小辣椒 发表于 2025-3-1 16:00
阿姨太赞了，震撼的场景，漂亮
回小辣椒，这是用AI做出来的，再转换gif格式。
谢谢欣赏支持鼓励。{:4_204:} 小辣椒 发表于 2025-3-1 16:03
背景动图制作太美了，配这个音乐也是很相配
背景是AI的功劳，音乐是自己去寻找来做的。 小辣椒 发表于 2025-3-1 16:04
歌词同步做的也是好，阿姨也是一个优秀学生
幸亏听力还好，这个男的说词太快有点误差。{:4_201:}
被小辣椒表扬，阿姨很开心。谢谢哦！{:4_179:} 梦江南 发表于 2025-3-1 16:06
回小辣椒，这是用AI做出来的，再转换gif格式。
谢谢欣赏支持鼓励。
知道是AI做出来的{:4_189:} 梦江南 发表于 2025-3-1 16:09
背景是AI的功劳，音乐是自己去寻找来做的。
制作很棒哦，音乐特别的给力，必须赞的~~ 梦江南 发表于 2025-3-1 16:12
幸亏听力还好，这个男的说词太快有点误差。
被小辣椒表扬，阿姨很开心。谢谢哦！
这样挺好的，画面已经很完美了，阿姨很棒哦！小辣椒要向阿姨好好学习的 小辣椒 发表于 2025-3-1 16:17
知道是AI做出来的
这个AI真的很棒，接受高科技，也是一种乐趣。 梦江南 发表于 2025-3-1 16:28
这个AI真的很棒，接受高科技，也是一种乐趣。
是的，最近很火了，阿姨我准备下了，晚上见了 小辣椒 发表于 2025-3-1 16:18
制作很棒哦，音乐特别的给力，必须赞的~~
音乐一定要匹配画面的。 小辣椒 发表于 2025-3-1 16:19
这样挺好的，画面已经很完美了，阿姨很棒哦！小辣椒要向阿姨好好学习的
小辣椒客气又谦虚，折煞阿姨了。 小辣椒 发表于 2025-3-1 16:32
是的，最近很火了，阿姨我准备下了，晚上见了
好的，好好休息。 这个场景很奔放，配上这样歌曲，十分相配呢。
欣赏江南好帖，太赞了{:4_199:} 梦江南 发表于 2025-3-1 16:45
音乐一定要匹配画面的。
是的，这样出来才有画面感，所以现在的画面感就很自然 梦江南 发表于 2025-3-1 16:48
小辣椒客气又谦虚，折煞阿姨了。
没有啊，小辣椒有许多不会的，许多作业没有完成的