基于當前位置的變換動畫（二）
- 前言
- 旋轉效果類元素動畫
- 搖擺動畫效果
- 效果預覽
- 代碼實現
- 搖晃動畫效果
- 效果預覽
- 代碼實現
- 螺旋旋轉
- 效果預覽
- 代碼實現
- 結語
前言
CSS元素動畫一般分為兩種：一種是元素基于當前位置的變換動畫，通過不明顯的位移、縮放等方式，實現動畫效果，如彈跳、閃爍、抖動等；另一種是元素基于頁面位置的變換動畫，通過位移、旋轉等方式，實現動畫效果，如飛入/飛出等。
基于當前位置的變換動畫，我又將根據動畫實現效果將其分為4類：
- 位移效果類：通過不明顯的位移，實現元素動畫效果，如：水平抖動、垂直抖動等。
- 旋轉效果類：通過小幅度旋轉，實現元素動畫效果，如元素搖擺、搖晃等。
- 縮放效果類：通過縮放，實現元素動畫效果，如脈沖效果、呼吸效果、心跳效果等。
- 透明度效果類：通過改變元素透明度，實現元素動畫效果，如閃爍效果。
在上一篇文章中，我們介紹了 位移效果類的相關元素動畫效果與代碼實現 ，本篇文章將介紹旋轉效果類的相關元素動畫效果與代碼實現。
旋轉效果類元素動畫
搖擺動畫效果
搖擺動畫效果：通過旋轉元素模擬鐘擺的搖擺效果，其效果圖如下所示：
效果預覽
代碼實現
<style>
/* 搖擺動畫效果 */
@keyframes swing {/* 元素開始和結束位置不變 */0%,100% {transform: rotate(0deg);}/* 左右交替旋轉，旋轉角度逐漸變小 */20% {transform: rotate(15deg);}40% {transform: rotate(-10deg);}60% {transform: rotate(5deg);}80% {transform: rotate(-5deg);}
}
.swing {display: inline-block;height: 100px;font-size: 100px;font-weight: bold;
}
.swing:hover {animation: swing 1s 1 ease-in-out;
}
</style><body><span class="swing">搖擺動畫</span>
</body>
搖晃動畫效果
搖晃動畫效果：通過位移和旋轉組合，模擬搖晃效果，其效果圖如下所示：
效果預覽
代碼實現
<style>
/* 搖晃動畫效果 */
@keyframes wobble {/* 元素開始和結束位置不變 */0%, 100% {transform: translate(0, 0);}/* 左右交替旋轉，角度逐漸變小 */15% {transform: translateX(-25%) rotateX( -5deg);}30% {transform: translateX(20%) rotateX( 3deg);}45% {transform: translateX(-15%) rotateX(-3deg);}60% {transform: translateX(10%) rotateX( 2deg);}75% {transform: translateX(-5%) rotateX(-1deg);}
}
.wobble {display: inline-block;height: 100px;font-size: 100px;font-weight: bold;
}
.wobble:hover {animation: wobble 1s 1 ease-in-out;
}
</style><body><span class="wobble">搖晃動畫</span>
</body>
螺旋旋轉
螺旋旋轉效果：元素360°旋轉并縮放，創建出動態的螺旋運動，其效果圖如下所示：
效果預覽
代碼實現
<style>
/* 螺旋旋轉效果 */
@keyframes spiral {0% {transform: rotate(0deg) scale(1);}50% {transform: rotate(180deg) scale(0.5);}100% {transform: rotate(360deg) scale(1);}
}
.spiral {padding: 100px 200px;display: inline-block;height: 100px;font-size: 100px;font-weight: bold;
}
.spiral:hover {animation: spiral 2s linear 1;
}
</style><body><span class="spiral">螺旋旋轉</span>
</body>
結語
本文主要介紹了幾種常見的旋轉效果類元素動畫，你還知道哪些旋轉效果類元素動畫？歡迎在評論區留言分享！
)
