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

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

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

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

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

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

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 つの点 p0、p1、p2、 で構成されています。 p3 定義。点 p0 は曲線の始点であり、点 p3 は曲線の終点です。曲線が直線的であればあるほど、動きはより硬くなります (または滑らかではなくなります)。

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

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

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

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

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

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

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

概要

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

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

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

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

プログラミング入門

をご覧ください。 ！

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