CSS3加載版是一種應用CSS3技術實現的網頁加載效果。它能夠為用戶帶來非常炫酷的視覺效果,同時也提高了網頁的用戶體驗,讓訪問者感到更有趣、更流暢,特別是在低網速情況下加載速度更快。
/* CSS代碼 */ .loader { margin: auto; width: 40px; height: 40px; position: relative; } .loader div { position: absolute; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation-timing-function: cubic-bezier(0, 1, 1, 0); } .loader div:nth-child(1) { left: 0; animation: lds-ellipsis1 0.6s infinite; } .loader div:nth-child(2) { left: 0; animation: lds-ellipsis2 0.6s infinite; } .loader div:nth-child(3) { left: 16px; animation: lds-ellipsis2 0.6s infinite; } .loader div:nth-child(4) { left: 32px; animation: lds-ellipsis3 0.6s infinite; } @keyframes lds-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes lds-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(16px, 0); } }
以上是CSS3加載版的代碼,通過復制代碼并粘貼到你的CSS文件中便可以使用。仔細分析可以發現,該代碼在使用了animation屬性及關鍵幀動畫技術的前提下,基于四個圓圈內外動畫的閉環設計讓整個加載效果從視覺上更顯得流暢,同時,我們可以根據自己的需求更改顏色和大小以及動畫的時間等。
最后,值得一提的是,CSS3加載版僅是CSS3技術的冰山一角,CSS3還擁有更多的強大屬性以及各種有趣的應用效果,在CSS3時代不斷地發掘更多的技巧,將會使我們的工作變得愉悅而高效。