前端日常实战：85#视频演示如何使用纯CSS制作小球弹跳动画
时间：2023-04-05 20:03:10
HTML5
效果预览在当前页面点击右侧“点击预览”按钮即可预览，点击链接可完整预览屏幕。https://codepen.io/comehop??e/pen/OwWROO互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cnKwKA3源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，只有1个元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(#666,#333);}定义容器尺寸：.box{width:30em;高度：20em；字体大小：10px；背景色：钢蓝；border:0.5emsolid#222;}和pseudo元素画一个小球：.box{position:relative;}.box::before{content:'';位置：绝对；宽度：2em；高度：2em；背景色：银色；边界半径：50%；box-shadow:inset-0.3em-0.3em0.5emrgba(0,0,0,0.6);}定义沿x轴或横向移动的动画效果：@keyframesmoveX{from{left:0;}到{左：计算（30em-2em）;}}定义沿y轴垂直移动的动画效果：@keyframesmoveY{from{top:0;}to{top:calc(20em-2em);}}最后将动画效果应用到小球上：.box::before{animation:moveX2s线性无限交替，moveY2.5s线性无限交替；}大功告成！
