朵拉 发表于 2024-6-4 20:55

舍 得（马黑黑原创）

本帖最后由 朵拉 于 2024-6-4 21:34 编辑 <br /><br /><style>
    #mydiv { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height:720px; background: url('https://pic.imgdb.cn/item/665f11925e6d1bfa058203dd.jpg') no-repeat 0/cover; border: thick groove lightpink; overflow: hidden; transition: 1s; z-index: 1; user-select: none; position: relative; }
    #mydiv:hover { background-size: 120%; background-position: center; }
    .txtbox { position: absolute; display: grid; place-items: center; left: var(--x1); top: 20px; width: 50px; height: 50px; font: normal 30px sans-serif; text-align: center; color: white; box-sizing: border-box; cursor: pointer; }
    .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; }
    @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://music.163.com/song/media/outer/url?id=453268268" autoplay></audio>
    <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2c53955d7.mp4" loop muted></video>
</div>

<script>
(function() {
    const ar = '谁又真的在乎呢'.split('');
    const ww = 1280, 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 - 20}px;
            --x2: ${k * 60 + 10}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-4 21:34

本帖最后由 朵拉 于 2024-6-4 21:40 编辑

@马黑黑
老师好，学生交作业，请指正哈{:4_190:}请教：歌词怎样添加上去？

马黑黑 发表于 2024-6-4 22:05

{:4_199:}

红影 发表于 2024-6-4 22:05

好看。欣赏朵宝好帖{:4_204:}

梦油 发表于 2024-6-5 09:07

欣赏佳作，问候朵拉。

樵歌 发表于 2024-6-5 11:32

欣赏朵拉作业。

梦江南 发表于 2024-6-5 17:18

欣赏老师漂亮的音画。
页: [1]
查看完整版本: 舍 得（马黑黑原创）