怎么使用純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實現在容器中反彈的小球”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！