如何使用css3實現(xiàn)橢圓軌跡旋轉(zhuǎn)

這篇文章主要介紹如何使用css3實現(xiàn)橢圓軌跡旋轉(zhuǎn)，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

css3實現(xiàn)橢圓軌跡旋轉(zhuǎn)

最近需要實現(xiàn)如下效果

最開始用css3D旋轉(zhuǎn)寫，只能實現(xiàn)如下效果

沒辦法把所有的圓轉(zhuǎn)向正面，不知道是我的操作不對，還是3d旋轉(zhuǎn)無法實現(xiàn)，有知道的大佬還請賜教啊

沒法用3d實現(xiàn)只能轉(zhuǎn)向2d了，只要實現(xiàn)按橢圓旋轉(zhuǎn)就ok了

1、X軸Y軸在一個矩形內(nèi)移動

路徑為斜線

 .ball {
    animation: 
      animX 2s linear  infinite alternate,
      animY 2s linear  infinite alternate
  }
@keyframes animX{
	  0% {left: 0px;}
	100% {left: 500px;}
}
@keyframes animY{
	  0% {top: 0px;}
	100% {top: 300px;}
}

2、設(shè)置動畫延遲

設(shè)置Y軸動畫延遲為動畫時長的一半（延遲設(shè)為負數(shù)動畫開始不會有延遲空白，感興趣的同學可以試試正數(shù)延遲），可以看到運動軌跡變成菱形了，有點感覺了

 .ball {
    animation: 
      animX 2s linear 0s infinite alternate,
      animY 2s linear -1s infinite alternate
  }

3、設(shè)置三次貝塞爾曲線

 .ball {
    animation: 
      animX 2s  cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
      animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate
  }

4、縮小放大

為了看起來有立體感添加scale屬性,scale動畫應該是X軸和Y軸的時間總和

 .ball1 {
    animation: 
      animX 2s  cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
      animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
      scale 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
  }
 @keyframes scale {

    0% {
      transform: scale(0.7)
    }
    50% {
      transform: scale(1)
    }
    100% {
      transform: scale(0.7)
   }
 }

以上是“如何使用css3實現(xiàn)橢圓軌跡旋轉(zhuǎn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！