怎么使用純CSS實(shí)現(xiàn)在容器中反彈的小球

小編給大家分享一下怎么使用純CSS實(shí)現(xiàn)在容器中反彈的小球，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　代碼解讀

　　定義dom，只有一個(gè)元素：

　　<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;

　　}

　　把容器左右兩側(cè)分別涂上不同的顏色：

　　.loader{

　　border-left-color:hotpink;

　　border-right-color:dodgerblue;

　　}

　　在容器中畫一個(gè)小球：

　　.loader{

　　position:relative;

　　}

　　.loader::before{

　　content:'';

　　position:absolute;

　　top:0;

　　left:0;

　　width:3em;

　　height:3em;

　　border-radius:50%;

　　background-color:dodgerblue;

　　}

　　讓小球在容器中往復(fù)移動：

　　.loader::before{

　　animation:shift3slinearinfinite;

　　}

　　@keyframesshift{

　　50%{

　　left:7em;

　　}

　　}

　　再讓小球在撞到兩端時(shí)變色：

　　.loader::before{

　　animation:

　　shift3slinearinfinite,

　　change-color3slinearinfinite;

　　}

　　@keyframeschange-color{

　　0%,55%{

　　background-color:dodgerblue;

　　}

　　5%,50%{

　　background-color:hotpink;

　　}

　　}

　　最后，讓容器不停地旋轉(zhuǎn)：

　　.loader{

　　animation:spin3slinearinfinite;

　　}

　　@keyframesspin{

　　to{

　　transform:rotate(360deg);

　　}

　　}

以上是“怎么使用純CSS實(shí)現(xiàn)在容器中反彈的小球”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！