网站前端设计招聘,棋牌源码资源网,iis7.5配置网站,进入山东省住房和城乡建设厅网站本篇文章给大家带来的内容是关于如何使用纯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 实现类似于旗帜飘扬动画效果(附源码)
