论坛 › 祝福礼堂 › 祝队长生日快乐！

小辣椒 发表于 2023-4-21 01:22

祝队长生日快乐！

<style>
#mydiv {
margin: 120px 0 0 calc(50% - 680px);
width: 1200px;
height: 680px;
background: #000 url('https://pic.imgdb.cn/item/6441738c0d2dde577741db3c.jpg') no-repeat center/cover;
box-shadow: 0 0 8px gray;
position: relative;
}
</style>
<div id="mydiv">
<css-doodle id="mplayer">
    :doodle {
      @grid: 8 / 550px;
      background: url('https://pic.imgdb.cn/item/644173b50d2dde5777420338.png') no-repeat 0px 50px / 265px 371px;
      cursor: pointer;
      position: absolute;
      left: 700px;
      top: 50px;
      --state: running;
    }
    :doodle(:hover) { transform: skew(2deg); }
    position: absolute;
    @place-cell: 250px 35%;
    :after {
      content: @p(♫,♪,♩,♬);
      color: @p(red,pink,orange,green,blue,white);
    }
    animation: fly 1s @r(-2,2)s infinite var(--state);
    @keyframes fly {
      from { transform: rotate(0deg) translate(0px); }
      to { transform: rotate(@r(-60,60)deg) translate(110px); }
    }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1927824816" autoplay="autoplay" loop="loop"></audio>
</div>

<script>
(function() {
let scriptEle = document.createElement('script');
scriptEle.setAttribute('type','text/javascript');
scriptEle.setAttribute('src','https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js');
document.head.appendChild(scriptEle);

let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<br><br><br>

小辣椒 发表于 2023-4-21 01:26

队长好好养身体，不用急着上论坛，把最真挚的祝福送给你，队长永远健健康康！快快乐乐！幸福永远！{:4_179:}

小辣椒 发表于 2023-4-21 01:26

@马黑黑 小喇叭用上了{:4_173:}

樵歌 发表于 2023-4-21 06:33

为祝福‘队长生日快乐，小辣椒也是拼了{:4_187:}把从黑师那学来的招数都癸祭出来@ {:4_173:}

醉美水芙蓉 发表于 2023-4-21 06:36

梦油 发表于 2023-4-21 09:17

借小辣椒的精美贺帖祝福队长生日快乐身、体健康！

梦缘 发表于 2023-4-21 11:14

祝队长快乐幸福到永远！{:4_204:}

辫子哥哥 发表于 2023-4-21 11:56

队长生日快乐{:4_187:}

马黑黑 发表于 2023-4-21 12:07

小辣椒 发表于 2023-4-21 01:26
@马黑黑 小喇叭用上了

这个挺有意思。位置调整做的不错。

小辣椒 发表于 2023-4-21 12:30

马黑黑 发表于 2023-4-21 12:07
这个挺有意思。位置调整做的不错。

黑黑我手机看不见效果，昨天电脑可以看见的

马黑黑 发表于 2023-4-21 12:53

小辣椒 发表于 2023-4-21 12:30
黑黑我手机看不见效果，昨天电脑可以看见的

我用手机看到的效果非常完美。我说过浏览器很重要，Chromium类的最好，升级到新版本。

红影 发表于 2023-4-21 14:41

哇，这小喇叭这么快就用上了，而且跟这个祝贺的帖子特别贴合。亲爱的太棒了{:4_199:}

红影 发表于 2023-4-21 14:42

那个小人还跟鼠标有关呢，这个帖子又喜庆又热闹。队长收礼开心，生日快乐{:4_187:}

绿叶清舟 发表于 2023-4-21 20:31

小喇叭开始广播啦{:4_189:}，队长生日快乐{:4_191:}

加林森 发表于 2023-4-22 20:54

小辣椒 发表于 2023-4-21 01:26
队长好好养身体，不用急着上论坛，把最真挚的祝福送给你，队长永远健健康康！快快乐乐！幸福永远！{:4_179: ...

谢谢小辣椒。我会养身体的，等完全好了我再来学习制作。

加林森 发表于 2023-4-22 20:55

醉美水芙蓉 发表于 2023-4-21 06:36
借小辣椒美帖祝队长生日快乐！

谢谢芙蓉！{:4_204:}

加林森 发表于 2023-4-22 20:56

梦油 发表于 2023-4-21 09:17
借小辣椒的精美贺帖祝福队长生日快乐身、体健康！

{:4_180:}

加林森 发表于 2023-4-22 20:57

梦缘 发表于 2023-4-21 11:14
祝队长快乐幸福到永远！

谢谢！{:4_204:}

加林森 发表于 2023-4-22 20:58

辫子哥哥 发表于 2023-4-21 11:56
队长生日快乐

{:4_191:}{:4_191:}

加林森 发表于 2023-4-22 20:58

红影 发表于 2023-4-21 14:42
那个小人还跟鼠标有关呢，这个帖子又喜庆又热闹。队长收礼开心，生日快乐

谢谢！{:4_204:}

查看完整版本: 祝队长生日快乐！