论坛 › 『唯美音画』 › 无情的离开--探戈

宁静 发表于 2023-6-24 17:15

无情的离开--探戈

<style>
#mydiv {
      left: -214px;
      width: 1284px;
      height: 740px;
      background: #ccc url('https://xlaj.cn/assets/file/zp/20230621220506.gif ') no-repeat center / cover;
      box-shadow: 0 0 6px #000;
      pointer-events: none;
      z-index: 1;
      position: relative;
       margin: 150px auto;
      --clip: ''; --state: paused;
}
#mydiv::before, #mydiv::after {
      position: absolute;
      content: '';
      width: 200px;
      height: 200px;
      left: 980px;
      bottom: 50px;
      border-radius: 50%;
      pointer-events: auto;
      cursor: pointer;
      opacity: .95;
}
#mydiv::after {
      background: #666666;
      clip-path: var(--clip);
      animation: scale 6s infinite alternate linear var(--state);
}
#mydiv::before {
      background: url('https://xlaj.cn/assets/file/zp/20230621220534.gif') no-repeat center /cover;
      filter: hue-rotate(145deg);
}
@keyframes scale {
      0% { transform: rotate(0deg) scale(1); }
      50% { transform: rotate(360deg) scale(.8); }
      100% { transform: rotate(-360deg) scale(1); }
}

</style>

<div id="mydiv"></div>
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20230621220602.mp3" autoplay="autoplay" loop="loop"></audio>




<script>
(function() {
      let clipBox = (xx,points,thick) => {
                let a = xx / 2, pointsAr = [`${xx}px 0, 0 0, 0 ${xx}px, ${xx}px ${xx}px, ${xx}px ${xx/2}px`];
                for(let i = 0; i <= points; i ++) {
                        let hudu = Math.PI / 180 * 360 / points * i;
                        let x1 = a + Math.cos(hudu) * (a - thick), y1 = a + Math.sin(hudu) * (a - thick);
                        pointsAr.push(x1 + 'px ' + y1 + 'px');
                }
                pointsAr.push(`${xx}px ${xx/2}px`, `${xx}px 0px`);
                return `polygon(${pointsAr.join(',')})`;
      };

      mydiv.style.setProperty('--clip',clipBox(200,6,2));

      let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);

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

宁静 发表于 2023-6-24 17:16

@夏如夕

夕夕，端午节吃粽子没有

宁静 发表于 2023-6-24 17:17

小长假没有结束的，祝福朋友们端午节安康！{:10_403:}

夏如夕 发表于 2023-6-24 17:18

宁静 发表于 2023-6-24 17:16
@夏如夕

夕夕，端午节吃粽子没有

嘿，吃了吃了。。。{:10_403:}

沉默 发表于 2023-6-24 17:19

第一个冲进来{:9001:}

沉默 发表于 2023-6-24 17:19

这个美女太胖

沉默 发表于 2023-6-24 17:20

还是男的帅

沉默 发表于 2023-6-24 17:20

端午节快乐

宁静 发表于 2023-6-24 17:22

沉默 发表于 2023-6-24 17:20
端午节快乐

谢谢~~同样的祝福送给你

宁静 发表于 2023-6-24 17:22

夏如夕 发表于 2023-6-24 17:18
嘿，吃了吃了。。。

夕夕要到晚上。来得及的

查看完整版本: 无情的离开--探戈