前端日常实践：46#视频演示如何使用纯CSS制作一个在容器中弹跳的小球
时间：2023-04-02 13:58:10
HTML
效果预览点击右侧“点击预览”按钮在当前页面进行预览，点击链接全屏预览。https://codepen.io/comehop??e/pen/jKVbyE交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cD8nMUr源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，只有一个元素：
centerdisplay:body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义容器的大小：.loader{width:10em;高度：3em；边框：0.3em纯银；边界半径：3em；font-size:20px;}在容器的左右两边涂上不同的颜色Color:.loader{border-left-color:hotpink;border-right-color:dodgerblue;}在容器中画一个小球：.loader{position:relative;}.loader::before{content:'';位置：绝对；顶部：0；左：0；宽度：3em；高度：3em；边界半径：50%；background-color:dodgerblue;}让小球在容器中来回移动：.loader::before{animation:shift3slinearinfinite;}@keyframesshift{50%{left:7em;}}让球在击中两端时改变颜色：.loader::before{animation:shift3slinearinfinite,change-颜色3s线性无限;}@keyframes改变颜色{0%,55%{background-color:dodgerblue;}5%,50%{背景色:hotpink;}}最后，让容器无限旋转：}}你完成了！
