近年來,CSS3動畫的應用已經越來越廣泛。我們可以利用CSS3動畫讓網頁更加生動、更加豐富,提升用戶體驗。接下來,我分享一個圖片圓環的CSS3動畫案例。
.pic-circle { display: flex; justify-content: center; align-items: center; height: 200px; width: 200px; position: relative; } .pic-circle:before { content: ""; display: block; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%; position: absolute; border: 3px solid white; z-index: 1; animation: spin 2s linear infinite; } .pic-circle img { position: relative; z-index: 2; border-radius: 50%; width: 150px; height: 150px; box-shadow: 1px 1px 10px #888888; } @keyframes spin { from{ transform: rotate(0deg); } to { transform: rotate(360deg); } }
以上是案例的CSS部分。我們通過偽類:before添加了一個白色的圓環。同時,我們在偽類:before上應用了2s的spin動畫,實現了圓環無限旋轉的效果。圖像則位于圓環之上,通過box-shadow屬性添加陰影效果。
最終我們的HTML部分只需簡單地包含一個pic-circle類來應用CSS3動畫。
<div class="pic-circle"> <img src="your-image.jpg"> </div>
以上是整個案例的關鍵點。希望這個例子能夠為你帶來一些CSS3動畫的靈感。