论坛 › 祝福礼堂 › 向云端 TO:大猫咪生日快乐！

朵拉 发表于 2023-7-11 19:47

向云端 TO:大猫咪生日快乐！

本帖最后由 朵拉 于 2023-7-11 23:47 编辑 <br /><br /><style>
#mydiv {
      margin: 0 0 0 calc(50% - 700px);
      width: 1264px;
      height: 690px;
      z-index: 1;
      background: url('https://pic.imgdb.cn/item/64ad3fe31ddac507cc69e97f.jpg');
      box-shadow: 0 0 8px 0 #000;
      overflow: hidden;
      position: relative;
}
li-zi {
      position: absolute;
      border-radius: 100% 100% 100% 0;
      background: lightblue;
      box-shadow: inset -2px -2px 10px 0 antiquewhite;
      opacity: .9;
      cursor: pointer;
      transform: rotate(-45deg);
}
</style>

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

<script>

//粒子运动开关
let canMove = true;

//创建 Lizi 类
class Lizi {
      //构造函数 : 属性设计/设置 pa - 粒子宿主元素，size - 粒子大小
      constructor(pa,size = 20) {
                this.pa = pa;
                this.size = size;
                this.bg = 'purple';
                this.left = 10;
                this.top = 10;
                this.ystep = 1; //垂直移动步幅
                this.ele = document.createElement('li-zi'); //粒子标签
      }
      //创建粒子
      creating() {
                this.ele.style.cssText = `
                        width: ${this.size}px;
                        height: ${this.size}px;
                        left: ${this.left}px;
                        top: ${this.top}px;
                        background: ${this.bg};
                `;
                this.pa.appendChild(this.ele);
                this.moving();
      }
      //移动粒子
      moving() {
                if(canMove) {
                        this.left += this.xstep;
                        this.top += this.ystep;
                        if(this.top <= -this.size) this.top = this.pa.offsetHeight;
                        this.ele.style.left = this.left + 'px';
                        this.ele.style.top = this.top + 'px';
                }
                requestAnimationFrame(this.moving.bind(this));
      }
}

//实例化Lizi
Array.from({length: 40}).forEach((element) => {
      element = new Lizi(mydiv);
      element.size = 20 + Math.ceil(Math.random() * 20);
      element.left = Math.floor(Math.random() * (mydiv.offsetWidth - element.size));
      element.top = Math.floor(Math.random() * (mydiv.offsetHeight - element.size));
      element.xstep = 0;
      element.ystep = -0.5 - Math.random();
      element.bg = '#' + Math.random().toString(16).substr(-6);
      element.creating();
});

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

</script>

朵拉 发表于 2023-7-11 20:01

@大猫咪
祝大猫猫 生日快乐，幸福每天{:4_204:}{:4_204:}

朵拉 发表于 2023-7-11 20:02

本帖最后由 朵拉 于 2023-7-11 20:06 编辑

Happy birthday to you
每一岁都珍贵{:4_185:}

朵拉 发表于 2023-7-11 20:20

@马黑黑
马师 晚上好，学生手机编辑帖子，
您看下是否左右对齐{:4_190:}

红影 发表于 2023-7-11 20:29

这个气球效果用在这个帖子里真美，欣赏朵宝好帖，同祝猫猫生日快乐{:4_187:}

梦油 发表于 2023-7-11 20:52

一句问候，一声祝福，一切如愿，一生幸福，一世平安。
借朵拉朋友美帖祝福大猫咪朋友生日快乐！

大猫咪 发表于 2023-7-11 20:55

制作真棒！歌美图靓！谢谢朵拉美帖！真开心！
画面一样的歌词，相得益彰，耳朵里听着，脑子里联想着，很享受！

{:4_204:}{:4_191:}{:4_199:}{:5_150:}

大猫咪 发表于 2023-7-11 20:58

朵拉 发表于 2023-7-11 20:01
@大猫咪
祝大猫猫 生日快乐，幸福每天

谢谢朵拉祝福！开心{:4_187:}{:4_191:}也祝朵拉吉祥如意！幸福安康！开心每一天！

{:4_204:}

大猫咪 发表于 2023-7-11 20:59

红影 发表于 2023-7-11 20:29
这个气球效果用在这个帖子里真美，欣赏朵宝好帖，同祝猫猫生日快乐

{:4_179:}{:4_191:}{:4_176:}

千帆过尽 发表于 2023-7-11 21:03

猫咪生日快乐，做等蛋糕{:4_204:}

樵歌 发表于 2023-7-11 21:21

哇，五彩缤纷，好美啊！

马黑黑 发表于 2023-7-11 21:23

朵拉 发表于 2023-7-11 20:20
@马黑黑
马师 晚上好，学生手机编辑帖子，
您看下是否左右对齐

帖子漂亮，但在大荧屏下没有居中。居中语句：

margin: 0 0 0 calc(50% - xxpx);

xx = 帖子宽度 ÷ 2 + 81

大猫咪 发表于 2023-7-11 21:24

千帆过尽 发表于 2023-7-11 21:03
猫咪生日快乐，做等蛋糕

谢谢千帆祝福{:4_187:}真开心 {:5_106:} 祝千帆一切安好！开心每一天！

蛋糕来了{:5_106:}{:4_204:}

https://ts1.cn.mm.bing.net/th/id/R-C.948ddc508571e23bd3e29531fbf36d3d?rik=NC8IcrHLF%2bm1HQ&riu=http%3a%2f%2fimg.redocn.com%2fsheying%2f20141015%2ftianranruzhinaiyoucaoshuiguoshengridangao_3237705.jpg&ehk=6093KRXw8%2fABMWXWxzTK%2fbXF59gkAYYxupc%2beczK6ec%3d&risl=&pid=ImgRaw&r=0

小辣椒 发表于 2023-7-12 21:23

欣赏朵拉的精彩贺帖{:4_199:}

小辣椒 发表于 2023-7-12 21:24

猫猫生日快乐！@大猫咪

收礼开心

大猫咪 发表于 2023-7-13 15:42

小辣椒 发表于 2023-7-12 21:24
猫猫生日快乐！@大猫咪

收礼开心

谢谢辣椒{:4_187:}一起开心每一天！ 幸福平安！

{:4_204:}{:4_191:}{:4_179:}

小九 发表于 2023-7-13 15:44

今天可以抹蛋糕了{:4_187:}

查看完整版本: 向云端 TO:大猫咪生日快乐！