CSS アニメーション ガイド: 点滅効果の作成方法を段階的に説明します
点滅効果は、簡単なコードで実現できる一般的な CSS アニメーション効果です。 、鮮やかさとユニークな効果をもたらすことができます。この記事では、CSS を使用して瞬き効果を作成する方法について、具体的なコード例とともに段階的に説明します。
まず、点滅効果を表示するための 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 デザインに適用できるようになることを願っています。
参考:
以上がCSS アニメーション ガイド: 点滅効果を作成する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
