CSS implementiert den Effekt der Skalierung des Bildes, wenn die Maus darüber fährt (Codebeispiel)

Der Inhalt dieses Artikels befasst sich hauptsächlich mit der Verwendung von CSS, um den Effekt des Bildzooms (langsame Änderungen, mit Übergangseffekten und beim Zoomvorgang mit animierten Übergängen) zu erzielen verwendet CSS-Transformationsattribut, CSS3-Übergangsattribut, die folgenden Implementierungseffekte und spezifischen Implementierungsmethoden. Ich hoffe, es wird Ihnen hilfreich sein.

Werfen wir zunächst einen Blick auf die Vorschau des Effekts

Codeinterpretation

HTML-Teil Der Code

<div class="content">
	<ul>
	   <li><img  class="amplify" src="img/1.jpg" title="放大"/ alt="CSS implementiert den Effekt der Skalierung des Bildes, wenn die Maus darüber fährt (Codebeispiel)" ></li>
	   <li><img  class="narrow" src="img/1.jpg" title="缩小"/ alt="CSS implementiert den Effekt der Skalierung des Bildes, wenn die Maus darüber fährt (Codebeispiel)" ></li>
	</ul>
</div>

definiert die Containergröße, Überlauf: ausgeblendet; wenn die Größe des untergeordneten Containers die des übergeordneten Containers überschreitet, kann der Überlaufteil ausgeblendet werden

* {
				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;	
			}

definiert das Original Skalierungsverhältnis der Bildtransformation: scale(1 ),.

Übergangseffekt, wenn das Bild gezoomt wird: Übergang: alle 1er-Werte, 0er-Werte; alle Stile erleichtern (allmähliche Verlangsamung) Änderungen innerhalb von 1 Sekunde. Zu den Übergangsattributen gehören: linear ( Konstante Geschwindigkeit), Ease-in: (beschleunigen), Ease-out: (verlangsamen), Ease-in-out: (beschleunigen und dann verlangsamen)

 .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;
			}

Wenn sich die Maus über das Bild bewegt, wird der Zoomeffekt aktiviert des Bildes: Scale Wenn der Wert in () größer als 1 ist, wird es vergrößert; wenn der Wert in Scale() kleiner als 1 ist, wird es verkleinert.

/*图片放大*/
			.content ul li:hover .amplify{
				transform: scale(1.3);
				transition: all 1s ease 0s;
				-webkit-transform: scale(1.3);
				-webkit-transform: all 1s ease 0s;
			}
			/*图片缩小*/
			.content ul li:hover .narrow{
				transform: scale(0.8);
				transition: all 1s ease 0s;
				-webkit-transform: scale(0.8);
				-webkit-transform: all 1s ease 0s;
			}

Das obige ist der detaillierte Inhalt vonCSS implementiert den Effekt der Skalierung des Bildes, wenn die Maus darüber fährt (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!