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)文章
- 這是一款實現(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翻牌效果示例,非常具有實用價值,有想去的可以了解一下。2017-01-04
- 大家應該都玩過刮刮樂,如何實現(xiàn)刮刮樂效果,這篇文章主要為大家詳細介紹了CSS3實現(xiàn)簡易版的刮刮樂效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-27
- 本文給大家分享的是一則使用原生CSS3實現(xiàn)的圖片翻牌效果,十分的炫酷,代碼卻很簡單,這里推薦給有相同需求的小伙伴們。2015-03-10
- 本文通過實例代碼給大家介紹了css實現(xiàn)旋轉(zhuǎn)翻牌動畫效果,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2019-10-09