CSS3是一種用于樣式表的語言,可以使用它實現(xiàn)許多網(wǎng)頁效果,包括網(wǎng)頁加載動畫。
要創(chuàng)建網(wǎng)頁加載動畫,我們可以使用CSS3中的@keyframes規(guī)則。該規(guī)則允許我們定義動畫中不同時間點的樣式。
.loader { border: 16px solid #f3f3f3; border-top: 16px solid #3498db; border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
以上代碼定義了一個圓形加載動畫。.loader類設置了邊框和大小,以及spin動畫的屬性。
spin動畫被定義為一個@keyframes規(guī)則。它指定了從0%到100%的動畫過程,使用rotate轉換實現(xiàn)了旋轉效果。
要將動畫應用到網(wǎng)頁元素上,只需使用animation屬性。在此示例中,我們將.spin動畫應用于.loader類,并設置了2秒的持續(xù)時間和無窮循環(huán)。
除了旋轉效果,CSS3還支持許多其他類型的加載動畫。我們可以使用過渡、變換和動畫函數(shù)來創(chuàng)建不同的效果。
總之,CSS3是一個非常有用的工具,可以幫助我們實現(xiàn)許多網(wǎng)頁效果,包括加載動畫。使用@keyframes規(guī)則和animation屬性,我們可以輕松地創(chuàng)建許多吸引人的動畫效果。
上一篇css3 縮放特效
下一篇css3 繞軌道轉動