小辣椒 发表于 2024-6-9 20:59

电子琴演奏 一曲红尘

<style>
        #mydiv { margin: 130px 0 30px calc(50% - 801px); width: 1440px; height:807px; background: url(' https://xlaj.cn/assets/file/zp/20240609145726.jpg ') no-repeat 0/cover; border: thick groove LightSteelBlue; overflow: hidden; transition: 1s; z-index: 1; user-select: none; position: relative; }
        #mydiv:hover { background-size: 100%; background-position: center; }
        .txtbox { position: absolute; display: grid; place-items: center; left: var(--x1); top: 700px; width: 50px; height: 50px; font: normal 30px sans-serif; text-align: center; color: white; box-sizing: border-box; cursor: pointer; opacity : .9; }
        .txtbox::after { position: absolute; content: ''; inset: -2px; border: 2px dashed gray; border-color: green lightgreen yellow orange; border-radius: 50%; box-shadow: inset 0 0 20px plum; transition: 1s; animation: rot 8s linear var(--delay) infinite var(--state); }
        .txtbox:hover::after { box-shadow: inset 0 0 30px green, 0 0 60px white; }
        #vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; pointer-events: none;opacity : .45; }
        @keyframes move1 { to { left: var(--x2); } }
        @keyframes move2 { to { left: var(--x1); } }
        @keyframes rot { to { transform: rotate(var(--deg)); } }

#dt2{ position: absolute; width:296px; height: 428px; top: 280px; left: 1150px; }
#dt3{ position: absolute; width: 294px; height: 433px; top: 375px; left: 820px; }
</style>

<div id="mydiv">
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20240609145909.gif"alt=""style="position: absolute; mix-blend-mode: multiply;rotate(360deg); " />
<img id="dt3" src=" https://xlaj.cn/assets/file/zp/20240609145833.gif " alt=""style="position: absolute; mix-blend-mode: multiply;rotate(360deg); " />

        <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/81/4c/4b/9a473ff36f09a811d568efb6a6280e06/audio.mp3" autoplay></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/05/5b4ffd401d669.mp4" loop muted></video>
</div>
<script>
(function() {
        const ar = '电子琴演奏一曲红尘'.split('');
        const ww = 1440, duTime = 16, deTime = 0.5;
        const total = duTime + ar.length * deTime + deTime;
        let sAr = [], step = 0;//, aniName = 'move1';

        ar.forEach((t,k) => {
                let span = document.createElement('span');
                span.className = 'txtbox';
                span.textContent = t;
                span.style.cssText += `
                        --x1: ${ww + k * 60 - ar.length * 60 - 200}px;
                        --x2: ${k * 60 + 300}px;
                        --deg: -1turn;
                        --delay: -${Math.random() * k}s;
                `;
                sAr.push(span);
                mydiv.appendChild(span);
        });

        let playAni = () => {
                let aniName = ['move1','move2'];
                let deg = ['-1turn','1turn'];
                sAr.forEach((item,key) => {
                        item.style.left = ['var(--x1)','var(--x2)'];
                        item.style.setProperty('--deg', deg);
                        let delay = step % 2 > 0 ? deTime * (sAr.length - key - 1) : deTime * key;
                        item.style.animation = `${aniName} ${duTime}s ${delay}s linear forwards var(--state)`;
                });
                step ++;
        };

        let mState = () => {
                mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
                sAr.forEach(item => item.title = ['暂停','播放'][+aud.paused]);
                aud.paused ? vid.pause() : vid.play();
        };

        aud.loop = false;
        aud.onplaying = aud.onpause = () => mState();
        aud.onended = () => { step = 0; aud.play(); }
        aud.ontimeupdate = () => { if(aud.currentTime >= total * step) playAni(); };

        sAr.forEach(item => item.onclick = () =>aud.paused ? aud.play(): aud.pause());
})();
</script>
<br><br><br><br><br>

liumang 发表于 2024-6-9 23:43

{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2024-6-9 23:43

电子琴好听{:5_149:}

liumang 发表于 2024-6-9 23:43

感谢分享{:5_124:}
页: [1]
查看完整版本: 电子琴演奏 一曲红尘