css3實現橢圓軌跡旋轉的示例代碼

2024-07-11 08:31:35

字體：大中小

來源：轉載

供稿：網友

最近需要實現如下效果

最開始用css3D旋轉寫，只能實現如下效果

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

沒法用3d實現只能轉向2d了，只要實現按橢圓旋轉就ok了

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