HTML5+CSS3小实例：跳跃的弹性小球加载动画

实例：跳跃的弹性小球加载动画
技术栈：HTML+CSS
效果：

源码：
【html】

【css】

*{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
}
.loader{
    width: 650px;
    height: 200px;
    /* 相对定位 */
    position: relative;
}
/* 小球 */
.loader span.ball{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: lightseagreen;
    /* 绝对定位 */
    position: absolute;
    /* 通过var函数调用自定义属性--i，计算出每个小球的位置 */
    left: calc(var(--i) * 100px);
    /* 执行动画：动画名 时长 线性的 无限次播放 利用变量让小球的运动拉开时间 */
    animation: jump 2s linear infinite calc(var(--i) * 0.3s);
}
/* 小球阴影 */
.loader span.shadow{
    width: 50px;
    height: 25px;
    border-radius: 50%;
    position: absolute;
    left: calc(var(--i) * 100px);
    bottom: -12.5px;
    z-index: -1;
    background-color: #000;
    animation: shadow 2s linear infinite calc(var(--i) * 0.3s);
}
 
/* 定义动画 */
/* 跳动的动画 */
@keyframes jump {
    0%,100%{
        bottom: 150px;
    }
    40%,60%{
        bottom: 0;
        height: 50px;
    }
    50%{
        height: 25px;
        /* 颜色滤镜，可以设置不同的度数来改变颜色 */
        filter: hue-rotate(180deg);
    }
}
/* 阴影的变化 */
@keyframes shadow {
    0%,100%{
        transform: scale(2);
        opacity: 0.1;
        /* 模糊滤镜 */
        filter: blur(5px);
    }
    40%,60%{
        transform: scale(1);
        opacity: 1;
        filter: blur(2px);
    }
}