岩新新 发表于 2023-6-26 17:35

群星 - 你是我的心,你是我灵魂

本帖最后由 岩新新 于 2023-6-28 10:13 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1914753">
<style>
#mydiv {
      left: -360px;
      width: 1284px;
      height: 740px;
      background: #ccc url('http://webftp.bbs.hnol.net/yx2021/pj67/dbd9c853d14db490cbf4a53256d91947.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('http://webftp.bbs.hnol.net/yx2021/pj67/d5de7bb6b4c40a35c587aca49ffc97b0.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://www.joy127.com/url/105638.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></td></tr></table>

焱鑫磊 发表于 2023-6-26 18:22

欣赏佳作！{:4_187:}

岩新新 发表于 2023-6-26 18:44

焱鑫磊 发表于 2023-6-26 18:22
欣赏佳作！

谢谢欣赏支持！

红影 发表于 2023-6-26 20:51

漂亮的制作。这个镂空里藏了一只可爱的小松鼠呢。欣赏新新好帖{:4_187:}

梦缘 发表于 2023-6-26 20:58

问好老师，欣赏精彩分享，点赞！{:4_178:}
页: [1]
查看完整版本: 群星 - 你是我的心,你是我灵魂