Maison > Article > interface Web > Comment obtenir des effets d'ombre et de lumière sur une image en CSS3 ? Introduction à la méthode de réalisation de la lumière et des ombres dans les images CSS3
Comment obtenir des effets d'ombre et de lumière sur une image en CSS3 ? Introduction à la méthode de réalisation de la lumière et des ombres dans les images CSS3
- 不言original
- 2018-10-10 15:16:234317parcourir
Dans le processus d'apprentissage de CSS3, nous savons que certains des nouveaux attributs de CSS3 peuvent facilement obtenir de beaux effets. Cet article vous présentera un effet spécial : les effets de lumière et d'ombre d'image. Quel est l’effet d’ombre et de lumière des images ? Parfois, nous pouvons voir une image sur une page Web. Lorsque vous placez votre souris sur cette image, une lumière et une ombre seront dessinées sur l'image. N'est-ce pas très intéressant ? Vous pouvez utiliser CSS3. pour cela. Pour s’en rendre compte, sans plus attendre, passons directement au texte.
Tout d'abord, nous devons savoir que dans cet article, CSS3 doit utiliser l'attribut transition et l'attribut transform pour obtenir l'effet de lumière et d'ombre de l'image.
Jetons un bref coup d'œil à l'attribut de transition et à l'attribut de transformation. La propriété
transition est une propriété raccourcie permettant de définir quatre propriétés de transition :
transition-property : spécifie le nom de la propriété CSS qui définit l'effet de transition.
transition-duration : Spécifie le nombre de secondes ou de millisecondes nécessaires pour terminer l'effet de transition.
transition-timing-function : Spécifie la courbe de vitesse de l'effet de vitesse.
transition-delay : Définissez le moment où l'effet de transition commence. L'attribut
transform applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.
Après avoir lu ces deux attributs, regardons directement le code pour implémentation de la lumière et des ombres des images CSS3 :
Idée : définir un calque transparent i, skewx sur le X axe Une déformation de moins 25 degrés a été effectuée sur la couleur d'arrière-plan. La couleur d'arrière-plan était un dégradé linéaire de CSS3, puis en survol, le temps d'animation a été fixé à 0,5 s. En même temps, utilisez curseur: pointeur sur le calque i. Si cela n'est pas défini, vous devez attendre que le calque transparent s'anime avant de pouvoir voir le pointeur.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="">
.overimg {
position: relative;
display: block; /* overflow: hidden;*/
-webkit-box-shadow: 0 0 10px #FFF;
box-shadow: 0 0 10px #FFF; /* overflow: hidden;*/
}
.light {
cursor: pointer;
position: absolute;
left: -100px;
top: 0;
width: 180px;
height: 90px;
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
-webkit-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-ms-transform: skewx(-25deg);
transform: skewx(-25deg);
}
.overimg:hover .light {
left: 180px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
}
</style>
</head>
<body>
<p class="overimg">
<a><img src="images/pandas.jpg" style="max-width:90%" height="150px" alt="Comment obtenir des effets d'ombre et de lumière sur une image en CSS3 ? Introduction à la méthode de réalisation de la lumière et des ombres dans les images CSS3" ></a>
<i class="light"></i>
</p>
</body>
</html>Les effets de lumière et d'ombre des images CSS3 sont les suivants :
Ce qui précède est l'intégralité du contenu de ce article, à propos de la transition en CSS3 Pour une explication plus détaillée des attributs et des attributs de transformation, vous pouvez vous référer au Manuel d'apprentissage CSS3.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!