论坛 › 欢乐水吧 › 电子琴演奏 一曲红尘 （学习套用黑黑知音效果）

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

电子琴演奏 一曲红尘 （学习套用黑黑知音效果）

<style>
        #mydiv { margin: 150px 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>

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

@马黑黑

黑黑继续套用一个，这个文字颜色感觉和我图图相配太美了，自己换的颜色不漂亮，还是原来的效果好

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

感谢黑黑源码分享{:4_187:}

马黑黑 发表于 2024-6-9 20:44

小辣椒 发表于 2024-6-9 20:21
@马黑黑

黑黑继续套用一个，这个文字颜色感觉和我图图相配太美了，自己换的颜色不漂亮，还是原来的效果 ...

好棒

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

马黑黑 发表于 2024-6-9 20:44
好棒

套用代码，省力的{:4_205:}

马黑黑 发表于 2024-6-9 20:54

小辣椒 发表于 2024-6-9 20:53
套用代码，省力的

{:4_199:}

起个网名好难 发表于 2024-6-9 21:18

https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif

东篱闲人 发表于 2024-6-9 21:19

精致漂亮！{:5_116:}

樵歌 发表于 2024-6-9 21:26

代码好，动图好，歌曲 好，美人好。{:4_178:}

樵歌 发表于 2024-6-9 21:29

我也去张美人图图换上行不？
把音乐地址换成网易云的行么？

红影 发表于 2024-6-9 21:44

这效果好美啊，文字效果和背景浑然天成。欣赏亲爱的好帖{:4_199:}

小辣椒 发表于 2024-6-9 22:19

马黑黑 发表于 2024-6-9 20:54


{:4_190:}{:4_180:}

小辣椒 发表于 2024-6-9 22:19

起个网名好难 发表于 2024-6-9 21:18

问好难难，谢谢欣赏{:4_187:}

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

东篱闲人 发表于 2024-6-9 21:19
精致漂亮！

老头晚上好，谢谢欣赏{:4_187:}

小辣椒 发表于 2024-6-9 22:21

樵歌 发表于 2024-6-9 21:26
代码好，动图好，歌曲 好，美人好。

谢谢樵哥哥的鼓励{:4_187:}

小辣椒 发表于 2024-6-9 22:21

樵歌 发表于 2024-6-9 21:29
我也去张美人图图换上行不？
把音乐地址换成网易云的行么？

可以啊，直接用我的音乐更加方便

小辣椒 发表于 2024-6-9 22:22

红影 发表于 2024-6-9 21:44
这效果好美啊，文字效果和背景浑然天成。欣赏亲爱的好帖

亲爱的，我感觉这个字体颜色和我的背景图很相配，自己换的颜色不漂亮，最后还是用黑黑的

红影 发表于 2024-6-9 22:37

小辣椒 发表于 2024-6-9 22:22
亲爱的，我感觉这个字体颜色和我的背景图很相配，自己换的颜色不漂亮，最后还是用黑黑的

只要合适就是好呢{:4_187:}

马黑黑 发表于 2024-6-9 23:15

小辣椒 发表于 2024-6-9 22:19


谢茶

起个网名好难 发表于 2024-6-10 07:19

小辣椒 发表于 2024-6-9 22:19
问好难难，谢谢欣赏

https://p8.itc.cn/q_70/images03/20220603/e4d0cc8c42ce4659aa3f59991a04dc61.gif

查看完整版本: 电子琴演奏 一曲红尘 （学习套用黑黑知音效果）