论坛 › 动画音画 › 可是归人

马黑黑 发表于 2023-7-9 17:38

可是归人

本帖最后由 马黑黑 于 2023-7-9 17:41 编辑 <br /><br /><style>
#mydiv {
        margin: -80px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 678px;
        z-index: 1;
        background: url('https://638183.freep.cn/638183/t23/2/gvrf.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=1847758043" autoplay="autoplay" loop="loop"></audio>

<script>
(function() {
        let canMove = true;
        class Lizi {
                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));
                }
        }
        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-9 17:38

帖子代码（Lizi类应用）

<style>
#mydiv {
        margin: 20px auto;
        width: 1024px;
        height: 678px;
        z-index: 1;
        background: url('https://638183.freep.cn/638183/t23/2/gvrf.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=1847758043" 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-9 17:46

这一加上背景就更漂亮啦。

醉美水芙蓉 发表于 2023-7-9 17:50

马黑黑 发表于 2023-7-9 17:57

梦油 发表于 2023-7-9 17:46
这一加上背景就更漂亮啦。

感谢支持

马黑黑 发表于 2023-7-9 17:57

醉美水芙蓉 发表于 2023-7-9 17:50
真漂亮！

感谢支持，下午好

醉美水芙蓉 发表于 2023-7-9 18:01

红影 发表于 2023-7-9 18:31

border-radius: 100% 100% 100% 0;这个就是气球的造型吧，真漂亮{:4_187:}

红影 发表于 2023-7-9 18:35

五颜六色的气球飞满天{:4_187:}

红影 发表于 2023-7-9 18:37

这标题好玩，可是归人。放了这么多气球迎接归人，万一不是，不是白放了{:4_173:}

马黑黑 发表于 2023-7-9 19:29

红影 发表于 2023-7-9 18:31
border-radius: 100% 100% 100% 0;这个就是气球的造型吧，真漂亮

倒过来就是水滴

马黑黑 发表于 2023-7-9 19:30

红影 发表于 2023-7-9 18:37
这标题好玩，可是归人。放了这么多气球迎接归人，万一不是，不是白放了

气球也花不了几个钱钱，俺兜里还有六毛呢

马黑黑 发表于 2023-7-9 19:31

醉美水芙蓉 发表于 2023-7-9 18:01
黑黑老师吃晚饭了！

谢谢你的啤酒

马黑黑 发表于 2023-7-9 19:31

红影 发表于 2023-7-9 18:35
五颜六色的气球飞满天

漂亮吧？你可以试着用这个类做下雨的特效

千羽 发表于 2023-7-9 19:32

本帖最后由 千羽 于 2023-7-9 20:00 编辑

这是要过什么节日了？漫天的气球带来了喜气洋洋{:4_187:}

马黑黑 发表于 2023-7-9 19:34

千羽 发表于 2023-7-9 19:32
这是要过什么节日了？蔓天的气球带来了喜气洋洋

迎归人

千羽 发表于 2023-7-9 19:37

马黑黑 发表于 2023-7-9 19:34
迎归人

黑黑老师家有贵客来访？{:4_203:}

马黑黑 发表于 2023-7-9 19:38

千羽 发表于 2023-7-9 19:37
黑黑老师家有贵客来访？

嗯，失散1000年的孙子回来了

千羽 发表于 2023-7-9 19:44

马黑黑 发表于 2023-7-9 19:38
嗯，失散1000年的孙子回来了

哈哈，那黑黑老师已成了……{:4_173:}

马黑黑 发表于 2023-7-9 19:45

千羽 发表于 2023-7-9 19:44
哈哈，那黑黑老师已成了……

他们说是妖

查看完整版本: 可是归人