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

青灯夜游
リリース: 2020-12-17 09:49:54
転載
2439 人が閲覧しました

リンクホバーアニメーション効果を実現する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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート