怎么使用纯CSS实现小球跳跃台阶的动画效果 - 行业资讯 - 肥雀云

　　介绍

小编给大家分享一下怎么使用纯CSS实现小球跳跃台阶的动画效果,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!

效果预览

源代码下载https://github.com/comehope/front-end-daily-challenges

代码解读

定义dom,容器中包含5个元素,代表5个台阶:

& lt; div类=發oader"比; 　　& lt; span> & lt;/span> 　　& lt; span> & lt;/span> 　　& lt; span> & lt;/span> 　　& lt; span> & lt;/span> 　　& lt; span> & lt;/span> 　　& lt;/div>

居中显示:

身体{ 　　保证金:0; 　　身高:100 vh; 　　显示:flex; 　　对齐项目:中心; 　　justify-content:中心; 　　背景颜色:黑色; 　　}

定义容器尺寸:

。装载机{ 　　宽度:7他们; 　　身高:5 em; 　　字体大小:40像素; 　　}

画出5个台阶:

。装载机{ 　　显示:flex; 　　justify-content:之间的空间; 　　对齐项目:flex-end; 　　} 　　　　.loader跨度{ 　　宽度:1 em; 　　身高:1 em; 　　背景颜色:白色; 　　}

用变量让5个台阶从低到高排序:

。装载机跨度{ 　　高度:钙(var (- n) * 1 em); 　　} 　　　　.loader跨度:nth-child (1) { 　　——n: 1; 　　} 　　　　.loader跨度:nth-child (2) { 　　——n: 2; 　　} 　　　　.loader跨度:nth-child (3) { 　　——n: 3; 　　} 　　　　.loader跨度:nth-child (4) { 　　——n: 4; 　　} 　　　　.loader跨度:nth-child (5) { 　　——n: 5; 　　}

为台阶增加转换排序方向的动画效果:

。装载机跨度{ 　　动画:5 s无限; 　　} 　　　　@keyframes类{ 　　0%、40%、100% { 　　高度:钙(var (- n) * 1 em); 　　} 　　　　50%、90% { 　　高度:钙(5 em - (var (- n) - 1) * 1 em); 　　} 　　}

下面做小球的动画,用了障眼法,使2个同色小球的交替运动看起来就像一个小球在做往复运动。

用伪元素画出2个小球:

.loader::, 　　{后.loader:: 　　内容:& # 39;& # 39;; 　　位置:绝对的; 　　宽度:1 em; 　　身高:1 em; 　　背景颜色:白色; 　　这个特性:50%; 　　底部:1 em; 　　} 　　　　{前.loader:: 　　左:0; 　　} 　　　　{后.loader:: 　　左:6 em; 　　}

增加让小球向上运动的动画效果:

.loader::, 　　{后.loader:: 　　动画:爬5 s无限; 　　可见性:隐藏; 　　} 　　　　{后.loader:: 　　animation-delay: 2.5秒; 　　} 　　　　@keyframes爬{ 　　0% { 　　底部:1 em; 　　可见性:可见; 　　} 　　　　10% { 　　底部:2 em; 　　} 　　　　20% { 　　底部:3他们; 　　} 　　　　30% { 　　底部:4 em; 　　} 　　　　40% { 　　底部:5 em; 　　} 　　　　50% { 　　底部:1 em; 　　} 　　　　50%、100% { 　　可见性:隐藏; 　　} 　　}

在向上运动的同时向两侧运动,形成上台阶的动画效果:

。{前装载机:: 　　——方向:1; 　　} 　　　　{后.loader:: 　　——方向:1; 　　} 　　　　@keyframes爬{ 　　0% { 　　底部:1 em; 　　左:钙(3 em - 2 * 1.5 em * var(——方向)); 　　可见性:可见; 　　} 　　　　10% { 　　底部:2 em; 　　左:钙(3 em - 1 * 1.5 em * var(——方向)); 　　} 　　　　20% { 　　底部:3他们; 　　左:钙(em - 0 3 * 1.5 em * var(方向)); 　　} 　　　　30% { 　　底部:4 em; 　　左:钙(3 em + 1 * 1.5 em * var(——方向)); 　　} 　　　　40% { 　　底部:5 em; 　　左:钙(3 em + 2 * 1.5 em * var(——方向)); 　　} 　　　　50% { 　　底部:1 em; 　　左:钙(3 em + 2 * 1.5 em * var(——方向)); 　　} 　　　　50%、100% { 　　可见性:隐藏; 　　} 　　}

最后,为上台阶的动作增加拟人效果:

@keyframes爬{ 　　0% { 　　底部:1 em; 　　左:钙(3 em - 2 * 1.5 em * var(——方向)); 　　可见性:可见; 　　} 　　　　7% { 　　底部:钙(2 em + 0.3 em); 　　} 　　　　10% { 　　底部:2 em; 　　左:钙(3 em - 1 * 1.5 em * var(——方向)); 　　} 　　　　17% { 　　底部:钙(3 em + 0.3 em); 　　} 　　　　20% { 　　底部:3他们; 　　左:钙(em - 0 3 * 1.5 em * var(方向)); 　　} 　　　　27% { 　　底部:钙(4 em + 0.3 em); 　　} 　　　　30% { 　　底部:4 em; 　　左:钙(3 em + 1 * 1.5 em * var(——方向)); 　　} 　　　　37% { 　　底部:钙(5 em + 0.3 em); 　　} 　　　　40% { 　　底部:5 em; 　　左:钙(3 em + 2 * 1.5 em * var(——方向)); 　　} 　　　　50% { 　　底部:1 em; 　　左:钙(3 em + 2 * 1.5 em * var(——方向)); 　　} 　　　　50%、100% { 　　可见性:隐藏; 　　} 　　}