<span class="ball" style="--i:1"></span><span class="shadow" style="--i:1"></span>

这里的 --i 是自定义属性，后续可通过var函数进行调用，用于打算出每个小球的位置利用。

CSS干系部分

height: 100vh;

这里的height: 100vh;表示100%窗口（浏览器窗口）高度，而height: 100%;是相对付父元素的高度，当父元素高度未被定义时则height: 100%;不会生效；在实现全屏或类似效果时height: 100vh比较适宜。

html5产品展示动态HTML5CSS3实现跳跃的弹性小球加载动画 AJAX

display: flex;justify-content: center;align-items: center;

这里利用的是弹性布局，让元素水平垂直居中展示。

position: absolute;left: calc(var(--i) 100px);

这里对小球出发点位置设置绝对定位，并通过var函数进行调用，打算出每个小球的初始位置。

@keyframes jump { 0%, 100% { bottom: 150px; } 40%, 60% { bottom: 0; height: 50px; } 50% { height: 25px; filter: hue-rotate(180deg); }}

这里是创建小球动画并定义关键帧，%：表示动画进度，0%为动画开始，100%为动画结束。
在这两个值之间可以定义任意数量的关键帧，浏览器会根据这些关键帧的样式逐渐过渡。
个中，50%进度时即小球落在地上，此时通过设置小球高度来实现弹性小球效果，通过filter属性中的hue-rotate（色相旋转）滤镜效果可以设置不同度数来改变小球的颜色。

@keyframes shadow { 0%, 100% { transform: scale(2); opacity: 0.1; filter: blur(5px); } 40%, 60% { transform: scale(1); opacity: 1; filter: blur(2px); }}

这里是创建小球阴影动画，事理同上。
个中，transform: scale(2);表示将原来的宽高缩放到2倍大小，同时通过opacity和filter属性设置透明度和模糊度实现小球落下和离开的阴影效果。

animation: jump 2s linear infinite calc(var(--i) 0.3s);

创建完关键帧动画后，要使其生效，则需指定动画的时长和其他参数，这里实现的效果是动画时长为2秒，线性过渡并无限次播放；同时通过var函数调用自定义属性--i打算出每个小球的动画延迟韶光。