1. ホーム
  2. Web制作
  3. CSS

[css3]CSS3ベジェ曲線サンプル:リンクホバーアニメーション効果の作成

2022-02-02 07:57:47

CSS3アニメーショントランジションを使って、リンクにマウスを乗せると小さなポップアップボックスが現れるという、シンプルながら説得力のあるリンクホバー効果を作ってみましょう。

また、CSS3 Cubic-Bezier曲線も見ていきます。これは、硬い機械的な動きではなく、ポップアップボックスに滑らかな動きを提供するCSSトランジションです。

これが最終的な結果です。

さあ、はじめましょう

HTMLセクション

これはリンク先のHTMLで、iconfont.co.ukのアイコンを使用しています。

<div class="container">
  <section>
    <a href="#">
      <i class="fab fa-instagram"></i>
      <span>Instagram</span>
    </a>
    <a href="#">
      <i class="fab fa-github"></i>
      <span>Github</span>
    </a>
  </section>
</div>

リンクにカーソルを合わせると、spanタグがポップアップボックスになります。次に、CSSに移ります。

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

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

div.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 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.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 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
} /* Text will pop up when the icon is on hover */
a:hover span {
  bottom: 130px;
  visibility: visible;
  opacity: 1;
}

CSS3のCubic-Bezier曲線は、4つの点p0, p1, p2, p3で定義されます。p0点は曲線の始点で、p3点は曲線の終点である。曲線が直線的であればあるほど、動作はより硬く(または流動的に)なります。

ある点のスタートがプラスで、次の点がマイナスだと、最初はゆっくりした動きになります。点の値が前の点の値より高くなると、動きが速くなる。

これがCSSのキュービックベジェポイントの意味するところです。短いアニメーションなので、動きも微妙です。ポップアップボックスは、正方形の下部からゆっくりと始まり、上部に向かって加速し始めます。

Cubic-Bezier曲線の遷移を用いないアニメーションも作成可能ですが、その場合は以下のような違いがあります。

キュービックベジェ曲線による遷移を利用したアニメーション

Cubic-Bezier曲線遷移を使用しないアニメーション

ご覧のように、このアニメーションはホバー効果に生命力を与えています。

最後のCSSは、ポップアップ・ボックスの下部にある小さな矢印のスタイルを設定するものです。CSSで三角形を作る方法については、CSS tipsの記事を参照してください。

概要

ミニマルなボタン型リンクを作成しました。このリンクは基本的な背景のホバー効果を持っていますが、私たちはそれだけにとどまりませんでした。小さなポップアップボックスを追加して、リンクのテキストを表示するようにしました。CSS3のCubic-Bezier selvageの助けを借りて、アニメーションは滑らかで気持ちの良いものとなっています。

このような知識は、ソーシャルメディアのアカウントを表示するためのウェブサイトデザインの一部として、非常に有効です。

この記事のサンプルデモと全コードは、以下のアドレスにあります。PCで開くことをお勧めします。 https://coding.zhanbing.site

上記はCSS3 Bezier Curveの例です:リンクホバーアニメーション効果の詳細を作成し、CSS3 Bezier Curveについての詳細な情報は、スクリプトハウスの他の関連記事に注意してください!.