朵拉 发表于 2024-10-6 16:03

罗生门（马黑黑原创）

<style>
        #papa { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/67023e0fd29ded1a8c02cd5d.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; }
        #player { position: absolute; bottom: 320px; left: calc(90% - 100px); width: 120px; height: 120px; cursor: pointer; animation: rot 8s linear infinite var(--state); }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: linear-gradient(transparent 10%, red 30%, red 0); pointer-events: none; }
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1456890009" autoplay loop></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/20/12/29/13/53/31/video5feac45b722c5.mp4" autoplay loop muted></video>
        <img id="player" alt="" src="https://638183.freep.cn/638183/web/svg/9star.svg"/>
</div>

<script>
        mState = () => {
                papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
                aud.paused ? vid.pause() : vid.play();
        };
        aud.onplaying = aud.onpause = () => mState();
        player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

朵拉 发表于 2024-10-6 16:05

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

梦油 发表于 2024-10-6 16:34

欣赏佳作，问候朵拉。

朵拉 发表于 2024-10-6 16:49

梦油 发表于 2024-10-6 16:34
欣赏佳作，问候朵拉。

问好梦油老师，假期快乐{:4_190:}{:4_204:}

马黑黑 发表于 2024-10-6 16:55

{:4_199:}

红影 发表于 2024-10-6 18:34

漂亮，欣赏朵宝好帖。

梦油 发表于 2024-10-7 10:04

朵拉 发表于 2024-10-6 16:49
问好梦油老师，假期快乐

谢谢你的香茶和美丽的鲜花。{:5_108:}
页: [1]
查看完整版本: 罗生门（马黑黑原创）