目次
HTML 部分
CSS スタイルとアニメーション
ホームページ ウェブフロントエンド CSSチュートリアル リンクホバーアニメーション効果を実現するCSS3 Cubic-Bezier()のメソッドの紹介

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

Dec 17, 2020 am 09:49 AM
css3 フロントエンド

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Nodeのメモリ制御に関する記事 Nodeのメモリ制御に関する記事 Apr 26, 2023 pm 05:37 PM

ノンブロッキングおよびイベント駆動に基づいて構築されたノード サービスには、メモリ消費量が少ないという利点があり、大量のネットワーク リクエストの処理に非常に適しています。大量のリクエストを前提として、「メモリ制御」に関する問題を考慮する必要があります。 1. V8 のガベージ コレクション メカニズムとメモリ制限 Js はガベージ コレクション マシンによって制御されます

Vue3 で単体テストを作成する方法を調べる Vue3 で単体テストを作成する方法を調べる Apr 25, 2023 pm 07:41 PM

Vue.js は、今日のフロントエンド開発において非常に人気のあるフレームワークとなっています。 Vue.js が進化し続けるにつれて、単体テストの重要性がますます高まっています。今日は、Vue.js 3 で単体テストを作成する方法を検討し、いくつかのベスト プラクティスと一般的な問題と解決策を提供します。

Node の File モジュールについて詳しく説明しましょう Node の File モジュールについて詳しく説明しましょう Apr 24, 2023 pm 05:49 PM

ファイル モジュールは、ファイルの読み取り/書き込み/開く/閉じる/削除の追加など、基礎となるファイル操作をカプセル化したものです。ファイル モジュールの最大の特徴は、すべてのメソッドが **同期** と ** の 2 つのバージョンを提供することです。 asynchronous**、sync サフィックスが付いているメソッドはすべて同期メソッドであり、持たないメソッドはすべて異種メソッドです。

PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ Mar 16, 2024 pm 12:09 PM

PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ 今日のインターネットの急速な発展の時代において、フロントエンド開発はますます重要になっています。 Web サイトやアプリケーションのエクスペリエンスに対するユーザーの要求がますます高まっているため、フロントエンド開発者は、より効率的で柔軟なツールを使用して、応答性の高いインタラクティブなインターフェイスを作成する必要があります。フロントエンド開発の分野における 2 つの重要なテクノロジーである PHP と Vue.js は、組み合わせることで完璧なツールと見なされます。この記事では、PHP と Vue の組み合わせと、読者がこれら 2 つをよりよく理解し、適用できるようにするための詳細なコード例について説明します。

クロスドメインの問題を解決するにはどうすればよいですか?一般的なソリューションの簡単な分析 クロスドメインの問題を解決するにはどうすればよいですか?一般的なソリューションの簡単な分析 Apr 25, 2023 pm 07:57 PM

クロスドメインは開発においてよく遭遇するシナリオであり、インタビューでもよく議論される問題でもあります。一般的なクロスドメイン ソリューションとその背後にある原則を習得すると、開発効率が向上するだけでなく、面接でのパフォーマンスも向上します。

フロントエンドの面接官からよく聞かれる質問 フロントエンドの面接官からよく聞かれる質問 Mar 19, 2024 pm 02:24 PM

フロントエンド開発のインタビューでは、HTML/CSS の基本、JavaScript の基本、フレームワークとライブラリ、プロジェクトの経験、アルゴリズムとデータ構造、パフォーマンスの最適化、クロスドメイン リクエスト、フロントエンド エンジニアリング、デザインパターン、新しいテクノロジーとトレンド。面接官の質問は、候補者の技術スキル、プロジェクトの経験、業界のトレンドの理解を評価するように設計されています。したがって、候補者はこれらの分野で自分の能力と専門知識を証明するために十分な準備をしておく必要があります。

ノードのバッファーについて詳しく見る ノードのバッファーについて詳しく見る Apr 25, 2023 pm 07:49 PM

当初、JS はブラウザ側でのみ動作していたため、Unicode でエンコードされた文字列の処理は簡単でしたが、バイナリ文字列や非 Unicode エンコード文字列の処理は困難でした。バイナリは、コンピュータのビデオ/オーディオ/プログラム/ネットワーク パッケージの最低レベルのデータ形式です。

フロントエンド開発に Go 言語を使用するにはどうすればよいですか? フロントエンド開発に Go 言語を使用するにはどうすればよいですか? Jun 10, 2023 pm 05:00 PM

インターネット技術の発展に伴い、フロントエンド開発の重要性がますます高まっています。特にモバイル デバイスの人気により、効率的で安定しており、安全で保守が容易なフロントエンド開発テクノロジーが必要です。 Go 言語は、急速に発展しているプログラミング言語として、ますます多くの開発者によって使用されています。では、フロントエンド開発に Go 言語を使用することは可能でしょうか?次に、この記事ではフロントエンド開発にGo言語を使用する方法を詳しく説明します。まずはフロントエンド開発にGo言語が使われる理由を見てみましょう。多くの人は Go 言語は

See all articles