常州网站建设 光龙,用html表格做的网站,手机医疗网站建设,做空山寨币的网站本篇文章给大家带来的内容是关于如何使用纯CSS实现小球跳跃台阶的动画效果(附源码) #xff0c;有一定的参考价值#xff0c;有需要的朋友可以参考一下#xff0c;希望对你有所帮助。效果预览源代码下载https://github.com/comehope/front-end-daily-challenges代码解读定义…本篇文章给大家带来的内容是关于如何使用纯CSS实现小球跳跃台阶的动画效果(附源码) 有一定的参考价值有需要的朋友可以参考一下希望对你有所帮助。效果预览源代码下载https://github.com/comehope/front-end-daily-challenges代码解读定义 dom容器中包含 5 个元素代表 5 个台阶居中显示body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background-color: black;}定义容器尺寸.loader {width: 7em;height: 5em;font-size: 40px;}画出 5 个台阶.loader {display: flex;justify-content: space-between;align-items: flex-end;}.loader span {width: 1em;height: 1em;background-color: white;}用变量让 5 个台阶从低到高排序.loader span {height: calc(var(--n) * 1em);}.loader span:nth-child(1) {--n: 1;}.loader span:nth-child(2) {--n: 2;}.loader span:nth-child(3) {--n: 3;}.loader span:nth-child(4) {--n: 4;}.loader span:nth-child(5) {--n: 5;}为台阶增加转换排序方向的动画效果.loader span {animation: sort 5s infinite;}keyframes sort {0%, 40%, 100% {height: calc(var(--n) * 1em);}50%, 90% {height: calc(5em - (var(--n) - 1) * 1em);}}下面做小球的动画用了障眼法使 2 个同色小球的交替运动看起来就像 1 个小球在做往复运动。用伪元素画出 2 个小球.loader::before,.loader::after {content: ;position: absolute;width: 1em;height: 1em;background-color: white;border-radius: 50%;bottom: 1em;}.loader::before {left: 0;}.loader::after {left: 6em;}增加让小球向上运动的动画效果.loader::before,.loader::after {animation: climbing 5s infinite;visibility: hidden;}.loader::after {animation-delay: 2.5s;}keyframes climbing {0% {bottom: 1em;visibility: visible;}10% {bottom: 2em;}20% {bottom: 3em;}30% {bottom: 4em;}40% {bottom: 5em;}50% {bottom: 1em;}50%, 100% {visibility: hidden;}}在向上运动的同时向两侧运动形成上台阶的动画效果.loader::before {--direction: 1;}.loader::after {--direction: -1;}keyframes climbing {0% {bottom: 1em;left: calc(3em - 2 * 1.5em * var(--direction));visibility: visible;}10% {bottom: 2em;left: calc(3em - 1 * 1.5em * var(--direction));}20% {bottom: 3em;left: calc(3em - 0 * 1.5em * var(--direction));}30% {bottom: 4em;left: calc(3em 1 * 1.5em * var(--direction));}40% {bottom: 5em;left: calc(3em 2 * 1.5em * var(--direction));}50% {bottom: 1em;left: calc(3em 2 * 1.5em * var(--direction));}50%, 100% {visibility: hidden;}}最后为上台阶的动作增加拟人效果keyframes climbing {0% {bottom: 1em;left: calc(3em - 2 * 1.5em * var(--direction));visibility: visible;}7% {bottom: calc(2em 0.3em);}10% {bottom: 2em;left: calc(3em - 1 * 1.5em * var(--direction));}17% {bottom: calc(3em 0.3em);}20% {bottom: 3em;left: calc(3em - 0 * 1.5em * var(--direction));}27% {bottom: calc(4em 0.3em);}30% {bottom: 4em;left: calc(3em 1 * 1.5em * var(--direction));}37% {bottom: calc(5em 0.3em);}40% {bottom: 5em;left: calc(3em 2 * 1.5em * var(--direction));}50% {bottom: 1em;left: calc(3em 2 * 1.5em * var(--direction));}50%, 100% {visibility: hidden;}}大功告成相关推荐如何使用纯CSS实现一个转动的自行车车轮的动画效果如何使用纯CSS 实现类似于旗帜飘扬动画效果(附源码)
