本文利用CSS實現(xiàn)大小相同、顏色深淺不一的粒子旋轉(zhuǎn)加載動畫，供大家參考，具體內(nèi)容如下。

animation屬性設置的參數(shù)：
       ● 設置對象所應用的動畫名稱：load5。
       ● 設置對象動畫的持續(xù)時間：1.1s。
       ● 設置對象動畫的過渡類型：
             ease：動畫以低速開始，然后加快，在結(jié)束前變慢。
             linear：勻速。
             ease-in：動畫以低速開始。
             ease-out：動畫以低速結(jié)束。
             ease-in-out：動畫以低速開始和結(jié)束，相對于ease緩慢，速度更均勻。
             step-start：按keyframes設置逐幀顯示，第一幀為keyframes設置的第一幀。
             step-end：按keyframes設置逐幀顯示，第一幀為樣式的初始值。
             steps(<number>[, [ start | end ] ]?)：把keyframes里設置的一幀等分為幾幀，start為第一次顯示第一幀，end第一次顯示樣式的初始值，例如：steps(4,start)。
             cubic-bezier(<number>, <number>, <number>, <number>)：在 cubic-bezier 函數(shù)中自己的值?？赡艿闹凳菑?0 到 1 的數(shù)值。貝茲曲線限制了首尾兩控制點的位置，通過調(diào)整中間兩控制點的位置可以靈活得到常用的動畫效果。
        ● 設置對象動畫的循環(huán)次數(shù)：infinite（無限循環(huán)）。

 將動畫運行整個過程的分為0%，12.5%，25%，37.5%，50%，62.5%，75%，87.5%，100%這8個階段，在不同的階段運用顏色的透明度制作出不同的陰影效果。

以上就是本文的全部內(nèi)容，希望對大家學習實現(xiàn)CSS粒子旋轉(zhuǎn)加載動畫有所啟發(fā)。

最新評論