美丽的神话（马黑黑原创）
本帖最后由 朵拉 于 2024-6-18 08:34 编辑 <br /><br /><style>#tz { margin: 30px 0 30px calc(50% - 561px); width: 960px; height: 600px; background: #eee; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; pointer-events: none; }
#tz::before, #tz::after { content: ''; position: absolute; }
#tz::before { content: attr(data-lrc); bottom: 0; width: 100%; height: 60px; background: repeating-linear-gradient(to right, red, green, blue, green, red) center/200px; -webkit-background-clip: text; color: transparent; font: normal 2em sans-serif; display: grid; place-items: center; }
#tz::after { left: calc(50% - 70px); top: 10px; width: 140px; height: 140px; border-radius: 50%; cursor: pointer; pointer-events: auto; }
.vid { position: absolute; width: 960px; height: 540px; }
.vid:nth-of-type(2) { right: 5px; top: 5px; width: 140px; height: 140px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 60px black; cursor: pointer; pointer-events: auto; }
</style>
<div id="tz" data-lrc="HUACHAO PLAYER">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2145065424" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6c5933022.mp4" autoplay loop muted disablePictureInPicture></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/40/5d2174991e28f.mp4" autoplay loop muted disablePictureInPicture></video>
</div>
<script>
var curkey = 0;
var vids = document.querySelectorAll('.vid');
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr) {
tz.dataset.lrc = lrcAr;
curkey ++;
}
};
aud.onseeked = () => curkey = 0;
tz.onclick = () => {
aud.paused ? aud.play() : aud.pause();
vids.forEach(vid => aud.paused ? vid. pause() : vid.play());
};
vids.oncontextmenu = (e) => e.preventDefault();
let lrcAr = [,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
</script> @马黑黑
老师好，学生交作业，请指正哈{:4_190:}
另：没想到，不识别韩语歌词{:4_173:} 欣赏佳作，问候朵拉。 朵宝这个只换了首歌曲啊{:4_173:} 欣赏老师漂亮的音画！{:4_199:}
页:
[1]