论坛 › 马黑黑教程专版 › 测试Lizi类的落叶

马黑黑 发表于 2023-7-9 11:00

测试Lizi类的落叶

<style>
#mydiv {
        margin: 20px auto;
        width: 740px;
        height: 400px;
        background: linear-gradient(to right top,antiquewhite,black);
        overflow: hidden;
        position: relative;
}
li-zi {
        position: absolute;
        border-radius: 0% 100%;
        opacity: .85;
        animation: rot 3s var(--delay) infinite alternate;
}
@keyframes rot { to { transform: rotate(180deg); } }
</style>

<div id="mydiv"></div>

<script>

//声明粒子运动的布尔变量 ：true - 可以移动；false - 不可以移动
let canMove = true;

//创建一个 Lizi 类
class Lizi {
        //构造函数 : 属性设计/设置 pa - 粒子宿主元素，size - 粒子大小
        constructor(pa,size = 20) {
                this.pa = pa;
                this.size = size;
                this.left = 10;
                this.top = 10;
                this.xstep = 1; //水平移动步幅
                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;
                `;
                this.pa.appendChild(this.ele);
                this.setBg();
                this.moving();
        }
        //移动粒子
        moving() {
                if(canMove) {
                        this.left += this.xstep;
                        this.top += this.ystep;
                        if(this.left >= this.pa.offsetWidth) {
                                this.left = -this.size;
                                this.setBg();
                        }
                        if(this.top >= this.pa.offsetHeight) {
                                this.top = -this.size;
                                this.setBg();
                        }
                        this.ele.style.left = this.left + 'px';
                        this.ele.style.top = this.top + 'px';
                }
                requestAnimationFrame(this.moving.bind(this));
        }
        setBg() { this.ele.style.background = '#' + Math.random().toString(16).substring(2,8); }
}

let stepAr = ; //步幅数组

Array.from({length: 50}).forEach((element) => {
        let yIdx = Math.floor(Math.random() * stepAr.length);
        element = new Lizi(mydiv);
        element.size = 8 + Math.ceil(Math.random() * 16);
        element.left = Math.floor(Math.random() * mydiv.offsetWidth);
        element.top = Math.floor(Math.random() * mydiv.offsetHeight);
        element.xstep = 0.2;
        element.ystep = stepAr;
        element.bg = '#' + Math.random().toString(16).substr(-6);
        element.creating();
        element.ele.style.setProperty('--delay', Math.random() * -3 + 's');
});

mydiv.onclick = () => canMove = !canMove;

</script>

马黑黑 发表于 2023-7-9 11:01

测试代码
<style>
#mydiv {
        margin: 20px auto;
        width: 740px;
        height: 400px;
        background: linear-gradient(to right top,antiquewhite,black);
        overflow: hidden;
        position: relative;
}
li-zi {
        position: absolute;
        border-radius: 0% 100%;
        opacity: .85;
        animation: rot 3s var(--delay) infinite alternate;
}
@keyframes rot { to { transform: rotate(180deg); } }
</style>

<div id="mydiv"></div>

<script>

//声明粒子运动的布尔变量 ：true - 可以移动；false - 不可以移动
let canMove = true;

//创建一个 Lizi 类
class Lizi {
        //构造函数 : 属性设计/设置 pa - 粒子宿主元素，size - 粒子大小
        constructor(pa,size = 20) {
                this.pa = pa;
                this.size = size;
                this.left = 10;
                this.top = 10;
                this.xstep = 1; //水平移动步幅
                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;
                `;
                this.pa.appendChild(this.ele);
                this.setBg();
                this.moving();
        }
        //移动粒子
        moving() {
                if(canMove) {
                        this.left += this.xstep;
                        this.top += this.ystep;
                        if(this.left >= this.pa.offsetWidth) {
                                this.left = -this.size;
                                this.setBg();
                        }
                        if(this.top >= this.pa.offsetHeight) {
                                this.top = -this.size;
                                this.setBg();
                        }
                        this.ele.style.left = this.left + 'px';
                        this.ele.style.top = this.top + 'px';
                }
                requestAnimationFrame(this.moving.bind(this));
        }
        setBg() { this.ele.style.background = '#' + Math.random().toString(16).substring(2,8); }
}

let stepAr = ; //步幅数组

Array.from({length: 50}).forEach((element) => {
        let yIdx = Math.floor(Math.random() * stepAr.length);
        element = new Lizi(mydiv);
        element.size = 8 + Math.ceil(Math.random() * 16);
        element.left = Math.floor(Math.random() * mydiv.offsetWidth);
        element.top = Math.floor(Math.random() * mydiv.offsetHeight);
        element.xstep = 0.2;
        element.ystep = stepAr;
        element.bg = '#' + Math.random().toString(16).substr(-6);
        element.creating();
        element.ele.style.setProperty('--delay', Math.random() * -3 + 's');
});

mydiv.onclick = () => canMove = !canMove;

</script>

一斛珠 发表于 2023-7-9 11:09

五彩缤纷啊{:4_199:}

马黑黑 发表于 2023-7-9 11:37

一斛珠 发表于 2023-7-9 11:09
五彩缤纷啊

颜色是次要的

南无月 发表于 2023-7-9 11:38

试了 border-radius: 0% 100%;改变数据可以有多种形状生成。又学到一个知识点~~{:4_199:}
试了改变步幅，树叶可以上下纷飞~~

南无月 发表于 2023-7-9 11:39

代码果然有无限可能。。。千变万化，层出不穷。。

梦油 发表于 2023-7-9 11:39

这落叶飘飘悠悠的真好看。神奇的代码真神奇。

马黑黑 发表于 2023-7-9 11:40

梦油 发表于 2023-7-9 11:39
这落叶飘飘悠悠的真好看。神奇的代码真神奇。

{:4_190:}

马黑黑 发表于 2023-7-9 13:01

南无月 发表于 2023-7-9 11:39
代码果然有无限可能。。。千变万化，层出不穷。。

有点想象力，一切都可以很精彩

马黑黑 发表于 2023-7-9 13:02

南无月 发表于 2023-7-9 11:38
试了 border-radius: 0% 100%;改变数据可以有多种形状生成。又学到一个知识点~~
试了改变步幅， ...

还有更复杂的 border 设置，可以去搜一下

红影 发表于 2023-7-9 13:34

好漂亮的落叶，代码绘制的叶片，很方便{:4_187:}

红影 发表于 2023-7-9 13:36

点击后不飘了，还在转，有趣{:4_173:}

樵歌 发表于 2023-7-9 16:40

花辩一样缤纷！

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

樵歌 发表于 2023-7-9 16:40
花辩一样缤纷！

亦是花瓣，也是叶子

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

红影 发表于 2023-7-9 13:34
好漂亮的落叶，代码绘制的叶片，很方便

利用border-radius弄成的，简约

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

红影 发表于 2023-7-9 13:36
点击后不飘了，还在转，有趣

也可以控制转动的

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

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

醉美水芙蓉 发表于 2023-7-9 17:28
欣赏学习黑黑老师教程！

{:4_190:}

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

是缤纷的落叶吗？挺美的{:4_187:}

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

千羽 发表于 2023-7-9 19:36
是缤纷的落叶吗？挺美的

@樵歌 说是花瓣

查看完整版本: 测试Lizi类的落叶