土坡上的狗尾草（学习马黑黑致你效果）
本帖最后由 朵拉 于 2025-1-21 08:48 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/mod/btn_lrc.css';
#tz { --state: running; margin: 30px 0 30px calc(50% - 593px); background: url('https://pic1.imgdb.cn/item/678e4588d0e0a243d4f5f29f.jpg') no-repeat center/cover; }
#fsbtn { top: 20px; }
#lrc { bottom: 20px; }
#mplayer { left: 510px; width: 10px; height: 10px; display: grid; place-items: center; }
.feather { position: absolute; width: 40px; height: 30px; background: url('https://pic1.imgdb.cn/item/678df921d0e0a243d4f5d852.png') no-repeat center/cover; }
</style>
<div id="tz" class="pa">
<audio id="aud" src="https://file.uhsea.com/2501/a792caf88cce6504438198c3fa88b1f2D2.mp3" autoplay="" loop=""></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/02/27/14/43/20/video63fc51087193b.mp4" autoplay loop muted></video>
<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="mplayer" class="mplayer"></div>
<div id="fsbtn" class="fsbtn"></div>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/btn_lrc.js';
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
var lrcAr = [,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
var total = 9, a = 360 / total;
for(var i = 0; i < total; i++) {
var f = document.createElement('span');
f.className = 'feather';
f.style.cssText += `transform: rotate(${i * a}deg) translateY(-60px);`;
mplayer.appendChild(f);
}
hcplay(tz, lrcAr);
fscreen.fs(tz, fsbtn);
</script> @马黑黑
老师好，学生交作业，请指正哈{:4_190:}
数值稍稍改动下，出来效果也不错~~ 欣赏老师的精美音画，播放器的颜色漂亮。问好！{:4_199:} 漂亮的制作，欣赏朵宝好帖{:4_187:} {:4_199:}
页:
[1]