這篇文章將為大家詳細講解有關使用css3怎么實現一個橢圓軌跡旋轉，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

創新互聯是一家集網站建設,秦都企業網站建設,秦都品牌網站建設,網站定制,秦都網站建設報價,網絡營銷,網絡優化,秦都網站推廣為一體的創新建站企業，幫助傳統企業提升企業形象加強企業競爭力。可充分滿足這一群體相比中小企業更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們為更多的企業打造出實用型網站。

X軸Y軸在一個矩形內移動

路徑為斜線

 .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;}
}

設置動畫延遲

設置Y軸延遲為動畫時長的一半，可以看到運動軌跡變成菱形了，有點感覺了

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

設置三次貝塞爾曲線

 .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
  }

縮小放大

為了看起來有立體感添加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怎么實現一個橢圓軌跡旋轉就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網站標題：使用css3怎么實現一個橢圓軌跡旋轉
本文來源：http://m.newbst.com/article30/gdespo.html

成都網站建設公司_創新互聯，為您提供定制網站、Google、面包屑導航、網站維護、網站營銷、網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯