CSS は、マウスが画像の上を通過したときに画像を拡大縮小する効果を実現します (コード例)

この記事の内容は、マウスが画像上を通過するときに CSS を使用して画像のスケーリング効果 (トランジション効果を伴うゆっくりとした変化、スケーリング プロセスでアニメーション化されたトランジション) を実現する方法についてです。CSS 変換属性は次のとおりです。主に使用する、css3のtransition属性、以下の実装効果と具体的な実装方法について、ご参考になれば幸いです。

まずエフェクトのプレビューを見てみましょう

コード解釈

コードのHTML部分

<div class="content">
	<ul>
	   <li><img  class="amplify" src="img/1.jpg" title="放大"/ alt="CSS は、マウスが画像の上を通過したときに画像を拡大縮小する効果を実現します (コード例)" ></li>
	   <li><img  class="narrow" src="img/1.jpg" title="缩小"/ alt="CSS は、マウスが画像の上を通過したときに画像を拡大縮小する効果を実現します (コード例)" ></li>
	</ul>
</div>

コンテナのサイズを定義します。overflow: hidden;子コンテナが親コンテナを超えています。

* {
				margin: 0;
				padding: 0;
				font-family: "微软雅黑";
			}
			ul li{
				list-style: none;
			}
			.content{
				width: 310px;
				height: 420px;
				padding: 5px;
				border: 1px solid #000;
				margin: 10px auto;
			}
			/*定义容器的大小*/
			.content ul li{
				display: block;
				width: 300px;
				margin: 0 auto;
				margin: 5px;
				overflow: hidden;/*隐藏溢出*/
				border: 1px solid #000;	
			}

の部分は、画像変換の元のスケーリングを定義します:scale(1),。

画像をズームしたときのトランジション効果: トランジション: すべて 1、イーズ 0、すべてのスタイルのイーズ (徐々に遅く) は、イーズ (デフォルト値) に加えて、次のとおりです: リニア (均一な速度)。 、ease-in: (加速)、ease-out: (減速)、ease-in-out: (加速してから減速)

 .content ul li img{
				display: block;
				border: 0;
				width: 100%;
				transform: scale(1);
				transition: all 1s ease 0s;
				-webkit-transform: scale(1);
				-webkit-transform: all 1s ease 0s;
			}

マウスを画像に移動すると、画像のズーム効果: の値scale() が 1 より大きい場合はズームインし、scale() の値が 1 より小さい場合はズームアウトします。

りー

以上がCSS は、マウスが画像の上を通過したときに画像を拡大縮小する効果を実現します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。