css3實(shí)現(xiàn)橢圓軌跡旋轉(zhuǎn)的示例代碼
發(fā)布時(shí)間：2018-10-29 15:24:24 作者：啊姚 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了css3實(shí)現(xiàn)橢圓軌跡旋轉(zhuǎn)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
最近需要實(shí)現(xiàn)如下效果
最開始用css3D旋轉(zhuǎn)寫，只能實(shí)現(xiàn)如下效果
沒辦法把所有的圓轉(zhuǎn)向正面，不知道是我的操作不對(duì)，還是3d旋轉(zhuǎn)無法實(shí)現(xiàn)，有知道的大佬還請(qǐng)賜教啊
沒法用3d實(shí)現(xiàn)只能轉(zhuǎn)向2d了，只要實(shí)現(xiàn)按橢圓旋轉(zhuǎn)就ok了
X軸Y軸在一個(gè)矩形內(nèi)移動(dòng)
路徑為斜線
.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;}
}
設(shè)置動(dòng)畫延遲
設(shè)置Y軸延遲為動(dòng)畫時(shí)長(zhǎng)的一半，可以看到運(yùn)動(dòng)軌跡變成菱形了，有點(diǎn)感覺了
.ball {
animation:
animX 2s linear 0s infinite alternate,
animY 2s linear -1s infinite alternate
}
設(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
}
縮小放大
為了看起來有立體感添加scale屬性,scale動(dòng)畫應(yīng)該是X軸和Y軸的時(shí)間總和
.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)
}
}
大功告成！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這是一款實(shí)現(xiàn)js 3D旋轉(zhuǎn)木馬特效插件。該插件通過CSS3和純js來完成，可中間以3D旋轉(zhuǎn)的方式來展示一組圖片，歡迎下載2019-08-16微信小程序?qū)崿F(xiàn)可實(shí)時(shí)改變轉(zhuǎn)速的css3旋轉(zhuǎn)動(dòng)畫實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)可實(shí)時(shí)改變轉(zhuǎn)速的css3旋轉(zhuǎn)動(dòng)畫的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值2018-09-11- 本篇文章主要介紹了CSS3打造百度貼吧的3D翻牌效果示例，非常具有實(shí)用價(jià)值，有想去的可以了解一下。2017-01-04
CSS3實(shí)現(xiàn)簡(jiǎn)易版的刮刮樂效果
大家應(yīng)該都玩過刮刮樂，如何實(shí)現(xiàn)刮刮樂效果，這篇文章主要為大家詳細(xì)介紹了CSS3實(shí)現(xiàn)簡(jiǎn)易版的刮刮樂效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-27- 本文給大家分享的是一則使用原生CSS3實(shí)現(xiàn)的圖片翻牌效果，十分的炫酷，代碼卻很簡(jiǎn)單，這里推薦給有相同需求的小伙伴們。2015-03-10
css實(shí)現(xiàn)旋轉(zhuǎn)翻牌動(dòng)畫效果
本文通過實(shí)例代碼給大家介紹了css實(shí)現(xiàn)旋轉(zhuǎn)翻牌動(dòng)畫效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-10-09
