CSS3 アニメーション トランジションを使用して、リンク上にマウスを置くと小さなポップアップが表示される、シンプルだが魅力的なリンク ホバー エフェクトを作成します。
また、CSS3 3 次ベジェ曲線 についても見ていきます。これは、ポップオーバーに硬い機械的な動きではなく、よりスムーズな動きを提供する CSS トランジションです。
(推奨チュートリアル: CSS ビデオ チュートリアル )
これが最終的な効果です:
それでは、始めましょう!
#これはリンクの HTML であり、アイコンは iconfont.cn から取得されています。
<p> <section> <a> <i></i> <span>Instagram</span> </a> <a> <i></i> <span>Github</span> </a> </section> </p>
リンクの上にマウスを置くと、span タグがポップアップ表示されます。次に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 つの点 p0、p1、p2、 で構成されています。 p3 定義。点 p0 は曲線の始点であり、点 p3 は曲線の終点です。曲線が直線的であればあるほど、動きはより硬くなります (または滑らかではなくなります)。
ある点が最初にプラスで、次の点がマイナスの場合、最初は動きが遅くなります。ポイント値が前のポイント値よりも高くなると、動きが速くなります。
これは、CSS における Cubic-Bezier ポイントの意味です。アニメーションが短いので動きが微妙です。ポップオーバーは広場の下部からゆっくりと始まり、上部に向かって加速し始めます。
3 次ベジェ曲線遷移を使用しないアニメーションを作成することもできますが、アニメーションは次のように異なります。
3 次ベジェ曲線遷移を使用したアニメーション
#3 次ベジェ曲線遷移を使用しないアニメーション ご覧のとおり、アニメーションによりホバー エフェクトに生命力が加わります。 CSS の最後のセットでは、ポップアップの下部にある小さな矢印のスタイルを設定します。 CSS で三角形を作成する方法の詳細については、この CSS ヒントの記事を参照してください。 概要ミニマルなボタン スタイルのリンクを作成しました。リンクには基本的な背景ホバー効果がありますが、それだけではありません。リンクのテキストを表示する小さなポップアップを追加しました。 CSS3 Cubic-Bezier Sel カーブのおかげで、アニメーションはスムーズで目に心地よいものになっています。 この種の知識は、ソーシャル メディア アカウントを表示する Web サイトのデザインの一部として役立ちます。 この記事のサンプル デモと完全なコードについては、次のアドレスにアクセスしてください。PC で https://coding.zhanbing.site を開くことをお勧めします。
プログラミング関連の知識について詳しくは、
プログラミング入門をご覧ください。 !
以上がリンクホバーアニメーション効果を実現するCSS3 Cubic-Bezier()のメソッドの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。