本文利用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個階段,在不同的階段運用顏色的透明度制作出不同的陰影效果。
新聞熱點
疑難解答