In diesem Artikel werden hauptsächlich 8 Sätze supercooler, reiner CSS3-Bildanimationseffekte vorgestellt. Jeder Animationseffekt ist sehr aufregend und es lohnt sich, davon zu lernen
Das ist super Cooler reiner CSS3-Mouse-Over-Bildanimationseffekt. Er ist in 8 verschiedene Gruppen von Effekten unterteilt. Sie zeigen die Maskenebene und den Bildtitel auf unterschiedliche Weise an. Jeder Effektsatz ist in drei verschiedene Mouseover-Bildeffekte unterteilt.
Diese Animationseffekte, wenn die Maus über das Bild gleitet, werden alle mit CSS3 erstellt. Dazu gehören: Gleiteffekt, Neigungseffekt, Flip-Effekt, Rotationseffekt usw. Unten ist ein Vorschaubild eines GIF.
Verwenden Sie die Methode
, um die Datei „hover-effects.css“ in die Seite einzufügen.
<link rel="stylesheet" href="css/hover-effects.css" />
HTML-Struktur
Nehmen Sie einen der Mouseover-Bildanimationseffekte als Beispiel:
<p class="effect-1">
<p class="image-box">
<img src="img-2.jpg" alt="Image-3">
</p>
<p class="text-desc">
<h3>Your Title</h3>
<p>......</p>
<a href="#" class="btn">Learn more</a>
</p>
</p>CSS-Stil
.effect-1{
float: left;
width: 340px;
position: relative;
overflow: hidden;
text-align: center;
border: 4px solid rgba(255, 255, 255, 0.9);
overflow: visible;
}
.effect-1 img{
transition: 0.5s;
}
.effect-1:hover img{
transform: scale(0.3) translateY(-110%);
position: relative;
z-index: 9;
} .effect-1 .text-desc{
transform: translateY(100%);
opacity: 0;
padding: 85px 20px 10px;
transition: 0.5s;
} .effect-1:hover .text-desc{
transform: translateY(0px);
opacity: 1;
}Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website !
Verwandte Empfehlungen:
Verwenden Sie SVG und CSS3, um coole Rahmenanimationen zu implementieren
CSS3, um Mausbewegungen zur Anzeige erweiterter Inhalte zu implementieren
CSS, um den Effekt von Text um Bilder zu erzielen
Das obige ist der detaillierte Inhalt vonMit CSS3 acht Gruppen supercooler Mouseover-Bildanimationen implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
