首頁 > 文章 > web前端 > CSS動畫指南：手把手教你做眨眼特效

CSS動畫指南：手把手教你做眨眼特效

王林原創: 2023-10-20 15:24:301581瀏覽

CSS動畫指南：手把手教你做眨眼特效

CSS動畫指南：手把手教你製作眨眼特效

眨眼特效是一種常見的CSS動畫效果，透過簡單的程式碼實現，可以帶來生動獨特的效果。本文將為你提供一份手把手的指南，教你如何使用CSS製作眨眼特效，並提供具體的程式碼範例。

建立HTML結構

首先，我們需要建立一個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動畫效果。

參考資料：

[MDN Web 文件：CSS 動畫](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations)
[W3School：CSS3 動畫](https://www.w3school.com.cn/css3/css3_animation.asp)
[CSS3 Animation學習筆記](https://www.cnblogs .com/zxj159/p/6932713.html)

以上是CSS動畫指南：手把手教你做眨眼特效的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css css3 html 循环 transform animation https

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：CSS 佈局屬性最佳化技巧：position sticky 和 flexbox下一篇：CSS 佈局屬性最佳化技巧：position sticky 和 flexbox

看更多