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 run –name [コンテナ名] [コンテナID...
データベース管理システムにおける同時実行制御のタスクは、データベース内の同じデータに同時にアクセスす...
目次序文undefined と null の混同紛らわしい数値の加算と文字列の連結戻り文の改行の問題...
序文このプロジェクトには、衛星測位用のグラフィックスを含むチャートの要件があり、北半球または南半球の...
Centos7はyumを使用してMySQLをインストールし、リモート接続を実現する方法です。MySQ...
この記事の例では、タブ効果を記述するためのJSの具体的なコードを参考までに共有しています。具体的な内...
序文みなさんこんにちは。CSS ウィザードの alphardex です。以前、海外のウェブサイトを閲...
justify-content:space-betweenレイアウトを使用する場合、要素の最後の行に...
実験環境ApacheとTomcatは両方ともIPアドレス192.168.153.136のホストにイン...
背景docker とアイデアを使用して、Java Web の開発、展開、運用までのプロセス全体を実現...
1. まずmysqlサービスを停止します管理者としてCMDを開いて閉じるか、Windowsサービスペ...
この記事では、スローモーションアニメーション効果を実現するためのJavaScriptの具体的なコード...
目次使用されるPygame関数スクリーンの作成ヘビの作成ヘビを動かすゲームオーバーの処理食事を増やす...
目次文章LOCKパラメータアルゴリズムパラメータCOPY TABLE プロセスIN-PLACEプロセ...
バックアップがあれば、非常に簡単です。最新のバックアップ データを生成し、mysqlbinlog を...