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

animation屬性設置的參數：
       ● 設置對象所應用的動畫名稱：load5。
       ● 設置對象動畫的持續時間：1.1s。
       ● 設置對象動畫的過渡類型：
             ease：動畫以低速開始，然后加快，在結束前變慢。
             linear：勻速。
             ease-in：動畫以低速開始。
             ease-out：動畫以低速結束。
             ease-in-out：動畫以低速開始和結束，相對于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 函數中自己的值。可能的值是從 0 到 1 的數值。貝茲曲線限制了首尾兩控制點的位置，通過調整中間兩控制點的位置可以靈活得到常用的動畫效果。
        ● 設置對象動畫的循環次數：infinite（無限循環）。

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

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表