CSS トランジションを使用した円形ホバー効果のサンプルコード

CSS トランジションを使用した円形ホバー効果のサンプルコード

この記事では

ソースコードのオンラインプレビューとダウンロード

今日のチュートリアルでは、円のホバー効果を試してみます。 border-radius プロパティを使用すると円形を作成できるため、Web サイトでデザイン要素として頻繁に使用されるようになりました。 私が特に気に入っている使用法の 1 つは、円形のサムネイルです。これは通常の長方形よりも興味深く見えます。 円は非常に特殊な形状なので、特別なホバー効果を作成します。

このチュートリアルではブラウザのプレフィックスは省略します。 もちろん、ダウンロード ファイルにも含まれています。

それでは、始めましょう！

HTML構造

ほとんどの例では、次の構造を使用します。

<ul class="ch-grid">
	<li>
		<div class="ch-item ch-img-1">
			<div class="ch-info">
				<h3>持っているものを活用する</h3>
				<p>Angela Duncan 著 <a href="http://drbl.in/eOPF">Dribbble で見る</a></p>
			</div>
		</div>
	</li>
	<li>
		<div class="ch-item ch-img-2">
			<div class="ch-info">
				シミの一般的な原因
				<p>Antonio F. Mondragon 著 <a href="http://drbl.in/eKMi">Dribbble で見る</a></p>
			</div>
		</div>
	</li>
	<li>
		<div class="ch-item ch-img-3">
			<div class="ch-info">
				<h3>ピンクライトニング</h3>
				<p>Charlie Wagers 著 <a href="http://drbl.in/ekhp">Dribbble で見る</a></p>
			</div>
		</div>
	</li>
</ul>

ここで画像を使用することもできますが、背景画像を使用することでより多くのオプションが得られます。 これらを「ch-img-」で始まるクラスで定義します。

では、ホバー効果を作ってみましょう。

CSS スタイル

リストとリスト項目の一般的なスタイルをいくつか定義しましょう。

.ch-グリッド{
	マージン: 20px 0 0 0;
	パディング: 0;
	リストスタイル: なし;
	表示: ブロック;
	テキスト配置: 中央;
	幅: 100%;
}

.ch-grid:後、
.ch-item:before {
	コンテンツ： '';
    表示: テーブル;
}

.ch-grid:after {
	クリア: 両方;
}

.ch-grid li {
	幅: 220ピクセル;
	高さ: 220px;
	表示: インラインブロック;
	マージン: 20px;
}

いくつかの例は構造が異なりますが、それぞれを詳しく見ていきます。

例1

最初の例では、説明を拡大縮小して表示し、「.ch-item」の内側の影もアニメーション化します。 それでは、「.ch-item」を配置して、適切な内側の影とトランジションを適用してみましょう。

.ch-アイテム{
	幅: 100%;
	高さ: 100%;
	境界線の半径: 50%;
	オーバーフロー: 非表示;
	位置: 相対的;
	カーソル: デフォルト;
	ボックスシャドウ: 
		インセット 0 0 0 16px rgba(255,255,255,0.6),
		0 1px 2px rgba(0,0,0,0.1);
	遷移: すべて 0.4 秒のイーズイン アウト。
}

すでにお気づきかもしれませんが、リスト項目に 2 つのクラスを指定しました。1 つは ch-item で、もう 1 つは特定の背景画像を定義するために使用されます。

.ch-img-1 { 
	背景画像: url(../images/1.jpg);
}

.ch-img-2 { 
	背景画像: url(../images/2.jpg);
}

.ch-img-3 { 
	背景画像: url(../images/3.jpg);
}

「.ch-info」は絶対位置に配置され、RGBA 値を設定して半透明の背景を与えます。 不透明度は 0 に設定され、スケールも 0 に縮小されます。

.ch-info {
	位置: 絶対;
	背景: rgba(63,147,147, 0.8);
	幅: 継承;
	高さ: 継承;
	境界線の半径: 50%;
	オーバーフロー: 非表示;
	不透明度: 0;
	遷移: すべて 0.4 秒のイーズイン アウト。
	変換: スケール(0);
}

タイトルにはパディングとマージンが設けられ、テキストの影も滑らかになります。

.ch-info h3 {
	色: #fff;
	テキスト変換:大文字;
	文字間隔: 2px;
	フォントサイズ: 22px;
	マージン: 0 30px;
	パディング: 45px 0 0 0;
	高さ: 140px;
	フォントファミリ: 'Open Sans'、Arial、サンセリフ;
	テキストシャドウ: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

p 要素の不透明度は 0 で、トランジション (ホバー時にフェードインしますが、遅延あり) を設定します。

.ch-info p {
	色: #fff;
	パディング: 10px 5px;
	フォントスタイル: 斜体;
	マージン: 0 30px;
	フォントサイズ: 12px;
	上境界線: 1px実線 rgba(255,255,255,0.5);
	不透明度: 0;
	遷移: すべて 1 秒、ease-in-out 0.4 秒。
}

リンクには大文字を使用し、ホバーの色を黄色に設定します。

.ch-info pa {
	表示: ブロック;
	色: rgba(255,255,255,0.7);
	フォントスタイル: 通常;
	フォントの太さ: 700;
	テキスト変換:大文字;
	フォントサイズ: 9px;
	文字間隔: 1px;
	パディング上部: 4px;
	フォントファミリ: 'Open Sans'、Arial、サンセリフ;
}

.ch-info pa:hover {
	色: rgba(255,242,34, 0.8);
}

さあ、楽しいホバーアクションを始めましょう! 「.ch-item」の内側の影のサイズは16pxから1pxに設定されています。

.ch-item:hover {
	ボックスシャドウ: 
		インセット 0 0 0 1px rgba(255,255,255,0.1),
		0 1px 2px rgba(0,0,0,0.1);
}

「.ch-info」はフェードインして 1 にスケールされます。

.ch-item:hover .ch-info {
	変換: スケール(1);
	不透明度: 1;
}

説明段落 p がフェードインします (遅延):

.ch-item:hover .ch-info p {
	不透明度: 1;
}

これが最初の例です！ 次のものを見てみましょう。

例2

この例の HTML 構造は最初の例と同じです。

この例では、「.ch-item」の影を使用して円を塗りつぶし、説明の背景として機能します。 つまり、ここでは特別なことは何もありません。単に影の値が追加されているだけです。

.ch-アイテム{
	幅: 100%;
	高さ: 100%;
	境界線の半径: 50%;
	位置: 相対的;
	カーソル: デフォルト;
	ボックスシャドウ: 
		インセット 0 0 0 0 rgba(200,95,66, 0.4),
		インセット 0 0 0 16px rgba(255,255,255,0.6),
		0 1px 2px rgba(0,0,0,0.1);
	遷移: すべて 0.4 秒のイーズイン アウト。
}

背景画像:

.ch-img-1 { 
	背景画像: url(../images/4.jpg);
}

.ch-img-2 { 
	背景画像: url(../images/5.jpg);
}

.ch-img-3 { 
	背景画像: url(../images/6.jpg);
}

「.ch-info」は再度拡大縮小されます:

.ch-info {
	位置: 絶対;
	幅: 100%;
	高さ: 100%;
	境界線の半径: 50%;
	オーバーフロー: 非表示;
	不透明度: 0;
	遷移: すべて 0.4 秒のイーズイン アウト。
	変換: スケール(0);
	背面の可視性: 非表示;
}

テキスト要素のスタイルを設定しましょう。

.ch-info h3 {
	色: #fff;
	テキスト変換:大文字;
	位置: 相対的;
	文字間隔: 2px;
	フォントサイズ: 22px;
	マージン: 0 30px;
	パディング: 65px 0 0 0;
	高さ: 110px;
	フォントファミリ: 'Open Sans'、Arial、サンセリフ;
	テキストシャドウ: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	色: #fff;
	パディング: 10px 5px;
	フォントスタイル: 斜体;
	マージン: 0 30px;
	フォントサイズ: 12px;
	上境界線: 1px実線 rgba(255,255,255,0.5);
}

.ch-info pa {
	表示: ブロック;
	色: rgba(255,255,255,0.7);
	フォントスタイル: 通常;
	フォントの太さ: 700;
	テキスト変換:大文字;
	フォントサイズ: 9px;
	文字間隔: 1px;
	パディング上部: 4px;
	フォントファミリ: 'Open Sans'、Arial、サンセリフ;
}

.ch-info pa:hover {
	色: rgba(255,242,34, 0.8);
}

マウスオーバー時に、内側の影（赤みがかった影）の半径が 110 ピクセルに拡大するように設定します。 これはすべてのサークルをカバーします:

.ch-item:hover {
	ボックスシャドウ: 
		インセット 0 0 0 110px rgba(200,95,66, 0.4),
		インセット 0 0 0 16px rgba(255,255,255,0.8),
		0 1px 2px rgba(0,0,0,0.1);
}

「.ch-info」を拡大縮小してフェードアウトします。

.ch-item:hover .ch-info {
	不透明度: 1;
	変換: スケール(1);	
}

例3

この例では回転を使用します。 2 番目のパーティションとして「.ch-thumb」を追加する必要があるため、構造は前の 2 つの例とは少し異なります。 リスト項目は次のようになります。

<li>
	<div class="ch-item">	
		<div class="ch-info">
			<h3>音楽ポスター</h3>
			<p>Jonathan Quintin 著 <a href="http://drbl.in/eGjw">Dribbble で見る</a></p>
		</div>
		<div class="ch-thumb ch-img-1"></div>
	</div>
</li>

「.ch-item」のスタイルは以前と同じままです（微妙な影付き）。

.ch-アイテム{
	幅: 100%;
	高さ: 100%;
	境界線の半径: 50%;
	位置: 相対的;
	カーソル: デフォルト;
	ボックスの影: 0 1px 3px rgba(0,0,0,0.2);
}

「.ch-thumb」要素には、特定の変換原点（中央右のどこか）と遷移が設定されます。 これは、ホバー時に下に回転して「.ch-info」要素を表示する要素になります。

.ch-thumb{
	幅: 100%;
	高さ: 100%;
	境界線の半径: 50%;
	オーバーフロー: 非表示;
	位置: 絶対;
	ボックスシャドウ: インセット 0 0 0 15px rgba(255,255,255, 0.5);
	変換元: 95% 40%;
	遷移: すべて 0.3 秒のイーズイン アウト。
}

疑似クラスを使用して、放射状グラデーションを持つ小さな真鍮製ファスナーを作成します。

.ch-thumb:after {
	コンテンツ： '';
	幅: 8px;
	高さ: 8px;
	位置: 絶対;
	境界線の半径: 50%;
	上位: 40%
	左: 95%;
	マージン: -4px 0 0 -4px;
	背景: 放射状グラデーション(中心に楕円、rgba(14,14,14,1) 0%、rgba(125,126,125,1) 100%);
	ボックスの影: 0 0 1px rgba(255,255,255,0.9);
}

各「.ch-thumb」要素の背景画像を定義しましょう。

.ch-img-1 { 
	背景画像: url(../images/7.jpg);
	zインデックス: 12;
}

.ch-img-2 { 
	背景画像: url(../images/8.jpg);
	zインデックス: 11;
}

.ch-img-3 { 
	背景画像: url(../images/9.jpg);
	zインデックス: 10;
}

「.ch-info」要素のスタイルは次のとおりです。

.ch-info {
	位置: 絶対;
	幅: 継承;
	高さ: 継承;
	境界線の半径: 50%;
	オーバーフロー: 非表示;
	背景: #c9512e url(../images/noise.png);
	ボックスシャドウ: インセット 0 0 0 5px rgba(0,0,0,0.05);
}

テキスト要素は次のように配置され、スタイル設定されます。

.ch-info h3 {
	色: #fff;
	テキスト変換:大文字;
	位置: 相対的;
	文字間隔: 2px;
	フォントサイズ: 18px;
	マージン: 0 60px;
	パディング: 22px 0 0 0;
	高さ: 85px;
	フォントファミリ: 'Open Sans'、Arial、サンセリフ;
	テキストシャドウ: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	色: #fff;
	パディング: 10px 5px;
	フォントスタイル: 斜体;
	マージン: 0 30px;
	フォントサイズ: 12px;
	上境界線: 1px実線 rgba(255,255,255,0.5);
}

リンクは、マウスをホバーすると右から移動する小さな円になります。

.ch-info pa {
	表示: ブロック;
	色: #333;
	幅: 80ピクセル;
	高さ: 80px;
	背景: rgba(255,255,255,0.3);
	境界線の半径: 50%;
	色: #fff;
	フォントスタイル: 通常;
	フォントの太さ: 700;
	テキスト変換:大文字;
	フォントサイズ: 9px;
	文字間隔: 1px;
	パディング上部: 24px;
	マージン: 7px 自動 0;
	フォントファミリ: 'Open Sans'、Arial、サンセリフ;
	不透明度: 0;
	遷移： 
		変換 0.3秒、イーズインアウト 0.2秒、
		不透明度 0.3秒、イーズインアウト 0.2秒、
		背景 0.2 秒 線形 0 秒;
	変換: translateX(60px) rotate(90deg);
}

.ch-info pa:hover {
	背景: rgba(255,255,255,0.5);
}

動きと不透明度は遅延して発生させ、背景のホバーには遷移がないようにしたいので、遷移を分離します。

マウスをホバーすると、「.ch-thumb」が回転し、リンク要素が移動/回転します。

.ch-item:hover .ch-thumb {
	ボックスシャドウ: インセット 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
	変換: 回転(-110度);
}
.ch-item:hover .ch-info pa{
	不透明度: 1;
	変換: translateX(0px) 回転(0deg);
}

例4

4 番目の例では、3D 回転がいくつか行われます。 そのため、遠近感と前後感を表現するコンテナが 1 つになるように構造を調整する必要があります。 リスト項目は次のようになります。

<li>
	<div class="ch-item ch-img-1">				
		<div class="ch-info-wrap">
			<div class="ch-info">
				<div class="ch-info-front ch-img-1"></div>
				<div class="ch-info-back">
					<h3>クマタイプ</h3>
					<p>Josh Schott 著 <a href="http://drbl.in/ewUW">Dribbble で見る</a></p>
				</div>	
			</div>
		</div>
	</div>
</li>

ご覧のとおり、背景画像を「.ch-item」と「.ch-info-front」に追加しました。 コツは、「.ch-info-wrap」に同じ背景を与えることです。

これにより、「.ch-item」に穴が開いているような錯覚が生じます。

「.ch-item」には次のスタイルがあります:

.ch-アイテム{
	幅: 100%;
	高さ: 100%;
	境界線の半径: 50%;
	位置: 相対的;
	ボックスの影: 0 1px 2px rgba(0,0,0,0.1);
	カーソル: デフォルト;
}

「.ch-info-wrap」には遠近法のプロパティがあり、影の遷移も追加します。

.ch-info-wrap{
	位置: 絶対;
	幅: 180ピクセル;
	高さ: 180ピクセル;
	境界線の半径: 50%;
	パースペクティブ: 800px;
	遷移: すべて 0.4 秒のイーズイン アウト。
	上: 20px;
	左: 20px;
	背景: #f9f9f9 url(../images/bg.jpg);
	ボックスシャドウ: 
		0 0 0 20px rgba(255,255,255,0.2), 
		インセット 0 0 3px rgba(115,114, 23, 0.8);

}

「.ch-info」には、変換スタイルの preserve-3d 値が必要です。これは 3D で回転する要素なので、遷移を設定します。

.ch-info{
	位置: 絶対;
	幅: 180ピクセル;
	高さ: 180ピクセル;
	境界線の半径: 50%;
	遷移: すべて 0.4 秒のイーズイン アウト。
	変換スタイル: 3D を保持します。
}

前面と背面には、次の共通スタイルがあります。

.ch-info > div {
	表示: ブロック;
	位置: 絶対;
	幅: 100%;
	高さ: 100%;
	境界線の半径: 50%;
	背景の位置: 中央 中央;
	背面の可視性: 非表示;
}

背面は最初は見えないように回転します。

.ch-info .ch-info-back {
	変換: rotate3d(0,1,0,180deg);
	背景: #000;
}

背景画像はまた次のとおりです。

.ch-img-1 { 
	背景画像: url(../images/10.jpg);
}

.ch-img-2 { 
	背景画像: url(../images/11.jpg);
}

.ch-img-3 { 
	背景画像: url(../images/12.jpg);
}

...およびテキスト要素:

.ch-info h3 {
	色: #fff;
	テキスト変換:大文字;
	文字間隔: 2px;
	フォントサイズ: 14px;
	マージン: 0 15px;
	パディング: 40px 0 0 0;
	高さ: 90px;
	フォントファミリ: 'Open Sans'、Arial、サンセリフ;
	テキストシャドウ: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	色: #fff;
	パディング: 10px 5px;
	フォントスタイル: 斜体;
	マージン: 0 30px;
	フォントサイズ: 12px;
	上境界線: 1px実線 rgba(255,255,255,0.5);
}

.ch-info pa {
	表示: ブロック;
	色: rgba(255,255,255,0.7);
	フォントスタイル: 通常;
	フォントの太さ: 700;
	テキスト変換:大文字;
	フォントサイズ: 9px;
	文字間隔: 1px;
	パディング上部: 4px;
	フォントファミリ: 'Open Sans'、Arial、サンセリフ;
}

.ch-info pa:hover {
	色: rgba(255,242,34, 0.8);
}

マウスをホバーすると、「.ch-info-wrap」の影が変更され、「.ch-info」が回転して裏側が見えるようになります。

.ch-item:hover .ch-info-wrap {
	ボックスシャドウ: 
		0 0 0 0 rgba(255,255,255,0.8), 
		インセット 0 0 3px rgba(115,114, 23, 0.8);
}

.ch-item:hover .ch-info {
	変換: rotate3d(0,1,0,-180deg);
}

例5

この例では、「.ch-thumb」を 0 に縮小し、「.ch-info」をフェードインして 1 に縮小して表示します。 5 番目の例の構造は前の例と同じです。

「.ch-item」には次のスタイルがあります。

.ch-アイテム{
	幅: 100%;
	高さ: 100%;
	境界線の半径: 50%;
	位置: 相対的;
	ボックスの影: 0 1px 2px rgba(0,0,0,0.1);
	カーソル: デフォルト;
}

「.ch-info-wrap」と「.ch-info」には、次の共通スタイルがあります。

.ch-info-wrap、 
.ch-info{
	位置: 絶対;
	幅: 180ピクセル;
	高さ: 180ピクセル;
	境界線の半径: 50%;
}

同じ背景を「.ch-info-wrap」に設定して、「穴」トリックをもう一度実行してみましょう。

.ch-info-wrap {
	上: 20px;
	左: 20px;
	背景: #f9f9f9 url(../images/bg.jpg);
	ボックスシャドウ: 
		0 0 0 20px rgba(255,255,255,0.2), 
		インセット 0 0 3px rgba(115,114, 23, 0.8);

}

一般的なスタイルは「前面」と「背面」です (もはや前面と背面ではありません)。

.ch-info > div {
	表示: ブロック;
	位置: 絶対;
	幅: 100%;
	高さ: 100%;
	境界線の半径: 50%;
	背景の位置: 中央 中央;
}

「前面」には遷移があります（縮小して消えます）。

.ch-info .ch-info-front {
	遷移: すべて 0.6 秒のイーズイン アウト。
}

「.ch-info-back」の不透明度は最初は 0 ですが、1.5 まで拡張できます。

.ch-info .ch-info-back {
	不透明度: 0;
	背景: #223e87;
	ポインタイベント: なし;
	変換: スケール(1.5);
	遷移: すべて 0.4 秒、ease-in-out 0.2 秒。
}

要素が他のすべてを「ブロック」しないようにするため、pointer-events を none に設定する必要があります... 要素は拡大されており、不透明度のために見えませんが、それでもそこに存在していることに注意してください。

通常の背景画像やテキスト要素と同様ですが、色が少し異なります。

.ch-img-1 { 
	背景画像: url(../images/13.jpg);
}

.ch-img-2 { 
	背景画像: url(../images/14.jpg);
}

.ch-img-3 { 
	背景画像: url(../images/15.jpg);
}

.ch-info h3 {
	色: #fff;
	テキスト変換:大文字;
	文字間隔: 2px;
	フォントサイズ: 18px;
	マージン: 0 15px;
	パディング: 40px 0 0 0;
	高さ: 80px;
	フォントファミリ: 'Open Sans'、Arial、サンセリフ;
	テキストシャドウ: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	色: #fff;
	パディング: 10px 5px 0;
	フォントスタイル: 斜体;
	マージン: 0 30px;
	フォントサイズ: 12px;
	上境界線: 1px実線 rgba(255,255,255,0.5);
}

.ch-info pa {
	表示: ブロック;
	色: #e7615e;
	フォントスタイル: 通常;
	フォントの太さ: 700;
	テキスト変換:大文字;
	フォントサイズ: 9px;
	文字間隔: 1px;
	パディング上部: 4px;
	フォントファミリ: 'Open Sans'、Arial、サンセリフ;
}

.ch-info pa:hover {
	色: #fff;
}

マウスをホバーすると、「.ch-info-front」の部分が 0 に縮小され、不透明度が 0 に設定されます。これにより、背後に消えます。

.ch-item:hover .ch-info-front {
	変換: スケール(0);
	不透明度: 0;
}

「.ch-info-back」は 1 に縮小され、フェードインします。リンクをクリックできるようにしたいので、ポインター イベントも自動に設定します。

.ch-item:hover .ch-info-back {
	変換: スケール(1);
	不透明度: 1;
	ポインタイベント: 自動;
}

例6

この例では、説明を表示するために、内部の「.ch-thumb」セクションを下に折り返します。 HTML は前の 2 つの例と同じになります。

「.ch-item」は以前と同じスタイルになります:

.ch-アイテム{
	幅: 100%;
	高さ: 100%;
	境界線の半径: 50%;
	位置: 相対的;
	ボックスの影: 0 1px 2px rgba(0,0,0,0.1);
	カーソル: デフォルト;
}

ラッパーと説明要素の共通スタイル:

「.ch-info-wrap」、 「.ch-info」 要素の一般的なスタイル:

.ch-info-wrap、 
.ch-info{
	位置: 絶対;
	幅: 180ピクセル;
	高さ: 180ピクセル;
	境界線の半径: 50%;
	遷移: すべて 0.4 秒のイーズイン アウト。
}

「.ch-info-wrap」には次のような視点があります:

.ch-info-wrap {
	上: 20px;
	左: 20px;
	背景: #f9f9f9 url(../images/bg.jpg);
	ボックスシャドウ: 
		0 0 0 20px rgba(255,255,255,0.2), 
		インセット 0 0 3px rgba(115,114, 23, 0.8);
	パースペクティブ: 800px;
}

「.ch-info」要素には、次の変換スタイルが必要です。

.ch-info {
	変換スタイル: 3D を保持します。
}

前面と背面の間に遷移があります。 今回は、backface-visibility を hidden に設定しないことに注意してください。これは、.ch-thumb を下に折り返したときにその裏側が表示されるようにするためです。

.ch-info > div {
	表示: ブロック;
	位置: 絶対;
	幅: 100%;
	高さ: 100%;
	境界線の半径: 50%;
	背景の位置: 中央 中央;
	遷移: すべて 0.6 秒のイーズイン アウト。
}

正しい transform-origin を設定して、オンにできるようにしましょう。

.ch-info .ch-info-front {
	変換の原点: 50% 100%;	
	zインデックス: 100;
	ボックスシャドウ: 
		インセット 2px 1px 4px rgba(0,0,0,0.1);
}

「.ch-info-back」に不透明度ゼロの RGBA 値を設定します。

.ch-info .ch-info-back {
	背景: rgba(230,132,107,0);
}

他の要素の通常のスタイル:

.ch-img-1 { 
	背景画像: url(../images/16.jpg);
}

.ch-img-2 { 
	背景画像: url(../images/17.jpg);
}

.ch-img-3 { 
	背景画像: url(../images/18.jpg);
}

.ch-info h3 {
	色: #fff;
	テキスト変換:大文字;
	文字間隔: 2px;
	フォントサイズ: 14px;
	マージン: 0 25px;
	パディング: 40px 0 0 0;
	高さ: 90px;
	フォントファミリ: 'Open Sans'、Arial、サンセリフ;
	テキストシャドウ: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	色: #fff;
	パディング: 10px 5px;
	フォントスタイル: 斜体;
	マージン: 0 30px;
	フォントサイズ: 12px;
	上境界線: 1px実線 rgba(255,255,255,0.5);
}

.ch-info pa {
	表示: ブロック;
	色: rgba(255,255,255,0.7);
	フォントスタイル: 通常;
	フォントの太さ: 700;
	テキスト変換:大文字;
	フォントサイズ: 9px;
	文字間隔: 1px;
	パディング上部: 4px;
	フォントファミリ: 'Open Sans'、Arial、サンセリフ;
}

.ch-info pa:hover {
	色: rgba(255,242,34, 0.8);
}

ホバリング中に、前面を回転させ、影をわずかにアニメーション化します。 背面は背景色にフェードします:

.ch-item:hover .ch-info-front {
	変換: rotate3d(1,0,0,-180deg);
	ボックスシャドウ: 
		インセット 0 0 5px rgba(255,255,255,0.2), 
		インセット 0 0 3px rgba(0,0,0,0.3);
}

.ch-item:hover .ch-info-back {
	背景: rgba(230,132,107,0.6);
}

例7

最後の例は立方体を回転させるようなものです。上から後ろに回転させて説明を示します。 各面を回転させる予定なので、追加の親要素は必要ありません。 したがって、HTML は次のようになります。

<li>
	<div class="ch-item">				
		<div class="ch-info">
			<div class="ch-info-front ch-img-1"></div>
			<div class="ch-info-back">
				<h3>マウス</h3>
				<p>Alexander Shumihin 著 <a href="http://drbl.in/eAoj">Dribbble で見る</a></p>
			</div>	
		</div>
	</div>
</li>

「.ch-item」の視点値を提供します:

.ch-アイテム{
	幅: 100%;
	高さ: 100%;
	境界線の半径: 50%;
	位置: 相対的;
	カーソル: デフォルト;
	パースペクティブ: 900px;
}

「.ch-info」には preserve-3d 値が必要です:

.ch-info{
	位置: 絶対;
	幅: 100%;
	高さ: 100%;
	変換スタイル: 3D を保持します。
}

前面と背面には遷移があり、変換の原点は 50% 0% に設定されます。

.ch-info > div {
	表示: ブロック;
	位置: 絶対;
	幅: 100%;
	高さ: 100%;
	境界線の半径: 50%;
	背景の位置: 中央 中央;
	遷移: すべて 0.4 秒線形。
	変換原点: 50% 0%;
}

前面部分にきれいな内側の影を付けましょう。

.ch-info .ch-info-front {
	ボックスシャドウ: インセット 0 0 0 16px rgba(0,0,0,0.3);
}

背面は最初は回転して、立方体の底面のように見えます。

.ch-info .ch-info-back {
	変換: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
	背景: #000;
	不透明度: 0;
}

背景画像とテキスト要素の一般的なスタイル:

.ch-img-1 { 
	背景画像: url(../images/19.jpg);
}

.ch-img-2 { 
	背景画像: url(../images/20.jpg);
}

.ch-img-3 { 
	背景画像: url(../images/21.jpg);
}

.ch-info h3 {
	色: #fff;
	テキスト変換:大文字;
	文字間隔: 2px;
	フォントサイズ: 24px;
	マージン: 0 15px;
	パディング: 60px 0 0 0;
	高さ: 110px;
	フォントファミリ: 'Open Sans'、Arial、サンセリフ;
	テキストシャドウ: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	色: #fff;
	パディング: 10px 5px;
	フォントスタイル: 斜体;
	マージン: 0 30px;
	フォントサイズ: 12px;
	上境界線: 1px実線 rgba(255,255,255,0.5);
}

.ch-info pa {
	表示: ブロック;
	色: rgba(255,255,255,0.7);
	フォントスタイル: 通常;
	フォントの太さ: 700;
	テキスト変換:大文字;
	フォントサイズ: 9px;
	文字間隔: 1px;
	パディング上部: 4px;
	フォントファミリ: 'Open Sans'、Arial、サンセリフ;
}

.ch-info pa:hover {
	色: rgba(255,242,34, 0.8);
}

translate3d を使用して 3D 空間の Y 軸上で前面を移動し、rotate3d を使用して実際に回転させます。 後でその部分を見たくないので、フェードアウトも行います。

.ch-item:hover .ch-info-front {
	変換: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
	不透明度: 0;
}

背面は 0 度まで「後方に」回転します (最初は下向きに回転していたことを思い出してください)。

.ch-item:hover .ch-info-back {
	変換: rotate3d(1,0,0,0deg);
	不透明度: 1;
}

それでおしまい！ さまざまなバリエーションを可能にするホバー効果が豊富に用意されていますので、ぜひお試しください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  大量のデータを含むエレメントのシャトルボックスで「すべて選択」をクリックするとスタックする問題の解決方法

>>:  docker run後にコンテナがExited (0)と表示される問題を解決する

推薦する

my.cnf (my.ini) 重要なパラメータの最適化設定手順

MyISAM ストレージエンジンMyISAM ストレージ エンジンは、書き込みよりも読み取りが多く、...

Pythonで書かれたWebアプリケーションをDockerでデプロイする実践

目次1. Dockerをインストールする2. コードを書く3. Dockerfileを書く4. 画像...

Windows10のマウスを模倣して境界線を光らせる効果を実現するCSSの詳細解説

最新の Windows 10 アップデートをインストールした後、システム UI の詳細な効果が顕著に...

YUM を使用して Linux (CentOS 7) に MySQL 5.7.18 をインストールする方法の詳細なチュートリアル

このプロジェクトでは MySQL を使用する必要があります。これまで Windows では常に確実に...

iptables および firewalld ツールを使用して Linux ファイアウォール接続ルールを管理する

ファイアウォールファイアウォールは一連のルールです。パケットが保護されたネットワーク空間に出入りする...

vue3 カスタムディレクティブの詳細

目次1. カスタム指示の登録1.1. グローバルカスタム指示1.2. ローカルカスタム指示2. カス...

JS配列ループ方式と効率分析の比較

配列メソッドJavaScript には多くの配列メソッドが用意されています。次の図は、ほとんどの配列...

React イベントバインディングの詳細

目次クラスコンポーネントイベントバインディング関数コンポーネントイベントバインディング要約するRea...

Centos7.x での Nginx のインストール、SSL 設定、一般的なコマンドの詳細な説明

1. インストールyumを使用してインストールする ##yum nginx を自動的にインストールす...

Windows 10 に付属する仮想マシンのネットワークを設定するための詳細な手順 (グラフィック チュートリアル)

1. サーバー ホストをクリックし、右側の操作リストで [仮想スイッチ管理] をクリックして、仮想...

メタ情報に基づいて時間指定のページ更新またはリダイレクトを実装する

メタを使用して、ページの時間指定更新またはジャンプを実装します。 XML/HTML コードコンテンツ...

nginx のインストールが完了した後に PHP を解析できない問題の解決方法

目次方法1方法2 nginxをインストールした後、PHPコードを解析できないことがわかりました。解決...

Ubuntu 16.04.4LTS に mininet をインストールする際に発生する問題と解決策

ミニネットMininet は軽量のソフトウェア定義ネットワークおよびテスト プラットフォームです。軽...

Doubanウェブサイトのウェブサイトコンテンツに小さな変更を加える方法

<br />読みやすさはウェブサイトにとって非常に重要な部分であり、ウェブサイトの核心と...

マウスオーバーボタンアニメーションを実現する純粋な CSS3 パート 2

前の 2 つの章を終えて、ボタンのフローティング アニメーションについて新たな理解が得られましたか?...