小编给大家分享一下怎么使用纯CSS实现在容器中反弹的小球，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
代码解读
定义dom，只有一个元素：
<divclass="loader"></div>
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:black;
}
定义容器的尺寸：
.loader{
width:10em;
height:3em;
border:0.3emsolidsilver;
border-radius:3em;
font-size:20px;
}
把容器左右两侧分别涂上不同的颜色：
.loader{
border-left-color:hotpink;
border-right-color:dodgerblue;
}
在容器中画一个小球：
.loader{
position:relative;
}
.loader::before{
content:'';
position:absolute;
top:0;
left:0;
width:3em;
height:3em;
border-radius:50%;
background-color:dodgerblue;
}
让小球在容器中往复移动：
.loader::before{
animation:shift3slinearinfinite;
}
@keyframesshift{
50%{
left:7em;
}
}
再让小球在撞到两端时变色：
.loader::before{
animation:
shift3slinearinfinite,
change-color3slinearinfinite;
}
@keyframeschange-color{
0%,55%{
background-color:dodgerblue;
}
5%,50%{
background-color:hotpink;
}
}
最后，让容器不停地旋转：
.loader{
animation:spin3slinearinfinite;
}
@keyframesspin{
to{
transform:rotate(360deg);
}
}
以上是“怎么使用纯CSS实现在容器中反弹的小球”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
