本篇文章要介紹如何使用 CSS 創建一個簡單的「動態笑臉」，當滑鼠懸停時，笑臉的嘴部會改變角度，模擬出從微笑到稍微傷心再回到微笑的動畫效果

HTML

創建一個 smiley 容器，包含兩個眼睛和一個嘴巴

<div class="smiley">
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="mouth"></div>
</div>

• smiley ： 整個笑臉的容器
• eye ： 左眼和右眼，分別使用 left 和 right 進行定位
• mouth ： 笑臉的嘴巴部分，會在懸停時變化

CSS

1. 設定頁面樣式

使用 Flexbox 將頁面內容居中，確保笑臉位於畫面正中央

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

2. 笑臉樣式

設定 smiley 容器的大小和外觀，變成一個圓形並居中顯示，並添加一個過渡效果

.smiley {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #ffcc00; 
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease; 
}

• border-radius : 讓笑臉變成圓形
• transition ： 當笑臉的表情變化時，添加平滑的過渡效果，持續時間為0.5秒
  • ease : 代表動畫開始時比較慢，中間加速，結束時又減速

3. 眼睛和嘴巴樣式

設定眼睛和嘴巴的具體樣式和位置，讓笑臉擁有基本的五官

.eye {
    width: 15px;
    height: 15px;
    background-color: black;
    border-radius: 50%;
    position: absolute;
}

.left {
    left: 30px;
    top: 30px;
}

.right {
    right: 30px;
    top: 30px;
}

.mouth {
    position: absolute;
    left: 10px;
    bottom: 20px;
    width: 80px;
    height: 100px;
    border: 2.5px solid transparent;
    border-bottom-color: #000;
    border-radius: 50%;
    box-sizing: border-box;
}

• eye ： 設置兩個眼睛的大小和顏色，並通過 left 和 right 將它們分別定位在笑臉的左右
• mouth ： 設置嘴巴為圓弧形，利用邊框的底部顏色創建笑臉的弧線效果
  • border : 設置一個 2.5px 寬的邊框，顏色為透明，顯示部分邊框的效果
  • border-bottom-color : 將邊框底部的顏色設置為黑色，因邊框的其餘部分是透明的，所以只會顯示黑色底部邊框，形成微笑的弧線
  • box-sizing : 確保寬度和高度會包括邊框的大小，讓嘴巴的寬度和高度不會因為添加邊框而變得更大

4. 懸停時的表情變化

當滑鼠懸停在笑臉上時，通過動畫來改變嘴巴的角度，模擬表情的變化

.smiley:hover .mouth {
   animation: changeExpression 1s forwards; 
}

• hover：當滑鼠懸停在笑臉上時，觸發嘴巴的動畫效果
• animation：當觸發 :hover 時，開始應用 changeExpression 這個動畫，持續 1 秒
  • forwards : 動畫完成後元素保持最後的動畫狀態

5. 定義動畫

使用 @keyframes 定義笑臉嘴巴從微笑到稍微傷心再回到微笑的動畫過程

@keyframes changeExpression {
   0% {
       transform: rotate(0deg); 
   }
   50% {
       transform: rotate(-30deg); 
   }
   100% {
       transform: rotate(0deg); 
   }
}

• 0%： 一開始呈現微笑狀態
• 50% ： 旋轉到 rotate(-30deg)，形成稍微傷心的表情
• 100% ： 再次旋轉回 rotate(0deg)，回到初始的微笑狀態

結果呈現