论坛首页 › 单图音画 › 我独饮晚风作酒

醉美水芙蓉 发表于 2024-6-9 19:35:53

我独饮晚风作酒

本帖最后由 醉美水芙蓉 于 2024-6-9 19:40 编辑 <br /><br /><style>
        #mydiv { margin: 130px 0 30px calc(50% - 931px); width: 1700px; height:900px; background: url('https://pic.imgdb.cn/item/666317275e6d1bfa056511bd.jpg') no-repeat 0/cover; border: thick groove Tan; overflow: hidden; transition: 1s; z-index: 1; user-select: none; position: relative; }
        .txtbox { position: absolute; display: grid; place-items: center; left: var(--x1); top: 100px; width: 60px; height: 60px; font: normal 30px sans-serif; text-align: center; color: white; box-sizing: border-box; cursor: pointer;opacity : .7; }
        .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 Teal; transition: 1s; animation: rot 8s linear var(--delay) infinite var(--state); }
        .txtbox:hover::after { box-shadow: inset 0 0 30px         Wheat, 0 0 60px white; }
        #vid { position: absolute; bottom: 0; width: 80%; height: 80%; right:-320px;object-fit: cover; mix-blend-mode: screen; pointer-events: none;opacity : .5;}
        @keyframes move1 { to { left: var(--x2); } }
        @keyframes move2 { to { left: var(--x1); } }
        @keyframes rot { to { transform: rotate(var(--deg)); } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/0d00-audiofreehighqps/5F/08/GMCoOScJ0iZaACAAAAK7KWQI.m4a" autoplay></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/12/35/6193b48b9471d.mp4" loop muted></video>
</div>

<script>
(function() {
        const ar = '我独饮晚风作酒'.split('');
        const ww = 1600, 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 - 720}px;
                        --x2: ${k * 60 +620}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>

夏艳妍 发表于 2024-6-16 06:25:14

这个作品漂亮！！！！

顶不顶个球 发表于 2024-6-24 08:11:31

这个作品漂亮！！！！

确认过眼神 发表于 2024-7-20 10:00:59

这个作品漂亮！！！！

1643091610 发表于 2024-7-31 20:56:12

这个作品漂亮！！！！

翁奕童苑 发表于 2024-8-8 03:39:21

这个作品漂亮！！！！

快播 发表于 2024-8-13 23:49:43

这个作品漂亮！！！！

红尘过客 发表于 2024-8-19 12:24:48

这个作品漂亮！！！！

确认过眼神 发表于 2024-8-25 08:47:13

这个作品漂亮！！！！

顶不顶个球 发表于 2024-8-26 20:01:35

这个作品漂亮！！！！

查看完整版本: 我独饮晚风作酒