朵拉 发表于 2024-7-18 20:16

知（马黑黑原创）

<style>
#tiezi {
        --width: 1280px;
        --color: 255;
        margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px));
        width: var(--width);
        height: 720px;
        background:
                repeating-radial-gradient(circle at center, transparent 25%, rgba(255,255,var(--color),.35) 90%) center/10% 10%,
                url('https://pic.imgdb.cn/item/669904fad9c307b7e9bfc6f6.png') no-repeat center/cover;
        box-shadow: .2rem .2em .8rem rgba(0,0,0,.45);
        overflow: hidden;
        z-index: 1;
        pointer-events: none;
        position: relative;
}
#tiezi::before {
        position: absolute;
        content: '';
        bottom: 10px;
        left: calc(50%- 50px);
        width: 120px;
        height: 120px;
        background: url('https://638183.freep.cn/638183/t23/btn/f3.png') no-repeat center/cover;
        pointer-events: auto;
        cursor: pointer;
        animation: rot 8s linear infinite var(--state);
}
.vid {
        position: absolute;
        left: 0;
        width: 50%;
        height: 100%;
        object-fit: cover;
        mix-blend-mode: overlay;
}
.vid:nth-of-type(2) { left: 50%; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tiezi">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2146062363" poster="https://638183.freep.cn/638183/t23/btn/f3.png" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b48d696229ec.mp4" poster="https://638183.freep.cn/638183/t23/btn/f3.png" autoplay loop muted></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b48d696229ec.mp4" autoplay loop muted></video>
</div>

<script>
var vids = document.querySelectorAll('.vid');
aud.oncanplay = aud.onplaying = aud.onpause = () => {
        vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
        tiezi.style.setProperty('--state', ['running','paused'][+aud.paused]);
};
aud.ontimeupdate = () => tiezi.style.setProperty('--color', `${Math.floor(Math.random() * 256)}`);
tiezi.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

朵拉 发表于 2024-7-18 20:16

@马黑黑
老师 晚上好，学生交作业，请指正哈{:4_190:}

马黑黑 发表于 2024-7-18 21:11

{:4_199:}

红影 发表于 2024-7-18 21:15

漂亮，欣赏朵宝好帖{:4_204:}

梦油 发表于 2024-7-19 09:19

欣赏佳作，问候朵拉。
页: [1]
查看完整版本: 知（马黑黑原创）