CSS加載動畫已經成為了現代網站設計中的必備元素之一,而其中的蘋果動畫被眾多開發者所喜愛。本文將會介紹一種使用CSS制作的蘋果加載動畫實現方法。
.apple-loader{ display: inline-block; position: relative; width: 50px; height: 50px; } .apple-loader:before, .apple-loader:after{ content: ""; display: block; position: absolute; top: 0; left: 50%; width: 15px; height: 15px; margin-left: -8px; border-radius: 50%; background: #333; animation: apple-dual-ring 2s linear infinite; } .apple-loader:after{ animation-delay: -1s; } @keyframes apple-dual-ring{ 0%{ transform: scale(1) translateZ(0); } 100%{ transform: scale(1.5) translateZ(0); } }
使用上述代碼,我們可以得到一個寬高均為50px的蘋果加載動畫,其中蘋果由兩個同樣大小的圓環組成。在CSS中,我們使用:before
和:after
偽元素來分別處理這兩個圓環。我們給這兩個圓環添加了apple-dual-ring
關鍵幀動畫,使得它們可以不斷地進行縮放,形成了蘋果加載動畫的效果。
需要注意的是,我們使用了translateZ(0)
來開啟CSS的硬件加速。這可以避免造成動畫卡頓,提高用戶體驗。
總之,CSS加載動畫的應用讓網站更加生動、有趣。如果你有興趣,可以嘗試使用其他的圖案代替蘋果,創造出更加多彩的加載動畫效果。