怎么使用纯CSS实现在容器中反弹的小球
小编给大家分享一下怎么使用纯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实现在容器中反弹的小球”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
