小編給大家分享一下怎么使用純CSS實現(xiàn)在容器中反彈的小球，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)主營松陽網站建設的網絡公司,主營網站建設方案,成都APP應用開發(fā),松陽h5微信小程序定制開發(fā)搭建,松陽網站營銷推廣歡迎松陽等地區(qū)企業(yè)咨詢
代碼解讀
定義dom，只有一個元素：
居中顯示：
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實現(xiàn)在容器中反彈的小球”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
重慶分公司
重慶分公司
