CSS3 ベジェ曲線の例: リンクホバーアニメーション効果の作成

CSS3 アニメーション トランジションを使用して、リンクの上にマウスを移動すると小さなポップアップが表示される、シンプルでありながら魅力的なリンク ホバー効果を作成します。

また、CSS3 キュービックベジェ曲線についても見ていきます。これは、ポップアップに硬直した機械的な動きではなく、より滑らかな動きを与える CSS トランジションです。

これが最終結果です:

さあ始めましょう！

HTML部分

これはリンクの HTML です。アイコンは iconfont.cn からのものです。

<div class="コンテナ">
  <セクション>
    <a href="#">
      <i class="fab fa-instagram"></i>
      インスタグラム
    </a>
    <a href="#">
      <i class="fab fa-github"></i>
      ギットハブ
    </a>
  </セクション>
</div>

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

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

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

div.コンテナ{
  表示: インラインブロック;
  位置: 絶対;
  上位: 50%;
  左: 50%;
  -ms-transform: 変換(-50%、-50%);
  -webkit-transform: translate(-50%, -50%);
  変換: translate(-50%, -50%);
}

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

{
  色: #fff;
  背景: #8a938b;
  境界線の半径: 4px;
  テキスト配置: 中央;
  テキスト装飾: なし;
  位置: 相対的;
  表示: インラインブロック;
  幅: 120ピクセル;
  高さ: 100px;
  上部パディング: 12px;
  マージン: 0 2px;
  -o-transition: すべて 0.5 秒;
  -webkit-transition: すべて 0.5 秒;
  -moz-transition: すべて 0.5 秒;
  遷移: すべて 0.5 秒;
  -webkit-font-smoothing: アンチエイリアス;
}
ホバー{
  背景: #5a665e;
}
私 {
  フォントサイズ: 45px;
  垂直位置合わせ: 中央;
  表示: インラインブロック;
  位置: 相対的;
  上位: 20%
}

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

スパンの
  色: #666;
  位置: 絶対;
  フォントファミリー: 「Chelsea Market」、筆記体;
  下部: 0;
  左: -15px;
  右: -15px;
  パディング: 15px 7px;
  Zインデックス: -1;
  フォントサイズ: 14px;
  境界線の半径: 5px;
  背景: #fff;
  可視性: 非表示;
  不透明度: 0;
  -o-transition: すべて 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: すべて 0.5 秒 cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: すべて 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  遷移: すべて 0.5 秒 cubic-bezier(0.68, -0.55, 0.265, 1.55);
} /* アイコンがホバー状態になると、テキストがポップアップ表示されます */
a:hover スパン {
  下部: 130px;
  可視性: 可視;
  不透明度: 1;
}

CSS3 3 次ベジェ曲線は、4 つの点 p0、p1、p2、p3 によって定義されます。点 p0 は曲線の開始点であり、点 p3 は曲線の終了点です。曲線が直線的であればあるほど、動きは硬くなり（滑らかさが失われ）、

ある点が正で始まり、次の点が負の場合、最初は動きが遅くなります。ポイント値が前のポイント値よりも高くなると、動きが速くなります。

これは CSS における 3 次ベジェ点の意味です。アニメーションが短いので動きは微妙です。ポップアップは正方形の下部からゆっくりと始まり、上部に向かって速度を上げていきます。

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

3次ベジェ曲線遷移アニメーション

3次ベジェ曲線遷移アニメーションなし

ご覧のとおり、アニメーションによりホバー効果に活気が加わります。

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

要約する

ミニマルなボタンスタイルのリンクを作成しました。リンクには基本的な背景ホバー効果がありますが、それだけではありません。リンクのテキストを表示するための小さなポップアップ ボックスを追加しました。 CSS3 3 次ベジェ曲線の助けにより、アニメーションはスムーズで心地よいものになります。

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

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

上記は、CSS3 ベジェ曲線の例の詳細です。リンクホバーアニメーション効果を作成します。CSS3 ベジェ曲線の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。