利用动画效果制作简易花落效果

首先我们需要动画效果如下：

      function animate(ele, obj,callback) {
            for (let attr in obj) {
                //ele是获取的标签名(div)，attr获取的是属性值(left)，l就是标签名的属性值(div.left)
                let l = getStyle(ele, attr)
                //获取初始位置
               
            //    console.log(ele,attr);
                l = parseInt(l)
                console.log(l);
                //获取目标位置
                let target = obj[attr]
                //步长公示
                let steep = (target - l) / 10
                //大于0 取大；小于0 取小
                steep = steep>0?Math.ceil(steep):Math.floor(steep)
                let timer = setInterval(function () {
                    l += steep
                    if (l === target) {
                        l = target
                        clearTimeout(timer)
                        //回调函数在定时器结束的时候运行
                        if(callback){
                            callback()
                        }
                    }
                    ele.style[attr]=l+'px'
                },30)
            }

        }

制作的步骤是：

先在页面中放上提前准备的大树的枝干

鼠标点击大盒子，随机生成若干个小div，给他们放到随机的位置，并添加上背景图片

然后利用动画效果，改变他们的top值，使小div降落

css样式：

   aside {
            width: 1000px;
            height: 700px;
            margin: 0 auto;
            /* background: chartreuse; */
            background: url(images/未标题-2.png) no-repeat;
            background-size: 60%;
            background-position-x: 45%;
            position: relative;
          
        }

html：

<aside>
</aside>

js：

   //获取样式函数
        function setStyle(ele, styleObj) {
            for (var attr in styleObj) {
                ele.style[attr] = styleObj[attr]
            }
        }
        //随机数函数
        function getRandom(a, b = 0) {
            var max = a
            var min = b
            if (a < b) {
                max = b
                min = a
            }
            return Math.floor(Math.random() * (max - min)) + min
        }
        //随机颜色函数
        function setColor() {
            var color = '#'
            for (var i = 0; i < 2; i++) {
                var hex = this.getRandom(256).toString(16)
                hex = hex.length ? '0' + hex : hex
                color += hex
            }
            return color
        }
        //获取元素
        var aside = document.querySelector('aside')
        //鼠标点击大盒子
        aside.addEventListener('click', function (e) {
            //循环创建小div
            for (var i = 0; i < getRandom(800); i++) {
                var div = document.createElement('div')
                //给每一个小的div创建上类名
                div.className = 'flower'
                //利用样式函数添加样式，大小 背景图 定位（必需添加定位，不然动画是不会动的，）
                setStyle(div, {
                    width: '40px',
                    height: '40px',
                    backgroundImage: " url(images/21.png)",
                    backgroundSize: '100%',
                    position: 'absolute',
                    //小div的位置是随机放的
                    left: getRandom(750, 150) + 'px',
                    top: getRandom(12, 487) + 'px'
                })
                //将每一个小div放进大盒子里面
                aside.appendChild(div)
            }
            //获取这个集合
            var divs = document.querySelectorAll('.flower')
            for (let j = 0; j < divs.length; j++) {
                //给每一个都绑定动画事件
                animate(divs[j], {
                    top: 600
                }, function () {
                    //这是一个回调函数，所有的小盒子动画事件结束之后就会执行下面函数，
                    //动画函数执行完毕之后，清除小div
                    aside.removeChild(divs[j])
                })

            }

        })