首页 › =音乐在线= › 向 云 端

朵拉 发表于 2023-7-11 23:26:34

向 云 端

本帖最后由 朵拉 于 2023-7-11 23:32 编辑 <br /><br /><style>
#mydiv {
      margin: 0 0 0 calc(50% - 676px);
      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-12 12:25:57

这首歌好听，悠扬婉转，引人入胜，谢谢朵拉的分享{:2_133:}

青树 发表于 2023-7-12 12:27:17

问好朵拉，制作辛苦了，祝夏季安好{:2_124:}{:2_124:}

墨染锦年 发表于 2023-7-14 13:27:21

歌唱的好听，图也很棒，尤其是特效添加特扣题

墨染锦年 发表于 2023-7-14 13:28:02

感谢朵拉精彩分享！欣赏点赞，祝夏安！{:3_236:}{:3_268:}{:4_219:}{:4_219:}{:4_219:}

以玫 发表于 2023-7-19 21:21:24

欣赏友友佳作，感谢精彩分享，感谢给大家带来美滴享受！祝创作愉快，天天好心情！

以玫 发表于 2023-7-19 21:21:38

听乐赏图，真是美美哒！
听音乐带来好心情，赞赞赞！

彼岸星光 发表于 2023-7-21 22:49:42

问候老师 动画棒棒哒{:4_218:}{:4_218:}{:4_218:}

三月风 发表于 2023-8-13 16:37:28

听歌赏图，点赞问好！

查看完整版本: 向 云 端