小辣椒 发表于 2024-4-28 13:23

纯音欣赏--远风

<meta charset="UTF-8">
<style>
        #mydiv { margin: 130px 0 20px calc(50% - 781px); width: 1400px; height: 775px; background: url('https://xlaj.cn/assets/file/zp/20240428120212.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
        #mydiv::before, #mydiv::after { position: absolute; content: ''; transform-origin: 50% 50%; animation: swear .8s linear infinite alternate var(--state); }
        #mydiv::before { left: 65px; top: 50px; width: 180px; height: 90px; background: url('https://xlaj.cn/assets/file/zp/20240428120212.jpg') no-repeat -65px -50px; }
        #mydiv::after {left: 400px; top: 80px; width: 80px; height: 60px; background: url('https://xlaj.cn/assets/file/zp/20240428120212.jpg') no-repeat -320px -230px; }
        #player { position: absolute; top: 520px; width: 110px; filter: drop-shadow(0 0 6px #fff) opacity(.75); cursor: pointer; animation: rot 6s linear infinite var(--state); }
        .vid { position: absolute; object-fit: cover; mix-blend-mode: screen; }
        .vid:nth-of-type(1) { top:150px;left: 110px;width: 30%; height: 30%; }
        .vid:nth-of-type(2) { left: 36%; top: 28%;width: 8%; height: 10%; }
        #mydiv canvas { transform: skew(-15deg); }
        @keyframes rot { to { transform: rotate(360deg); } }
        @keyframes swear { to { transform: skew(15deg); } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/27/32/93/72f9840b455f57a46611a88a6e386810/audio.mp3" autoplay loop></audio>
        <video class="vid" src="https://zgsy-1254134120.cos.ap-guangzhou.myqcloud.com/nswx.mp4" muted autoplay loop></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/08/42/5d2228836b4e9.mp4" loop muted></video>
        <img id="player" src=" https://xlaj.cn/assets/file/zp/20240428120104.gif" alt="" />
</div>

<script>
        var sc = document.createElement('script');
        sc.charset = 'utf-8';
        sc.src = 'https://638183.freep.cn/638183/web/js/lzwz.js';
        document.body.appendChild(sc);
        var wz = {papa: '#mydiv', text: '倾听', left: '120px', top: '275px', color: 'OliveDrab'};
        var vids = document.querySelectorAll('.vid');
        var mState = () => vids.forEach(vid => aud.paused ?
                (vid.pause(), mydiv.style.setProperty('--state', 'paused')) :
                (vid.play(),mydiv.style.setProperty('--state', 'running')));
        aud.onplaying = aud.onpause = () => mState();
        player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

小辣椒 发表于 2024-4-28 13:23

同一首纯音完成

liumang 发表于 2024-4-28 21:02

小辣椒辛苦又一个音画作品{:5_150:}

liumang 发表于 2024-4-28 21:02

背景特效漂亮，音乐好听

小辣椒 发表于 2024-4-30 22:13

liumang 发表于 2024-4-28 21:02
背景特效漂亮，音乐好听

谢谢 liumang {:5_140:}
页: [1]
查看完整版本: 纯音欣赏--远风