用 CSS 動畫制作 2D 動畫是一種簡單而有效的實現動畫的方法。在這篇文章中,我們將介紹如何使用 CSS 動畫來制作簡單的 2D 動畫。
CSS 動畫是一種基于 CSS 樣式的動畫,可以通過 CSS 中的動畫屬性來控制動畫的速度和方向。我們可以使用 CSS 動畫來創建旋轉、縮放、平移、移出等效果。
首先,我們需要在 HTML 中添加一個動畫盒子,用來展示我們的動畫效果。我們可以使用 `<div>` 標簽來創建一個動畫盒子,并在盒子內部添加我們需要的動畫效果。
```html
<div class="動畫盒子">
<div class="動畫內容">
<!-- 動畫內容 -->
</div>
</div>
接下來,我們需要設置 CSS 樣式來控制動畫效果。我們可以使用 CSS 的 `@keyframes` 規則來定義動畫的keyframes,并在keyframes 中添加動畫效果。
```css
.動畫盒子 {
width: 200px;
height: 200px;
border: 1px solid #ccc;
margin: 0 auto;
.動畫內容 {
width: 80px;
height: 80px;
background-color: #fff;
animation: rotate 1s linear infinite;
@keyframes rotate {
0% {
transform: rotate(0deg);
100% {
transform: rotate(360deg);
在這個例子中,我們定義了一個名為 `rotate` 的 keyframe,用于控制旋轉效果。根據 keyframe 的規則,當 `transform` 屬性的值由 `rotate(0deg)` 變為 `rotate(360deg)` 時,動畫就會開始。
通過使用 CSS 動畫,我們可以輕松地創建出復雜的 2D 動畫效果。我們可以將多個 `<div>` 標簽添加到動畫盒子中,并使用 CSS 動畫來控制它們的速度、方向和旋轉角度,從而實現各種不同的動畫效果。