小辣椒 发表于 2024-5-24 19:34

动感音乐欣赏


<style>
    .pa { margin: 120px 0 20px calc(50% - 721px); width: 1280px; height: 700px; box-shadow: 3px 3px 6px gray; border-radius: 6px; overflow: hidden; z-index: 1; position: relative; }
    #lzpa { position: absolute; left: calc(50% - 150px); top: 120px; width: 400px; height: 180px; cursor: pointer; }
    li-zi { position: absolute; width: 40px; height: 42px;background: url('https://wj.zp68.com/lxx/yunhua/2024/02/07/7.gif') no-repeat center/cover; opacity: .9;offset-path: path('M0 100 A200 100 0 1 1 400 100 A200 100 0 1 1 0 100'); animation: move 10s linear infinite var(--state), size 10s linear infinite var(--state); }
        #vid { position: absolute; left: calc(50% - 35px); top: calc(50% - 215px); width: 160px; height: 160px; border-radius: 50%; pointer-events: none; mix-blend-mode: color-dodge; object-fit: cover; }
        #vid1 { position: absolute; left: 0px; top: -140px;   width: 120%; height: 120%; object-fit: cover; }
    @keyframes move { to { offset-distance: 100%; } }
    @keyframes size { 0%, 50%, 100% { transform: scale(1) rotateY(20deg); } 25% { transform: scale(0.7)rotateY(10deg); } 75% { transform: scale(1.5)rotateY(0deg); } }
</style>

<div class="pa">
   <video id="vid1" src="https://lk999.oss-cn-guangzhou.aliyuncs.com/Perfect.mp4" autoplay loop muted></video>
   <video id="vid" src="https://zgsy-1254134120.cos.ap-guangzhou.myqcloud.com/nswx.mp4" autoplay loop muted></video>
   <div id="lzpa"></div>
    <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/df/19/63/c4da7c5a77c4f0127cc3d0483bae285d/audio.mp3" autoplay loop></audio>
</div>

<script>
    var total = 12;
    for(var i = 0; i < total; i ++) {
       var lz = document.createElement('li-zi');
      lz.style.cssText += `
            animation-delay: -${10 / total * i}s;
         
      `;
      lzpa.appendChild(lz);
    }

    var mState = () => {
      lzpa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.paused ? vid.pause() : vid.play();
      aud.paused ? vid1.pause() : vid1.play();
    };

    aud.onplaying = aud.onpause = () => mState();

    lzpa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

小辣椒 发表于 2024-5-24 19:35

二个视频效果，外面小鸟是粒子效果

小辣椒 发表于 2024-5-24 19:36

背景和风车是二个视频

liumang 发表于 2024-5-24 21:54

直接视频做背景了，漂亮{:5_150:}

liumang 发表于 2024-5-24 21:56

飞鸟做粒子效果好想法{:5_150:}

liumang 发表于 2024-5-24 21:56

感谢小辣椒分享

小辣椒 发表于 2024-5-25 14:27

liumang 发表于 2024-5-24 21:54
直接视频做背景了，漂亮

这个背景简单多了，不用做图了

小辣椒 发表于 2024-5-25 14:28

liumang 发表于 2024-5-24 21:56
飞鸟做粒子效果好想法

你看出来了啊{:5_156:}

小辣椒 发表于 2024-5-25 14:28

liumang 发表于 2024-5-24 21:56
感谢小辣椒分享

{:5_139:}{:5_154:}

liumang 发表于 2024-5-25 22:26

小辣椒 发表于 2024-5-25 14:28


{:5_139:}{:5_146:}
页: [1]
查看完整版本: 动感音乐欣赏