CSS動畫指南：手把手教你製作眨眼特效
眨眼特效是一種常見的CSS動畫效果，透過簡單的程式碼實現，可以帶來生動獨特的效果。本文將為你提供一份手把手的指南，教你如何使用CSS製作眨眼特效，並提供具體的程式碼範例。
首先，我們需要建立一個HTML結構，用來展示眨眼特效。程式碼如下：
<!DOCTYPE html>
<html>
<head>
<title>眨眼特效</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="eye-container">
<div class="eye">
<div class="eyelid"></div>
<div class="pupil"></div>
</div>
</div>
</body>
</html>在上述程式碼中，我們使用了一個.eye-container來包裹眼睛的容器。然後，我們在容器內部創建了一個.eye作為眼睛的外觀，同時包含了上眼皮和瞳孔。
接下來，我們需要在style.css檔案中設定基本樣式，為眼睛元素添加一些基本樣式。程式碼如下：
.eye-container {
position: relative;
width: 100px;
height: 100px;
}
.eye {
position: relative;
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 50%;
overflow: hidden;
}
.eyelid {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 50%;
background-color: #000;
transition: transform 0.2s ease-in-out;
}
.pupil {
position: absolute;
top: 50%;
left: 0;
width: 50%;
height: 50%;
background-color: #000;
border-radius: 50%;
transform: translate(25%, 25%);
transition: transform 0.2s ease-in-out;
}在上述程式碼中，我們為眼睛的容器.eye-container設定了寬度和高度，並指定了它的位置為相對定位。然後，我們為眼睛元素.eye設定了寬度和高度，以及背景色和圓角樣式。同時，我們也為上眼皮.eyelid和瞳孔.pupil設定了寬度、高度、背景色和過渡效果。
現在，我們要為眼睛加上眨眼的動畫效果。我們可以透過CSS的關鍵影格動畫來實現這一效果。程式碼如下：
@keyframes blink {
0% {
transform: scaleY(1);
}
100% {
transform: scaleY(0.1);
}
}
.eye:hover .eyelid {
animation: blink 0.4s 0.1s infinite alternate;
}
.eye:hover .pupil {
animation: blink 0.4s 0.1s infinite alternate-reverse;
}在上述程式碼中，我們定義了一個名為blink的關鍵影格動畫。動畫在0%的時候，眼睛的上眼皮保持原樣；在100%的時候，上眼皮透過transform: scaleY(0.1)將其縮小至0.1倍。
同時，我們在.eye:hover .eyelid和.eye:hover .pupil中應用了這個動畫。當滑鼠停留在眼睛元素上時，上眼皮和瞳孔都會套用動畫效果，透過animation屬性指定動畫名稱、持續時間、延遲時間和循環方式。
最後，我們將效果呈現給使用者。在瀏覽器中開啟HTML文件，你會看到一個具有眨眼特效的眼睛。當滑鼠懸停在眼睛上方時，眼睛的上眼皮和瞳孔會不斷開合，形成眨眼的效果。
透過這個簡單的CSS動畫指南，我們手把手地教你製作眨眼特效。希望這個指南對你有幫助，讓你在網頁設計上能套用出獨特有趣的CSS動畫效果。
參考資料：
以上是CSS動畫指南：手把手教你做眨眼特效的詳細內容。更多資訊請關注PHP中文網其他相關文章！
