CSS3實(shí)現(xiàn)超慢速移動(dòng)動(dòng)畫效果非常流暢無(wú)卡頓

字號(hào):


    圖片
    三角碎片以非常緩慢的速度旋轉(zhuǎn)移動(dòng),如果使用JS實(shí)現(xiàn)會(huì)出現(xiàn)一像素一像素移動(dòng)的卡頓
    使用CSS3會(huì)獲得非常理想的效果
    代碼如下:
    transform: translate3d(80px, 150px, 0px) rotate(1220deg);
    transition: transform 30s linear 0s;
    上面一個(gè)屬性表示圖像變換
    translate3d(80px, 150px, 0px) 表示X軸偏移80px, Y軸偏移150px
    rotate(1220deg) 表示在此過(guò)程中旋轉(zhuǎn)1220°
    transition: transform 30s linear 0s;
    表示動(dòng)畫時(shí)間30秒
    速度方式:linear
    延遲0s