论坛 › 祝福礼堂 › 小九生日快乐

雨中悄然 发表于 2023-3-31 22:53

小九生日快乐

本帖最后由 雨中悄然 于 2023-3-31 22:54 编辑 <br /><br /><style>
#papa {
      margin: 0 0 0 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      background: lightblue url('https://pic.imgdb.cn/item/6426f32fa682492fcc547181.gif') center/cover no-repeat;
      box-shadow: 3px 3px 20px #000;
      position: relative;
      z-index: 1;
}
.donut {
      --delay: 0s; --tt: 8s;
      position: absolute;
      width: 30px;
      height: 40px;
      border-radius: 50%;
      border: 40px solid tan;
      border-width: 20px 30px 30px 20px;
      box-shadow: 0 0 12px #000 inset;
      opacity: .72;
      cursor: pointer;
      animation: rot var(--tt) var(--delay) infinite alternate linear var(--state);
}
@keyframes rot { to { transform:scale(1.5) rotate(2turn); } }
</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1433496995" autoplay loop></audio>

<script>
let spans = [];
(function() {
      Array.from({length: 6}).forEach((item,key) => {
                let sp = document.createElement('span'), xx = Math.random()*30 + 30;
                sp.className = 'donut';
                sp.style.cssText += `
                        left: ${Math.random()*(papa.offsetWidth-180) + 30}px;
                        top: ${Math.random()*(papa.offsetHeight-180) + 30}px;
                        border-color: #${Math.random().toString(16).substr(-6)} #${Math.random().toString(16).substr(-6)} #${Math.random().toString(16).substr(-6)} #${Math.random().toString(16).substr(-6)};
                        width: ${xx}px;
                        height: ${xx}px;
                        --delay: ${Math.random()*key*.2}s;
                        --tt: ${Math.random()*key +6}s;
                `;
                papa.appendChild(sp);
                spans.push(sp);
      });
})();

let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');

spans.forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());

aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);

</script>

雨中悄然 发表于 2023-3-31 22:54

@小九 生日快乐

雨中悄然 发表于 2023-3-31 22:57

发错地儿了，呼叫版版移到时光如水版{:4_187:}@管理们

雨中悄然 发表于 2023-3-31 23:06

谢谢黑黑的甜甜圈小播@马黑黑

马黑黑 发表于 2023-3-31 23:11

雨中悄然 发表于 2023-3-31 23:06
谢谢黑黑的甜甜圈小播@马黑黑

{:4_199:}

雨中悄然 发表于 2023-3-31 23:21

马黑黑 发表于 2023-3-31 23:11


{:5_117:}谢鼓

马黑黑 发表于 2023-3-31 23:27

雨中悄然 发表于 2023-3-31 23:21
谢鼓

不客气

樵歌 发表于 2023-4-1 09:52

哇塞，把九儿漂亮的头像放屏上，像个大明星哈。

小九 发表于 2023-4-1 09:55

谢谢悄然{:4_183:}

小九 发表于 2023-4-1 09:55

樵歌 发表于 2023-4-1 09:52
哇塞，把九儿漂亮的头像放屏上，像个大明星哈。

全是大手笔{:4_189:}

樵歌 发表于 2023-4-1 13:46

小九 发表于 2023-4-1 09:55
全是大手笔

个个都 厉害得很哦{:4_189:}

大猫咪 发表于 2023-4-1 15:23

好制作，真棒！同祝小九生日快乐！

{:4_187:}{:5_166:}{:4_191:}{:4_204:}{:4_177:}{:4_199:}

雨中悄然 发表于 2023-4-1 17:26

大猫咪 发表于 2023-4-1 15:23
好制作，真棒！同祝小九生日快乐！

{:5_166:}同祝，小九生日快乐

雨中悄然 发表于 2023-4-1 17:26

小九 发表于 2023-4-1 09:55
谢谢悄然

{:4_183:}开心哦

雨中悄然 发表于 2023-4-1 17:27

樵歌 发表于 2023-4-1 09:52
哇塞，把九儿漂亮的头像放屏上，像个大明星哈。

漂亮的明星小九生日快乐{:4_187:}

雨中悄然 发表于 2023-4-1 17:27

马黑黑 发表于 2023-3-31 23:27
不客气

不客气一下应该的。同祝小九生日快乐{:4_173:}

马黑黑 发表于 2023-4-1 17:46

雨中悄然 发表于 2023-4-1 17:27
不客气一下应该的。同祝小九生日快乐

俺竟然无言以对{:5_106:}

雨中悄然 发表于 2023-4-1 17:51

马黑黑 发表于 2023-4-1 17:46
俺竟然无言以对

{:4_170:}因为你说对了

马黑黑 发表于 2023-4-1 17:53

雨中悄然 发表于 2023-4-1 17:51
因为你说对了

好吧，就酱

雨中悄然 发表于 2023-4-1 20:48

马黑黑 发表于 2023-4-1 17:53
好吧，就酱

小九说好

查看完整版本: 小九生日快乐