小編給大家分享一下怎么使用純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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
