论坛 › 【代码图腾】 › 快乐阿拉蕾

雨中悄然 发表于 2023-7-12 10:31

快乐阿拉蕾

<style>#mydiv {
            margin: 0 0 0 calc(50% - 740px);
            width:1300px;
             height: 768px;
            background: url('https://s1.ax1x.com/2023/07/11/pCWZMJU.jpg') no-repeat center / cover;
            overflow: hidden;
            cursor: pointer;
            position: relative;
    }
    li-zi {
            position: absolute;
         clip-path: polygon(0% 0%, 100% 50%, 0% 100%, 15% 50%);
         z-index: 3;
    }
   #vid {
        position: absolute;
        width: 1300px;
        height: 50%;
        top:1px;
    right:2px;
        border-radius: 2%;
        opacity: .35;
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;
        z-index: 2;
}</style>    <div id="mydiv"><video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/10/5e17dd5a329bf.mp4" autoplay="" loop="" muted=""></video></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=290840" autoplay="autoplay" loop="loop"></audio>    <script>//粒子运动开关
    let canMove = true;

    //Lizi 类
    class Lizi {
            //构造函数 : 属性设计/设置（pa - 粒子宿主元素）
            constructor(pa) {
                  this.pa = pa;
                  this.size = {x: 20, y: 20};
                  this.pos = {x: 10, y: 10}
                  this.step = {x: 1, y: 1};
                  this.ele = document.createElement('li-zi');
            };
            //创建粒子
            creating() {
                  this.ele.style.cssText = `
                            width: ${this.size.x}px;
                            height: ${this.size.y}px;
                            left: ${this.pos.x}px;
                            top: ${this.pos.y}px;
                  `;
                  this.pa.appendChild(this.ele);
                  this.chgColor();
                  this.moving();
            };
            //移动粒子
            moving() {
                  if(canMove) {
                            this.pos.x += this.step.x;
                            this.pos.y += this.step.y;
                            if(this.pos.x >= this.pa.offsetWidth) {
                                    this.pos.x = -this.size.x;
                                    this.chgColor();
                            }
                            if(this.pos.y >= this.pa.offsetHeight) {
                                    this.pos.y = -this.size.y;
                                    this.chgColor();
                            }
                            this.ele.style.left = this.pos.x + 'px';
                           
                  }
                  requestAnimationFrame(this.moving.bind(this));
            };
            //变换颜色
            chgColor() {
                  this.ele.style.background = '#' + Math.random().toString(16).substr(-6);
            };
    }

    //实例化类
    Array.from({length: 20}).forEach((element) => {
            element = new Lizi(mydiv);
            element.size = {
                  x: 40 + Math.random() * 40,
                  y: 10 + Math.random() * 30
            };

            element.pos = {
                  x: Math.floor(Math.random() * (mydiv.offsetWidth - element.size.x)),
                  y: Math.floor(Math.random() * (mydiv.offsetHeight - element.size.y-500))
            };
            element.step = {
                  x: 0.5 + Math.random(),
                  y: 0.2 + Math.random() * 0.2
            };
            element.creating();
    });

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

雨中悄然 发表于 2023-7-12 10:33

点页面音乐和飞机及动画可暂停

雨中悄然 发表于 2023-7-12 10:34

好久未来，终于找到密码，先试一贴看看能否发出来

容轩听雨 发表于 2023-7-12 12:31

嵌入的视频及创建的粒子灵动，歌曲活泼且有童稚之气，赞！问好，夏祺！

久久. 发表于 2023-7-12 21:20

晚上好！{:1_292:}

久久. 发表于 2023-7-12 21:20

帖子制作的漂亮

久久. 发表于 2023-7-12 21:21

谢谢分享

久久. 发表于 2023-7-12 21:21

支持点赞{:1_293:}

蓝魔 发表于 2023-7-12 21:35

欣赏一下。，谢谢。

查看完整版本: 快乐阿拉蕾