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次ベジェ曲線遷移アニメーション