この記事では、サンプルメニューを使用してCSS3を使用してエフェクトを作成するためのいくつかのトリックを紹介したいと思います。 アイデアは単純に要素を構成することです。アイコン、メイン名、セカンダリ名は、ホバーするとCSSトランジションとCSSアニメーションのみを使用してアニメーション化されます。 要素のいくつかの異なる効果を見ていきます。
デモで使用されるアイコンは、 Webシンボルフォントです。 Just Be Niceによって作成されたフォント。
HTMLマークアップ
HTMLメニュー構造は、各要素がリンクである順不同リストになります。このリストには、アイコン付きのスパンと、一次および二次名を持つdivが含まれます。
< ul class ="ca-menu" >
< li >
< a href ="#" >
< span class ="ca-icon" > A </ span >
< div class ="ca-content" >
< h2 class ="ca-main" > </ h2 >
< h3 class ="ca-sub" > </ h3 >
</ div >
</ a >
</ li >
...
</ ul >
* This source code was highlighted with Source Code Highlighter .
アイコンにはフォントを使用しているため、アイコンに対応する文字を書きます。
CSS
一般的なスタイルでは、すべての例で文字フォントの接続があります：
@font-face { font-family: 'WebSymbolsRegular'; src: url('websymbols/websymbols-regular-webfont.eot'); src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('websymbols/websymbols-regular-webfont.woff') format('woff'), url('websymbols/websymbols-regular-webfont.ttf') format('truetype'), url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); font-weight: normal; font-style: normal; }
ファイルパスはCSSファイルに相対的であるため、css / websymbols /フォルダーに配置されます。
文字フォントを使用する大きな利点は、たとえば影付きのテキストなど、さまざまな美しい効果を適用できることです。 ニーズに合わせてストレッチすることもできます。
箇条書きリストのスタイルは各例でほぼ同じです。幅を調整するだけです。
.ca-menu{ padding: 0; margin: 20px auto; width: 500px; }
次の例では、エフェクトが適用される要素のスタイルを示します。 最初の例では、すべての要素のスタイルを見て、残りの部分では違いに注目します。
注：次の例では、CSSを煩雑にしたくないため、各ブラウザーのプレフィックスを記述しませんが、デモファイルで必要なプレフィックスをすべて検索します。
例1
この例では、要素のサイズと各アイテムの背景色を変更する垂直メニューを見ていきます。
リスト項目のスタイルを定義しましょう：
.ca-menu li{ width: 500px; height: 100px; overflow: hidden; display: block; background: #fff; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); margin-bottom: 4px; border-left: 10px solid #000; transition: all 300ms ease-in-out; } .ca-menu li:last-child{ margin-bottom: 0px; }
境界線の色と背景色を変更するため、遷移はすべてのプロパティに対して行われます。
アイテムリンクのスタイルは次のとおりです。
.ca-menu li a{ text-align: left; display: block; width: 100%; height: 100%; color: #333; position:relative; }
個々の要素のスタイルを定義しましょう。 スパンアイコンのスタイルは次のとおりです。
.ca-icon{ font-family: 'WebSymbolsRegular', cursive; font-size: 20px; text-shadow: 0px 0px 1px #333; line-height: 90px; position: absolute; width: 90px; left: 20px; text-align: center; transition: all 300ms linear; }
ご覧のとおり、Webシンボルをフォントファミリとして使用します。 各文字はアイコンになります。
コンテンツアイテムのラッパーのスタイルは次のとおりです。
.ca-content{ position: absolute; left: 120px; width: 370px; height: 60px; top: 20px; }
要素の内容は、フォントサイズによって異なり、線形に移行します。
.ca-main{ font-size: 30px; transition: all 300ms linear; } .ca-sub{ font-size: 14px; color: #666; transition: all 300ms linear; }
そして今、最も興味深い部分です。 リスト項目にカーソルを合わせると、フォントサイズと色が変更されます。
.ca-menu li:hover{ border-color: #fff004; background: #000; } .ca-menu li:hover .ca-icon{ color: #fff004; text-shadow: 0px 0px 1px #fff004; font-size: 50px; } .ca-menu li:hover .ca-main{ color: #fff004; font-size: 14px; } .ca-menu li:hover .ca-sub{ color: #fff; font-size: 30px; }
これらの各要素の遷移を定義したため、変更は「アニメーション化」されます。
例2
2番目の例では、コンテンツ要素にアニメーションを追加します。 アイデアは、それらを上下に復活させることです。
.ca-menu li:hover{ background: #e1f0fa; } .ca-menu li:hover .ca-icon{ font-size: 40px; color: #259add; opacity: 0.8; text-shadow: 0px 0px 13px #fff; } .ca-menu li:hover .ca-main{ opacity: 1; color:#2676ac; animation: moveFromTop 300ms ease-in-out; } .ca-menu li:hover .ca-sub{ opacity: 1; animation: moveFromBottom 300ms ease-in-out; }
2つのアニメーションを定義しましょう。 1つ目は、対応する要素をY軸に沿って200％下に挿入することから始まります。つまり、下に移動します。 さらに、透明度は0になります。次に、translateYを0％に変更してアニメーション化します。
@keyframes moveFromBottom { from { opacity: 0; transform: translateY(200%); } to { opacity: 1; transform: translateY(0%); } }
2番目のアニメーションは、同じ原則に従って要素を上に移動します。
@keyframes moveFromTop { from { opacity: 0; transform: translateY(-200%); } to { opacity: 1; transform: translateY(0%); } }
例3
この例では、ホバー時にテキストの背景と色を変更します。 また、アイコンを回転して拡大します。 これを行うには、トランジションを使用し、アイコンのフォントサイズを大きくします。
.ca-menu li:hover{ background-color: #000; } .ca-menu li:hover .ca-icon{ color: #f900b0; font-size: 120px; opacity: 0.2; left: -20px; transform: rotate(20deg); } .ca-menu li:hover .ca-main{ color: #f900b0; opacity: 0.8; } .ca-menu li:hover .ca-sub{ color: #fff; opacity: 0.8; }
例4
例4〜8では、異なるメニューレイアウトを使用します。 要素は隣同士に配置されます。
.ca-menu li{ width: 200px; height: 300px; overflow: hidden; position: relative; float: left; border: 5px solid #fff; background: #e2f0ff; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); margin-right: 4px; transition: all 300ms linear; } .ca-menu li:last-child{ margin-right: 0px; }
アイコンは、アイテムの中央の上部に配置されます。
.ca-icon{ font-family: 'WebSymbolsRegular', cursive; color: #c5e4f4; font-size: 90px; text-shadow: 1px 0px 1px rgba(255,255,255,0.7); line-height: 150px; position: absolute; width: 100%; height: 50%; left: 0px; top: 0px; text-align: center; transition: all 200ms linear; }
コンテンツラッパーは、要素の下部に配置されます。
.ca-content{ position: absolute; left: 0px; width: 100%; height: 50%; top: 50%; }
プライマリヘッダーとセカンダリヘッダーのスタイルは次のとおりです。
.ca-main{ font-size: 30px; color: #005382; opacity: 0.8; text-align: center; transition: all 200ms linear; } .ca-sub{ text-align:center; font-size: 14px; color: #666; line-height: 40px; opacity: 0.8; transition: all 200ms linear; }
ホバーすると、アイコンがぼやけ、背景色が変更され、コンテンツ要素が上下に移動します。
.ca-menu li:hover{ background-color: #fff; } .ca-menu li:hover .ca-icon{ text-shadow: 0px 0px 20px #c5e4f4; color: transparent; animation: moveFromTop 400ms ease; } .ca-menu li:hover .ca-main{ color: #000; animation: moveFromTop 300ms ease; } .ca-menu li:hover .ca-sub{ color: #000; animation: moveFromBottom 500ms ease; }
アイコンのぼかしは、色を透明に設定し、多くのぼかしで影を作成すると発生します。
アニメーションは、moveFromTopアニメーションの値を変換することを除いて、前の例のいずれかで使用したものと同じです。 ここでは、translateYを-300％に設定します。
例5
5番目の例では、左側にアイコンを、右側に名前を、下に2番目の名前を表示します。
.ca-menu li:hover{ background:#fff; } .ca-menu li:hover .ca-icon{ color: #afa379; font-size: 90px; opacity: 0.1; animation: moveFromLeft 400ms ease; } .ca-menu li:hover .ca-main{ color: #afa379; animation: moveFromRight 300ms ease; } .ca-menu li:hover .ca-sub{ color: #000; animation: moveFromBottom 500ms ease; }
アニメーションmoveFromBottomはすでにわかっています。moveFromLeftを見てみましょう。moveFromLeftは、対応する要素を左に移動し、translateXを-100％に設定してから、元の位置に戻します。
@keyframes moveFromLeft{ from { transform: translateX(-100%); } to { transform: translateX(0%); } }
moveFromRightアニメーションでは、translateX（100％）を最初に設定します。
実施例6
この例では、名前を左側にスライドさせ、同時に回転させます。
.ca-menu li:hover{ background-color: #000; } .ca-menu li:hover .ca-icon{ color: #fff; font-size: 90px; } .ca-menu li:hover .ca-main{ color: #00ccff; animation: moveFromLeftRotate 300ms ease; } .ca-menu li:hover .ca-sub{ color: #fff; animation: moveFromBottom 500ms ease; }
moveFromLeftRotateアニメーションは、アイテムを移動して回転させます。
@keyframes moveFromLeftRotate{ from { transform: translateX(-100%) rotate(-90deg); } to { transform: translateX(0%) rotate(0deg); } }
実施例7
この例では、要素の下部に背景名を設定します。
.ca-sub{ text-align:center; font-size: 14px; color: #666; line-height: 40px; opacity: 0.8; position: absolute; bottom: 0; width: 100%; transition: all 200ms linear; }
名前を下にスライドさせ、背景色も変更します。 アイコンは下から移動しますが、メイン名は増加します：
.ca-menu li:hover{ background-color: #000; } .ca-menu li:hover .ca-icon{ color: #ff2020; animation: moveFromBottom 300ms ease; } .ca-menu li:hover .ca-main{ color: #ff2020; animation: smallToBig 300ms ease; } .ca-menu li:hover .ca-sub{ color: #000; background-color: #ff2020; animation: moveFromBottom 500ms ease; }
smallToBigアニメーションは、変換の使用方法の例です。
@keyframes smallToBig{ from { transform: scale(0.1); } to { transform: scale(1); } }
例8
この例では、ホバー時にリストアイテム全体を拡大します。 これを行うには、1.1にスケーリングします。
ID #heartアイコンの特別なスパンもあります。 このスパンは赤になり、ホバー時にsmallToBigアニメーションを特別な方法で使用します：アニメーションを際限なく交互にし、鼓動する心臓の効果を作成します。
.ca-menu li:hover{ background-color: #000; z-index:999; transform: scale(1.1); } .ca-menu li:hover .ca-icon{ color: #ccff00; font-size: 90px; opacity:0.3; } .ca-menu li:hover .ca-icon#heart{ animation: smallToBig 900ms alternate infinite ease; } .ca-menu li:hover .ca-main{ color: #ccff00; animation: smallToBig 300ms ease; } .ca-menu li:hover .ca-sub{ color: #ccff00; animation: moveFromBottom 500ms ease; }
実施例9
最後の2つの例は円で囲まれているため、リストアイテムのスタイルを変更します。
.ca-menu li{ width: 230px; height: 230px; border: 10px solid #f6f6f6; overflow: hidden; position: relative; float:left; background: #fff; margin-right: 4px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); border-radius: 125px; transition: all 400ms linear; }
円を作成するには、border-radiusを要素の外側の幅/高さの半分に設定する必要があります。
ホバリング時に次のことを行います。
.ca-menu li:hover{ background: #f7f7f7; border-color: #fff; transform: rotate(360deg); } .ca-menu li:hover .ca-icon{ color: #555; font-size: 60px; } .ca-menu li:hover .ca-main{ display: none; } .ca-menu li:hover .ca-sub{ opacity: 0.8; }
アイテムは360度回転し、メイン名が消えて、セカンダリ名が表示されます（透明度は最初0に設定されていました）。
例10
最後の例では、リスト項目の左マージンは-48pxになります。 これにより、オーバーラップが可能になります。 次に、ホバー時に、それらをスケーリングし、z-indexを増やして、アクティブなアイテムが上になるようにします。
.ca-menu li:hover{ border-color: #333; z-index: 999; transform: scale(1.1); } .ca-menu li:hover .ca-icon{ color: #000; font-size: 60px; text-shadow: 0px 0px 1px #000; animation: moveFromBottom 300ms ease; } .ca-menu li:hover .ca-main{ color: #000; animation: moveFromBottom 500ms ease; }
それだけです！ これらの小さな実験を楽しんで、それらが役立つことを願っています！
このアニメーションとトランジションは、Google Chrome、Apple Safari、Opera、Mozilla Firefoxなどの真に最新のWebブラウザーの最新バージョンでのみ機能することに注意してください。
例を含むファイルをダウンロードします。