需求1.實現元素沿橢圓軌跡均勻旋轉
2.滑鼠點選事件、移入暫停運動
3.元素由遠到近逐漸增大
網上關於css3實現旋轉的案例很多，我也是借鑑別人方法，這裡不細說直接上**，通過css3實現的旋轉動畫存在乙個小問題，旋轉元素是，在運動過程中會發生抖動現象，後來嘗試用svg動畫解決了此問題，具體內容見《svg實現沿橢圓軌跡旋轉動畫》
class="container">class="animate">
class="ball ball1">
>1>
>
class="ball ball2">
>2>
>
class="ball ball3">
>3>
>
class="ball ball4">
>4>
>
class="ball ball5">
>5>
>
class="ball ball6">
>6>
>
>
>
/* 旋轉動畫 */.animate
@keyframes animx
100%
}@keyframes animy
100%
}@keyframes scale
50%
100%
}.ball
.ball img:hover
.ball img
/* 6個圖x和y軸動畫加起來是18s , 18s/6 等於 3s
每個球y軸動畫延遲 從0遞減3s,x軸與y軸相差動畫時長的一半（9s/2） */
.ball1
.ball2
.ball3
.ball4
.ball5 {
animation: animx 9s cubic-bezier(0.36, 0
旋轉卡片css3
css3旋轉卡片 在網上找了一些資料自己寫了乙個旋轉兩面卡片 先是結構部分 css部分 container 通過定位將兩個疊在一起，並通過z index讓正面顯示在前，img.front back contain hover front和.container hover front選 擇器能讓hov...
css 圍繞橢圓軌跡旋轉
設定動畫延遲 設定三次貝塞爾曲線 設定x軸延遲為動畫時長的一半,放大縮小，scale動畫應該是x軸和y軸的時間總和,scale動畫延遲等於x軸的動畫延時 circle1例子橢圓上有5個圓在運動，x軸和y軸的動畫延時設定 circle1 circle2 circle3 circle4 circle5x...
css3動畫方塊旋轉
html translate x,y 基於原來的位置，沿x軸平移，長度為x，沿2軸平移，長度為ytransform translate x,y translatex x 基於原來的位置，沿x軸平移，長度為xtransform translatex x translatey y 基於原來的位置,沿y軸...