CSS 畫圖基礎：實際案例應用與動畫效果
更新日期： 2024 年 11 月 12 日
CSS 不僅可以用來設置網頁樣式，還能創造出各種圖形和動畫效果。
透過設定圓形、邊框、旋轉效果和關鍵影格，我們可以實現更豐富的視覺效果。
以下將介紹幾個基礎的 CSS 畫圖技巧，包括繪製圓形、四分之一圓形、旋轉效果，以及模擬雲朵和閃電的動畫效果。
基本圓形繪製
範例：繪製一個圓形
CSS 可以透過 border-radius 設置元素的圓角，當元素的寬度與高度相等並且 border-radius 設為 50% 時，該元素就會顯示為一個圓形。
HTML 和 CSS 代碼如下：
<div class="box">
<div class="item"></div>
</div>* {
padding: 0;
margin: 0;
}
.box {
width: 200px;
height: 200px;
background: #000;
position: absolute;
inset: 0;
margin: auto;
border-radius: 50%;
}此代碼創建了一個 200px × 200px 的黑色圓形。
繪製四分之一圓形
範例：設置四分之一圓形的 border-radius
要繪製四分之一圓形，可以只讓元素的一個角變圓，這樣保留了其他三個角的直線。
設置 border-radius 如下：
.box {
width: 200px;
height: 200px;
background: #000;
position: absolute;
inset: 0;
margin: auto;
border-radius: 200px 0 0 0;
}這段代碼中的 border-radius: 200px 0 0 0; 表示僅對左上角設定圓角半徑為 200px，而其餘三個角的圓角半徑設為 0。
這樣的設置會讓左上角變為圓滑的弧形，而其餘角則保持直線，從而形成四分之一圓的效果。
這是因為 border-radius 可以針對四個角進行單獨的圓角設置，順序為：左上角、右上角、右下角和左下角。
在這裡，左上角的圓角半徑設定為 200px，剛好等於元素的寬度或高度，這使得左上角形成四分之一圓的弧形，而其他角則保持直線邊緣，最終呈現出四分之一圓的形狀。
使用動畫製作旋轉效果
透過 @keyframes 和 transform: rotate 可以實現簡單的旋轉動畫。
將旋轉效果應用於一個圓形，可以產生動態效果。
範例：簡單的旋轉動畫
HTML 和 CSS 代碼如下：
<div class="box"></div>.box {
width: 150px;
height: 150px;
position: absolute;
inset: 0;
margin: auto;
border-radius: 50%;
border-left: 10px solid #000;
border-right: 10px solid #000;
animation: rotate 1s infinite;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}此代碼會讓 .box 元素以 1 秒的周期順時針旋轉，並持續播放。
增加內圈旋轉效果
我們還可以在旋轉的外圓內添加一個小的內圈，使旋轉效果更具層次感：
<div class="box1"></div>
<div class="box2"></div>.box1 {
width: 150px;
height: 150px;
position: absolute;
inset: 0;
margin: auto;
border-radius: 50%;
border-left: 10px solid #000;
border-right: 10px solid #000;
animation: rotate 1s infinite;
}
.box2 {
width: 0;
height: 0;
border-bottom: 20px solid #000;
border-top: 20px solid #000;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
position: absolute;
inset: 0;
margin: auto;
border-radius: 50%;
animation: rotate 1s infinite;
}這樣可以在 .box1 外圈的基礎上，添加一個不完全的內圈，並且同時進行旋轉，產生有趣的效果。
使用 steps 設定逐格動畫
若希望旋轉呈現逐格動畫的效果，可以在 animation 中使用 steps 函數：
.box2 {
animation: rotate 1s infinite steps(5, end);
}這樣會將旋轉分為 5 個明顯的步驟，形成卡頓的逐格效果。
繪製雲朵效果
使用 CSS 可以製作雲朵形狀。這裡我們使用多個圓形來模擬雲的不同部分，並將這些圓形擺放成雲朵的形狀。
<div class="box">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>* {
padding: 0;
margin: 0;
}
.box {
width: 50px;
height: 50px;
position: absolute;
inset: 0;
margin: auto;
}
.circle {
width: 100px;
height: 100px;
background: #81c7d4;
position: absolute;
border-radius: 50%;
}
.circle:first-child {
top: -50px;
left: -50px;
}
.circle:nth-child(2) {
top: -52px;
left: 20px;
}
.circle:nth-child(3) {
bottom: -52px;
left: -90px;
}
.circle:nth-child(4) {
bottom: -72px;
left: -10px;
}
.circle:nth-child(5) {
bottom: -53px;
right: -100px;
}此代碼利用多個圓形的相對位置擺放，組合成一個雲朵效果。可以依據需要調整圓形的位置和大小，來達到不同的雲朵形狀。
模擬閃電動畫效果
在雲朵基礎上添加閃電動畫效果，可以讓雲朵看起來更具動態感。
透過 ::before 和 ::after 生成閃電形狀，並使用 @keyframes 來創建閃爍效果。
.box::before,
.box::after {
width: 0;
height: 0;
position: absolute;
content: "";
animation: lightColor 3s infinite;
}
.box::before {
border-bottom: #e9cd4c solid 50px;
border-left: transparent solid 20px;
bottom: -120px;
}
.box::after {
border-top: #e9cd4c solid 50px;
border-right: transparent solid 20px;
bottom: -159px;
left: 15px;
}
@keyframes lightColor {
0%, 49.99% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}這段代碼的 @keyframes 使用了 49.99% 的不透明度控制，以確保閃電效果在動畫過程中能瞬間切換，以避免重疊閃電時出現較深的顏色。
總結
透過 CSS 的 border-radius、@keyframes、position 等屬性，我們可以簡單實現各種圖形與動畫效果。
以上介紹了圓形、四分之一圓形的基礎繪製方法，以及模擬雲朵和閃電的動畫技巧。
透過這些方法，可以製作生動的圖案並賦予動畫效果，進而豐富網頁的視覺效果。