[css3]CSS3ベジェ曲線サンプル:リンクホバーアニメーション効果の作成
CSS3アニメーショントランジションを使って、リンクにマウスを乗せると小さなポップアップボックスが現れるという、シンプルながら説得力のあるリンクホバー効果を作ってみましょう。
また、CSS3 Cubic-Bezier曲線も見ていきます。これは、硬い機械的な動きではなく、ポップアップボックスに滑らかな動きを提供するCSSトランジションです。
これが最終的な結果です。
さあ、はじめましょう
HTMLセクション
これはリンク先のHTMLで、iconfont.co.ukのアイコンを使用しています。
<div class="container">
<section>
<a href="#">
<i class="fab fa-instagram"></i>
<span>Instagram</span>
</a>
<a href="#">
<i class="fab fa-github"></i>
<span>Github</span>
</a>
</section>
</div>
リンクにカーソルを合わせると、spanタグがポップアップボックスになります。次に、CSSに移ります。
CSSスタイルとアニメーション
2つのリンクを画面の中央に配置するため、divコンテナを中央寄せにしました。これにより、小さなポップアップボックスがリンクの上部からポップアップするため、アニメーション化も容易になります。
div.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 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.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 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
} /* Text will pop up when the icon is on hover */
a:hover span {
bottom: 130px;
visibility: visible;
opacity: 1;
}
CSS3のCubic-Bezier曲線は、4つの点p0, p1, p2, p3で定義されます。p0点は曲線の始点で、p3点は曲線の終点である。曲線が直線的であればあるほど、動作はより硬く(または流動的に)なります。
ある点のスタートがプラスで、次の点がマイナスだと、最初はゆっくりした動きになります。点の値が前の点の値より高くなると、動きが速くなる。
これがCSSのキュービックベジェポイントの意味するところです。短いアニメーションなので、動きも微妙です。ポップアップボックスは、正方形の下部からゆっくりと始まり、上部に向かって加速し始めます。
Cubic-Bezier曲線の遷移を用いないアニメーションも作成可能ですが、その場合は以下のような違いがあります。
キュービックベジェ曲線による遷移を利用したアニメーション
Cubic-Bezier曲線遷移を使用しないアニメーション
ご覧のように、このアニメーションはホバー効果に生命力を与えています。
最後のCSSは、ポップアップ・ボックスの下部にある小さな矢印のスタイルを設定するものです。CSSで三角形を作る方法については、CSS tipsの記事を参照してください。
概要
ミニマルなボタン型リンクを作成しました。このリンクは基本的な背景のホバー効果を持っていますが、私たちはそれだけにとどまりませんでした。小さなポップアップボックスを追加して、リンクのテキストを表示するようにしました。CSS3のCubic-Bezier selvageの助けを借りて、アニメーションは滑らかで気持ちの良いものとなっています。
このような知識は、ソーシャルメディアのアカウントを表示するためのウェブサイトデザインの一部として、非常に有効です。
この記事のサンプルデモと全コードは、以下のアドレスにあります。PCで開くことをお勧めします。 https://coding.zhanbing.site
上記はCSS3 Bezier Curveの例です:リンクホバーアニメーション効果の詳細を作成し、CSS3 Bezier Curveについての詳細な情報は、スクリプトハウスの他の関連記事に注意してください!.
関連
-
[CSSチュートリアル】CSSのトリッキーなグラデーションで高度な背景光アニメーションの感覚を実現
-
[css3]CSS3タブアニメーションの背景切り替えの動的効果例
-
[Div+CSSチュートリアル】divの背景を透明にする設定例
-
[CSSチュートリアル】ホバードロップダウンメニュー方式を実現するCSS
-
[css3] css3の擬似クラスについて、共通使用前と共通使用後で説明する。
-
[css3]CSS3アニメーションによるグラフィックドロップ効果
-
[CSSチュートリアル】CSSのラインハイトとハイトを詳しく解説
-
[CSSチュートリアル]cssで背景画像の上にテキストを実現する
-
css3]アニメーションとトランジションの違いについて
-
[CSSチュートリアル]純粋なCSSは、効果を引き出すために、ページ内のリストを達成するために
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】カットコーナー+ボーダー+プロジェクション+コンテンツ背景色のグラデーション効果を実現するCSS
-
[CSSチュートリアル】 css border add four corners コード
-
[CSSチュートリアル】CSSで2カラムレイアウトを実現するN種類のメソッド
-
[CSSチュートリアル】position:stickyでトップ吸い上げアプレット問題を完璧に解決
-
[CSSチュートリアル】CSSカウンターを使った数字の並びの美化方法
-
[css3]スクロールバー美化効果を実現するcss3サンプルコード
-
[CSSチュートリアル】インタビュー必見!聖杯レイアウトとダブルウィングレイアウトの違いとは?
-
[css3]CSS3アニメーションによる光のボタンの流れの効果
-
[css3]css3によるフレックスレイアウト幅の解決方法が有効でない件
-
原理を説明するためにいくつかの方法の虫眼鏡効果の模倣で[css3]css3