欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css3實現(xiàn)橢圓軌跡旋轉(zhuǎn)的示例代碼

  發(fā)布時間：2018-10-29 15:24:24   作者：啊姚   我要評論
這篇文章主要介紹了css3實現(xiàn)橢圓軌跡旋轉(zhuǎn)的示例代碼，小編覺得挺不錯的，現(xià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了

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

設置動畫延遲

設置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)
   }
 }

大功告成！

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • js+CSS3 3D旋轉(zhuǎn)木馬特效插件

    這是一款實現(xiàn)js 3D旋轉(zhuǎn)木馬特效插件。該插件通過CSS3和純js來完成，可中間以3D旋轉(zhuǎn)的方式來展示一組圖片，歡迎下載
    2019-08-16

  • 微信小程序?qū)崿F(xiàn)可實時改變轉(zhuǎn)速的css3旋轉(zhuǎn)動畫實例代碼

    這篇文章主要給大家介紹了關(guān)于微信小程序如何實現(xiàn)可實時改變轉(zhuǎn)速的css3旋轉(zhuǎn)動畫的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值
    2018-09-11

  • CSS3打造百度貼吧的3D翻牌效果示例

    本篇文章主要介紹了CSS3打造百度貼吧的3D翻牌效果示例，非常具有實用價值，有想去的可以了解一下。
    2017-01-04

  • CSS3實現(xiàn)簡易版的刮刮樂效果

    大家應該都玩過刮刮樂，如何實現(xiàn)刮刮樂效果，這篇文章主要為大家詳細介紹了CSS3實現(xiàn)簡易版的刮刮樂效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-09-27

  • 純css3實現(xiàn)圖片翻牌特效

    本文給大家分享的是一則使用原生CSS3實現(xiàn)的圖片翻牌效果，十分的炫酷，代碼卻很簡單，這里推薦給有相同需求的小伙伴們。
    2015-03-10

  • css實現(xiàn)旋轉(zhuǎn)翻牌動畫效果

    本文通過實例代碼給大家介紹了css實現(xiàn)旋轉(zhuǎn)翻牌動畫效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
    2019-10-09

最新評論