年 轮（马黑黑原创）
本帖最后由 朵拉 于 2024-5-9 23:13 编辑 <br /><br /><style>#papa { margin: 20px 0 20px calc(50% - 681px); width: 1200px; height: 770px; background: url('https://pic.imgdb.cn/item/663ce5150ea9cb1403ec5dc0.jpg'); box-shadow: 2px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; }
#papa::before { position: absolute; content: ''; left: 50px; bottom: 50px; width: 300px; height: 300px; background: url('https://638183.freep.cn/638183/t24/webp/fate.we') no-repeat center/cover; }
#play { position: absolute; left: 58px; bottom: 200px; border-radius: 50%; cursor: pointer; animation: rot 10s linear infinite var(--state); }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 70px); object-fit: cover; mix-blend-mode: screen; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2130074493" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/15653652/00/76/92/60ae3cec5fa52.mp4" muted autoplay loop></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c945639ccc.mp4" muted loop></video>
<img id="play" src="https://638183.freep.cn/638183/small/ytji.png" alt="" />
</div>
<script>
let vids = document.querySelectorAll('.vid');
var mState = () => {
papa.style.setProperty('--state', ['running','paused'][+aud.paused]);
playvideo(!aud.paused);
};
var playvideo = (flag) => vids.forEach(vid => flag ? vid.play() : vid.pause());
aud.onplaying = aud.onpause = () => mState();
play.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> @马黑黑
老师 晚上好，学生交作业，请指正哈{:4_190:} {:4_199:} 挺漂亮的音画作品。 漂亮的制作。欣赏朵宝好帖{:4_204:}
页:
[1]