目次
HTML 部分
CSS スタイルとアニメーション
ホームページ ウェブフロントエンド CSSチュートリアル リンクホバーアニメーション効果を実現するCSS3 Cubic-Bezier()のメソッドの紹介

リンクホバーアニメーション効果を実現するCSS3 Cubic-Bezier()のメソッドの紹介

Dec 17, 2020 am 09:49 AM
css3 フロントエンド

リンクホバーアニメーション効果を実現するCSS3 Cubic-Bezier()のメソッドの紹介

CSS3 アニメーション トランジションを使用して、リンク上にマウスを置くと小さなポップアップが表示される、シンプルだが魅力的なリンク ホバー エフェクトを作成します。

また、CSS3 3 次ベジェ曲線 についても見ていきます。これは、ポップオーバーに硬い機械的な動きではなく、よりスムーズな動きを提供する CSS トランジションです。

(推奨チュートリアル: CSS ビデオ チュートリアル )

これが最終的な効果です:

リンクホバーアニメーション効果を実現するCSS3 Cubic-Bezier()のメソッドの紹介

それでは、始めましょう!

HTML 部分

#これはリンクの HTML であり、アイコンは iconfont.cn から取得されています。

<p>
  <section>
    <a>
      <i></i>
      <span>Instagram</span>
    </a>
    <a>
      <i></i>
      <span>Github</span>
    </a>
  </section>
</p>
ログイン後にコピー

リンクの上にマウスを置くと、span タグがポップアップ表示されます。次にCSSに入ります。

CSS スタイルとアニメーション

2 つのリンクが画面の中央に配置されるように、p コンテナーを中央に配置します。これにより、小さなポップアップがリンクの上部からポップアップするため、アニメーション化も簡単になります。

p.container {
  display: inline-block;
  position:absolute;
  top:50%;
  left:50%;
  -ms-transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}
ログイン後にコピー

次に、リンクのスタイルを設定し、単純な背景のホバー効果を作成し、ソーシャル メディア アイコンを配置します。

a {
  color:#fff;
  background: #8a938b;
  border-radius:4px;
  text-align:center;
  text-decoration:none;
  position: relative;
  display: inline-block;
  width: 120px;
  height: 100px;
  padding-top:12px;
  margin:0 2px;
  -o-transition:all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
   -webkit-font-smoothing: antialiased;
}a:hover {
  background: #5a665e;
}i{
  font-size: 45px;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  top: 20%;
}
ログイン後にコピー

次に、ポップアップ テキストのスタイルを設定し、アニメーション化します。

a span {
  color:#666;
  position:absolute;
  font-family: 'Chelsea Market', cursive;
  bottom:0;
  left:-15px;
  right:-15px;
  padding: 15px 7px;
  z-index:-1;
  font-size:14px;
  border-radius:5px;
  background:#fff;
  visibility:hidden;
  opacity:0;
  -o-transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}/* 当图标处于悬停状态时,文本将弹出 */
a:hover span {
  bottom: 130px;
  visibility:visible;
  opacity:1;
}
ログイン後にコピー

CSS3 3次ベジェ曲線は 4 つの点 p0p1p2 で構成されています。 p3 定義。点 p0 は曲線の始点であり、点 p3 は曲線の終点です。曲線が直線的であればあるほど、動きはより硬くなります (または滑らかではなくなります)。

ある点が最初にプラスで、次の点がマイナスの場合、最初は動きが遅くなります。ポイント値が前のポイント値よりも高くなると、動きが速くなります。

これは、CSS における Cubic-Bezier ポイントの意味です。アニメーションが短いので動きが微妙です。ポップオーバーは広場の下部からゆっくりと始まり、上部に向かって加速し始めます。

3 次ベジェ曲線遷移を使用しないアニメーションを作成することもできますが、アニメーションは次のように異なります。

3 次ベジェ曲線遷移を使用したアニメーション

リンクホバーアニメーション効果を実現するCSS3 Cubic-Bezier()のメソッドの紹介

#3 次ベジェ曲線遷移を使用しないアニメーション

リンクホバーアニメーション効果を実現するCSS3 Cubic-Bezier()のメソッドの紹介

ご覧のとおり、アニメーションによりホバー エフェクトに生命力が加わります。

CSS の最後のセットでは、ポップアップの下部にある小さな矢印のスタイルを設定します。 CSS で三角形を作成する方法の詳細については、この CSS ヒントの記事を参照してください。

概要

ミニマルなボタン スタイルのリンクを作成しました。リンクには基本的な背景ホバー効果がありますが、それだけではありません。リンクのテキストを表示する小さなポップアップを追加しました。 CSS3 Cubic-Bezier Sel カーブのおかげで、アニメーションはスムーズで目に心地よいものになっています。

この種の知識は、ソーシャル メディア アカウントを表示する Web サイトのデザインの一部として役立ちます。

この記事のサンプル デモと完全なコードについては、次のアドレスにアクセスしてください。PC で https://coding.zhanbing.site を開くことをお勧めします。

プログラミング関連の知識について詳しくは、

プログラミング入門

をご覧ください。 ! リンクホバーアニメーション効果を実現するCSS3 Cubic-Bezier()のメソッドの紹介

以上がリンクホバーアニメーション効果を実現するCSS3 Cubic-Bezier()のメソッドの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Nodeのメモリ制御に関する記事 Nodeのメモリ制御に関する記事 Apr 26, 2023 pm 05:37 PM

Nodeのメモリ制御に関する記事

Vue3 で単体テストを作成する方法を調べる Vue3 で単体テストを作成する方法を調べる Apr 25, 2023 pm 07:41 PM

Vue3 で単体テストを作成する方法を調べる

Node の File モジュールについて詳しく説明しましょう Node の File モジュールについて詳しく説明しましょう Apr 24, 2023 pm 05:49 PM

Node の File モジュールについて詳しく説明しましょう

PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ Mar 16, 2024 pm 12:09 PM

PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ

クロスドメインの問題を解決するにはどうすればよいですか?一般的なソリューションの簡単な分析 クロスドメインの問題を解決するにはどうすればよいですか?一般的なソリューションの簡単な分析 Apr 25, 2023 pm 07:57 PM

クロスドメインの問題を解決するにはどうすればよいですか?一般的なソリューションの簡単な分析

フロントエンドの面接官からよく聞かれる質問 フロントエンドの面接官からよく聞かれる質問 Mar 19, 2024 pm 02:24 PM

フロントエンドの面接官からよく聞かれる質問

ノードのバッファーについて詳しく見る ノードのバッファーについて詳しく見る Apr 25, 2023 pm 07:49 PM

ノードのバッファーについて詳しく見る

フロントエンド開発に Go 言語を使用するにはどうすればよいですか? フロントエンド開発に Go 言語を使用するにはどうすればよいですか? Jun 10, 2023 pm 05:00 PM

フロントエンド開発に Go 言語を使用するにはどうすればよいですか?

See all articles