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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)實(shí)現(xiàn)CSS粒子旋轉(zhuǎn)加載動(dòng)畫有所啟發(fā)。

最新評(píng)論