会动的水晶球

        * {
            /* 修改标签和模型类型 */
            box-sizing: border-box;
        }

        html {
            height: 100%;
        }

        body {
            margin: 0;
            height: 100%;
            /* 径向渐变 */
            background: radial-gradient(circle, #999, #000, #000);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #ball {
            width: 450px;
            height: 450px;
            border: 10px solid #000;
            border: 10px solid rgba(122, 126, 141, 0.7);
            border-radius: 50%;
            margin: 0 auto -60px;
            background-image: url('img/tree.png');
            background-size: 120%;
            background-repeat: no-repeat;
            position: relative;
            /* 对于位置，参数1左右方向控制，参数2是垂直方向控制 */
            background-position: center bottom;
            /* 将溢出的内容隐藏 */
            overflow: hidden;
        }

        .fla {
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            /* 外侧阴影 */
            box-shadow: 0 0 20px #fff;
            position: absolute;
        }
        #base{
            width: 100%;
            position: relative;
            z-index:3;
        }
    </style>

    <main>
        <div id="ball"></div>
        <img id="base" src="img/base.png" alt="">
    </main>

<script>
    var a = 1;
    //var 声明变量的关键字
    // 声明：假设新建，让某个东西从无到有
    // 变量：可以变化的一个符号
    // 关键字:编程环境中默认具有特殊含义的词语
    // a 自定义的变量名称
    // = 赋值号（不是等号——），作用是将右侧的值传递给左侧的变量或属性
    // 上面整体称为，语句，结束时一般使用；结尾，表示书写结束
    // 调试语句（方法），用于查看变量的值
    // console 控制台 log 日志
    console.log(a);

    var b = 3;
    var c = a + b;
    console.log(c);
    // 函数
    // 函数声明关键字 自定义函数名（添加参数，可选，数量不限）{  包装的代码片段}
    function fun() {
        console.log('fun 函数执行了')
    }
    // 函数调用
    fun();
    // -------------------------------------------------------------------
    // 要在一个指定的标签内，需要几步；
    // 1.获取一个指定的容器标签
    // 2.新建一个指定类型的新标签
    // 3.将新标签加入容器标签

    var ball = document.getElementById('ball');
    function snow() {
        var flake = document.createElement('div');
        console.log(flake);
        // 给新标签增加样式，增加类名
        // 添加静态样式
        flake.classList.add('fla');

        //  追加字标签 append 追加
        ball.appendChild(flake);

        // 下落过程
        // 1.随机的出现在球内的某一个位置
        // 使用定位方式控制位置
        // 2.开始下落
        // 完善动态样式
        // 获取动态范围的数字
        // 随机+范围

        // 获取随机数[0.1)之间的随机小数
        // var ran = Math.random();
        // console.log(ran);

        // 获取球的宽高
        // client 可视区
        var w = ball.clientWidth;
        var h = ball.clientHeight;

        console.log(w, h)
        // 换算指定范围内的动态整数
        // floor 向下取整
        var _left = Math.floor(w * Math.random());
        var _top = Math.floor(h * Math.random());

        // 将得到的合适的随机数作用在标签样式上
        flake.style.left = _left + 'px';
        flake.style.top = _top + 'px';
        // 补充随机大小
        flake.style.transform = 'scale(' + Math.random() + ')';
        //不停地增大 top 样式值，实现下落动作
        // 使用计时器方法实现不停的执行某个动作 interval 间隔
        // 参数1：指定需要不停制定的动作，参数2：指定时间间隔
        setInterval(function () {
            // 增大 top 样式
            _top = _top + 1;
            // 临界判断
            if (_top > h) {
                _top = -20;
                // 在重新下落时，在随机一个大小
                flake.style.transform = 'scale(' + Math.random() + ')';

            }
            // 将增大后的新值再次作用在样式上
            flake.style.top = _top + 'px';
        }, 1000 / 60);

    }
// 循环执行，控制一定的次数
for(var i = 0; i < 30;i++){
    snow();
}
</script>