论坛 › 祝福礼堂 › 答谢蛋糕来啦

绿叶清舟 发表于 2024-2-29 12:11

答谢蛋糕来啦

<style>
#papa {
      margin: 10px 0 10px calc(50% - 633px);
      width: 1100px;
      height: 700px;
      background: url('https://pic.imgdb.cn/item/65db38ec9f345e8d0307e3b6.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      overflow: hidden;
      display: grid;
      place-items: center;
      position: relative;
      z-index: 1;
}
#mypic {
      position: absolute;
      width: 80px;
      height: 80px;
      mix-blend-mode: screen;
      cursor: pointer;
      transition: filter 1s;
      animation: rot 6s infinite linear var(--state);
}
#mypic:hover {
      filter: invert(100%) drop-shadow(4px 4px 20px snow);
}
li-zi {
      position: absolute;
      width: 50px;
      height: 1px;
      background: linear-gradient(to right,snow,yellow);
      animation: moving var(--du) var(--de) infinite linear var(--state);
}
@keyframes moving {
      from { transform: translate(0,0) rotate(var(--deg)); opacity: 1; }
      to { transform: translate(var(--xx),var(--yy)) rotate(var(--deg)); opacity: 0; }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <img id="mypic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" title="暂停/播放" />
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2045886538" autoplay loop></audio>
</div>

<script>
let total = 160;
Array.from({length: total}).forEach((lz,key) => {
      lz = document.createElement('li-zi');
      let hudu = Math.PI / 18 * 36 / total * key;
      let xx = 800 * Math.cos(hudu), yy = 800 * Math.sin(hudu);
      lz.style.cssText += `
                --xx: ${xx}px;
                --yy: ${yy}px;
                --deg: ${360 / total * key}deg;
                --du: ${2 + Math.random() * 2}s;
                --de: -${Math.random() * 3}s;
      `;
      papa.prepend(lz);
});
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

绿叶清舟 发表于 2024-2-29 12:11

她来了，她来了，老妖婆骑着她的神舟给大家送蛋糕来了，不能再来头象了这次就出手，哪个手是谁的自己认领了哈
谢谢影，坛里的每个人都记得这份情永远在心。
谢谢樵歌，这么精美的礼物，把俺个粗人夸得差点从窗户飘出去了
谢谢辣椒和冬雨，你们这么忙还来送礼，好感动
谢谢岁月，这份大礼俺得好好珍藏了，谢谢你的惦念，每个祝福那么温馨
谢谢猫，原来你在暗地里发功啊，贴子一个比一个惊艳了
谢谢梦油，第一次看到你整这么精美的贴，可惜俺太粗油不会玩了
谢谢泡泡，二十年了不离不弃，那份情谊无以言表
还有坛里的各位一并谢过了，真羡慕你们一个个都这么会写，老妖婆就码这几个字已经出了好几身的汗，就这点水平了，不到之处蛋糕补上吧{:4_189:}

梦油 发表于 2024-2-29 12:15

绿叶清舟 发表于 2024-2-29 12:11
她来了，她来了，老妖婆骑着她的神舟给大家送蛋糕来了，不能再来头象了这次就出手，哪个手是谁的自己认领了 ...

愿你开心快乐每一天！

马黑黑 发表于 2024-2-29 12:48

查了一下交通管制，目前对扫帚木有任何规定，只要不飞入航空管制区，可以随意飞行，但请注意陆地上的红绿灯。

岁月·如歌 发表于 2024-2-29 12:50

鲜艳的红酒满满的爱，拿块蛋糕吃起来{:4_204:}{:4_199:}

小辣椒 发表于 2024-2-29 12:51

欣赏清舟精美的生日答谢帖，好美哦{:4_177:}

小辣椒 发表于 2024-2-29 12:52

哪里老妖婆啊，明明是个青春美少女{:4_170:}

小辣椒 发表于 2024-2-29 12:53

今天清舟正日子，难得的2月29号，四年一次的生日，清舟今天必须开心快乐哦！{:4_177:}{:4_177:}{:4_177:}

小辣椒 发表于 2024-2-29 12:54

一起吃蛋糕了。赶快呼一下冬雨@冬天的雨

鱼儿 发表于 2024-2-29 14:05

我能赶上吃蛋糕就行{:7_320:}

庶民 发表于 2024-2-29 17:18

一片心意。

南无月 发表于 2024-2-29 17:19

从小花发出四射光芒，这个贴子太漂亮啦。
清舟生日快乐哈~~{:4_187:}

红影 发表于 2024-2-29 20:35

哈哈，从人物和蛋糕的比例来看，这蛋糕可真大啊，足够大家分了{:4_173:}

红影 发表于 2024-2-29 20:36

这个帖子很欢乐，敬酒的那些手肯定也有影子的，敬上美酒，和清舟一起庆贺美丽的生日{:4_176:}{:4_177:}

红影 发表于 2024-2-29 20:38

这线条的心形很巧妙。还有四射的光芒也很赞，把蛋糕和美酒的香气送往了四面八方呢{:4_199:}

冬天的雨 发表于 2024-2-29 20:40

吃蛋糕了，冬雨要最大的一块{:4_170:}

冬天的雨 发表于 2024-2-29 20:41

冬雨想找自己的那只拿酒杯的手。。。{:4_189:}

冬天的雨 发表于 2024-2-29 20:44

冬雨的手清舟应该很熟悉的，都亮相2次了{:4_170:}

樵歌 发表于 2024-2-29 21:24

有个左擗子，快来坦白，是谁{:4_170:}

小文 发表于 2024-3-1 08:41

我来凑个热闹！{:4_180:}

查看完整版本: 答谢蛋糕来啦