Heim > Artikel > Web-Frontend > Reine handgefertigte CSS3-Webbildeffekte
Reine handgefertigte CSS3-Webbildeffekte
- 高洛峰Original
- 2017-02-09 16:41:371672Durchsuche
-
Bewegen Sie die Maus, das Bild wird um 360 Grad gedreht
Effekt:Code:
<style>
.rotate-demo {width: 220px;
height: 220px;
margin: 0 auto;
background: no-repeat url("images/author.jpg") left top;-webkit-background-size: 220px 220px;
-moz-background-size: 220px 220px;
background-size: 220px 220px;
-webkit-border-radius: 110px;
border-radius: 110px;
-webkit-transition: -webkit-transform 2s ease-out;
-moz-transition: -moz-transform 2s ease-out;
-o-transition: -o-transform 2s ease-out;
-ms-transition: -ms-transform 2s ease-out;
}
<br>
.rotate-demo:hover {-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
</style>
<br>
<p class="rotate-demo"></p>
Wissenspunkt: Das Transformationsattribut von CSS3 kann 2D anwenden oder 3D-Konvertierung. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen. Auf „rotateZ(angle)“ setzen, um die 3D-Rotation von DOM-Elementen entlang der Z-Achse zu implementieren. Zu den zugehörigen Einstellungen gehören „rotate“, „rotate3d“, „rotateX“ und „rotateY“. -
Zum Vergrößern über das Bild fahren
Effekt:
Code:CSS3：
<style type="text/css">
.img-container {background-color: #000;
width: 220px;
height: 220px;
margin: 20px 50px;
}
<br>
.img {-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-o-transform: scale(0.6);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
<br>
.img img {padding: 1px;
border-radius: 10px;
border: 1px solid #fff;
}
<br>
.img:hover {-webkit-transform: scale(0.8);
-webkit-box-shadow: 0px 0px 30px #ccc;
-moz-transform: scale(0.8);
-moz-box-shadow: 0px 0px 30px #ccc;
-o-transform: scale(0.8);
-o-box-shadow: 0px 0px 30px #ccc;
}
</style>
<br>
HTML：
<p class="img-container">
<p class="img">
<img src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-0.jpg">
</p>
</p>
Wissenspunkt: Verwenden Sie auch das Transformationsattribut von CSS3, legen Sie den Maßstab (x, y) fest und implementieren Sie ihn DOM 2D-Skalierungskonvertierung von Elementen, bezogen auf Scale3D, ScaleX, ScaleY, ScaleZ -
Realisierung eines 3D-Bildrotationsalbums
Effekt:
Code:CSS:
<style>
.carousel-container {margin: 20px auto;
width: 210px;
height: 140px;
position: relative;
}
<br>
#carousel {width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: rotation 20s infinite linear;
}
<br>
#carousel:hover {animation-play-state: paused;
}
<br>
#carousel figure {display: block;
position: absolute;
width: 186px;
height: 116px;
left: 10px;
top: 10px;
background: black;
overflow: hidden;
border: solid 1px black;
}
<br>
#carousel figure:nth-child(1) {transform: rotateY(0deg) translateZ(288px);
}
<br>
#carousel figure:nth-child(2) {transform: rotateY(40deg) translateZ(288px);
}
<br>
#carousel figure:nth-child(3) {transform: rotateY(80deg) translateZ(288px);
}
<br>
#carousel figure:nth-child(4) {transform: rotateY(120deg) translateZ(288px);
}
<br>
#carousel figure:nth-child(5) {transform: rotateY(160deg) translateZ(288px);
}
<br>
#carousel figure:nth-child(6) {transform: rotateY(200deg) translateZ(288px);
}
<br>
#carousel figure:nth-child(7) {transform: rotateY(240deg) translateZ(288px);
}
<br>
#carousel figure:nth-child(8) {transform: rotateY(280deg) translateZ(288px);
}
<br>
#carousel figure:nth-child(9) {transform: rotateY(320deg) translateZ(288px);
}
<br>
#carousel .carousel-img {-webkit-filter: grayscale(1);
cursor: pointer;
transition: all .5s ease;
border: none;
}
<br>
#carousel .carousel-img:hover {-webkit-filter: grayscale(0);
transform: scale(1.2,1.2);
}
<br>
@keyframes rotation {from {transform: rotateY(0deg);
}
<br>
to {transform: rotateY(360deg);
}
}
</style>
<br>
HTML:
<br>
<p class="carousel-container">
<p id="carousel">
<figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-1.jpg" alt=""></figure>
<figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-2.jpg" alt=""></figure>
<figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-3.jpg" alt=""></figure>
<figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-4.jpg" alt=""></figure>
<figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-5.jpg" alt=""></figure>
<figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-6.jpg" alt=""></figure>
<figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-7.jpg" alt=""></figure>
<figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-8.jpg" alt=""></figure>
<figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-9.jpg" alt=""></figure>
</p>
</p>
Wissenspunkt: Verlassen Sie sich weiterhin auf das Transformationsattribut von CSS3 und Animationsattribut, verwenden Sie „rotateY“, um die 3D-Rotation des Elements entlang der Y-Achse zu definieren, und verwenden Sie „translateZ“, um die 3D-Transformation des Elements entlang der Z-Achse zu definieren.
Legen Sie gleichzeitig das Animationsattribut des Elements fest um den Animationseffekt zu erzielen, der in diesem Artikel wie folgt definiert ist:animation: rotation 20s infinite linear;
animation-name (Keyframe-Name, der an den Selektor gebunden werden muss): Animation der Rotation
animation-duration (die Zeit, die zum Abschließen der Animation benötigt wird): 20s
animation-iteration-count ( die Häufigkeit, mit der die Animation abgespielt werden soll): unendlich (unbegrenzte Zeiten)
Animations-Timing-Funktion (Animationsgeschwindigkeitskurve): linear (die Geschwindigkeit der Animation ist von Anfang bis Ende gleich)
Für weitere handgefertigte CSS3-Webseiten-Bildeffekte beachten Sie bitte die PHP-Chinese-Website für verwandte Artikel!