亚伦影音工作室 发表于 2025-7-14 21:40

老马二合一

本帖最后由 亚伦影音工作室 于 2025-7-17 09:34 编辑 <br /><br /><style>
#bj {
            position: relative;
            width: 1300px;
            height:700px;
            margin: 10px 0 20px calc(50% - 740px);
            overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
            background:#800 url(https://pic1.imgdb.cn/item/681f707d58cb8da5c8eb84b5.jpg) no-repeat center / cover;
      }

      /* 多个粒子绕圆圈演示 */
    #wrap {
      --size: 500px; /* 容器元素尺寸 */
      margin: 100px 40px;
      width: var(--size);
      height: var(--size);
      border: 4px dotted gray;
      border-radius: 50%;
      display: grid;
transform:scale(.6);
      place-items: center;
      position: relative;
    }
    #wrap::before {
      position: absolute;
      content: '';
      cursor: pointer;
    }
    li-zi {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(at 20% 30%, tan 1%, skyblue);
      box-shadow: 4px 4px 8px gray;
      transform: rotate(var(--deg)) translate(var(--r));
    }
    #but{margin: 0px 0px ;width: 220px; height: 220px;   position: absolute; cursor: pointer;background:url(https://pic1.imgdb.cn/item/6873547f58cb8da5c8a6e778.gif) no-repeat center/100%;border-radius: 50%; }
#cndpt{position: absolute; width: 220px; height: 220px; background:radial-gradient(at 20% 30%, tan 1%, skyblue); border-radius: 50%;
transform: rotate(-60deg);transform-origin: 50% 100%;transition: 0.5s;
clip-path: inset(0 50% 0 0);}
#enopg{ position: absolute;width: 220px; height: 220px; transform-origin: 50% 100%;background:radial-gradient(at 20% 30%, tan 1%, skyblue);border-radius: 50%;
transition: 0.5s;transform:rotate(60deg);
clip-path: inset(0 0 0 50%);}
</style>

<audio id="aud" src="https://s2.cldisk.com/sv-w8/audio/cc/ad/37/97cbbb925f6fd5c932cc6f9744774259/audio.mp3" autoplay loop></audio>
<div id="bj">
<section id="wrap"><div id="but" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</div></section>
</div>
<script>
      // 声明粒子数、粒子数组、粒子尺寸、请求关键帧id、粒子运行开关
      var total = 12, lzAr = [], lzSize = 60, rTime,isRun = true;

    // 创建粒子并初始化CSS数据
    Array.from({length: total}).forEach( (lz, idx) => {
            var angle = 360 / total * idx; // 角度
            var r = (wrap.clientWidth + lzSize) / 2 - lzSize / 2; // 绕圈半径
      lz = document.createElement('li-zi');
      lz.style.cssText += `
            width: ${lzSize}px;
            height: ${lzSize}px;
            --deg: ${angle}deg;
            --r: ${r}px;
      `;
      lzAr.push({ elm: lz, a: angle });
      wrap.appendChild(lz);
    });

    // 容器单击事件


    // 循环运行动画
    function animate() {      
                              cancelAnimationFrame(rTime)
      lzAr.forEach( (lz, idx) => {
            lz.elm.style.setProperty('--deg', lz.a + 'deg');
            lz.a = (lz.a + 0.5) % 360;
      });
rTime= requestAnimationFrame(animate);
    }

aud.onplaying = aud.onpause = () => aud.paused ? cancelAnimationFrame(rTime): animate();

   wrap.onclick = () => {aud.paused ? (aud.play(),enopg.style.transform= 'rotate(60deg)',cndpt.style.transform= 'rotate(-60deg)',wrap.style.transform= 'scale(.8)') : (aud.pause(),enopg.style.transform= 'rotate(0deg)',cndpt.style.transform = 'rotate(0deg)',wrap.style.transform= 'scale(0.5)');

aud.onplaying = aud.onpause = () => aud.paused ? cancelAnimationFrame(rTime): animate();
      };
   
</script>

红影 发表于 2025-7-14 22:05

这个打开来只是放出点雁子么，放点别的出来不是更好玩么{:4_173:}

红影 发表于 2025-7-14 22:05

欣赏亚伦老师好帖{:4_187:}

杨帆 发表于 2025-7-14 23:22

漂亮！谢谢亚伦老师精彩分享{:4_190:}
页: [1]
查看完整版本: 老马二合一