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

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 の他の関連記事に注目してください。

<<:  さまざまな解像度やブラウザでウェブページを適切に表示する方法

>>:  SQL 実践演習: オンライン モール データベース ユーザー情報データ操作

推薦する

Docker コンテナは実行後に終了します (実行を継続する方法)

現象Dockerコンテナを起動する docker run –name [コンテナ名] [コンテナID...

MySQL における楽観的ロックと悲観的ロックの例

データベース管理システムにおける同時実行制御のタスクは、データベース内の同じデータに同時にアクセスす...

JavaScript初心者がよく犯す間違い

目次序文undefined と null の混同紛らわしい数値の加算と文字列の連結戻り文の改行の問題...

CSS 極座標のサンプルコード

序文このプロジェクトには、衛星測位用のグラフィックスを含むチャートの要件があり、北半球または南半球の...

Centos7 に yum を使用して MySQL をインストールし、リモート接続を実現する方法

Centos7はyumを使用してMySQLをインストールし、リモート接続を実現する方法です。MySQ...

JS でタブ効果を書く

この記事の例では、タブ効果を記述するためのJSの具体的なコードを参考までに共有しています。具体的な内...

three.js で 3D ダイナミック テキスト効果を実現する方法

序文みなさんこんにちは。CSS ウィザードの alphardex です。以前、海外のウェブサイトを閲...

css3 flexレイアウト justify-content:space-between 最後の行は左揃えになります

justify-content:space-betweenレイアウトを使用する場合、要素の最後の行に...

ApacheとTomcatを組み合わせて静的状態と動的状態を分離する方法

実験環境ApacheとTomcatは両方ともIPアドレス192.168.153.136のホストにイン...

Dockerイメージを素早くデプロイして実行する最新のIDEAプロセスの詳細な説明

背景docker とアイデアを使用して、Java Web の開発、展開、運用までのプロセス全体を実現...

Windows 10 システムで Mysql8.0.13 のルート パスワードを忘れる方法

1. まずmysqlサービスを停止します管理者としてCMDを開いて閉じるか、Windowsサービスペ...

スローモーションアニメーション効果を実現するJavaScript

この記事では、スローモーションアニメーション効果を実現するためのJavaScriptの具体的なコード...

スネークゲームを作るための Pygame コード

目次使用されるPygame関数スクリーンの作成ヘビの作成ヘビを動かすゲームオーバーの処理食事を増やす...

MySQLオンラインDDLの使用に関する詳細な説明

目次文章LOCKパラメータアルゴリズムパラメータCOPY TABLE プロセスIN-PLACEプロセ...

MySQL で誤って削除したテーブル データを回復する方法 (必読)

バックアップがあれば、非常に簡単です。最新のバックアップ データを生成し、mysqlbinlog を...