爱上你是一个错（马黑黑原创）
本帖最后由 朵拉 于 2024-6-2 00:10 编辑 <br /><br /><style>#tzbox { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 760px; border: thick groove cyan; overflow: hidden; box-sizing: border-box; position: relative; }
#tzbox::before { position: absolute; content: ''; inset: 0; background: url('https://pic.imgdb.cn/item/665b42cad9c307b7e9702219.jpg') no-repeat center/cover; animation: shake .2s infinite alternate var(--state); }
.vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: color-dodge; }
.vid:nth-of-type(2) { width: 150px; height: 150px; right: 10px; top: 10px; border-radius: 50% 10%; box-shadow: 0 0 16px cyan; mix-blend-mode: unset; cursor: pointer; transition: .6s; }
.vid:nth-of-type(2):hover { transform: scale(1.1); }
@keyframes shake { to { inset: -20px; } }
</style>
<div id="tzbox">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1977619787" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/40/5d2174991e28f.mp4" loop muted disablePictureinPicture></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/40/5d2174991e28f.mp4" autoplay loop muted disablePictureinPicture title="播放/暂停"></video>
</div>
<script>
(function() {
const vids = document.querySelectorAll('.vid');
var mState = () => {
tzbox.style.setProperty('--state', ['running','paused'][+aud.paused]);
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
aud.onplaying = aud.onpause = () => mState();
vids.onclick = () => aud.paused ? aud.play() : aud.pause();
tzbox.oncontextmenu = (e) => e.preventDefault();
})();
</script> @马黑黑
老师好，学生交作业，请指正哈{:4_190:} {:4_208:} 欣赏朵宝好帖{:4_204:} 朵拉这个效果很酷哦{:4_199:}
页:
[1]