CSS アニメーションガイド: 点滅効果を作成する方法を段階的に説明します。-CSSチュートリアル-php.cn

CSS アニメーションガイド: 点滅効果を作成する方法を段階的に説明します。

王林

リリース： 2023-10-20 15:24:30

オリジナル

1554 人が閲覧しました

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 アニメーション効果を Web デザインに適用できるようになることを願っています。

参考:

[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 アニメーション学習ノート](https://www.cnblogs . com/zxj159/p/6932713.html)

以上がCSS アニメーションガイド: 点滅効果を作成する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。