Home > Article > Web Front-end > How to achieve image light and shadow effects in css3? Introduction to the method of realizing light and shadow in css3 images
How to achieve image light and shadow effects in css3? Introduction to the method of realizing light and shadow in css3 images
- 不言Original
- 2018-10-10 15:16:234265browse
In the process of learning CSS3, we know that some of the new attributes in CSS3 can easily achieve some good-looking effects. This article will introduce you to a special effect-picture light and shadow effects. What is the light and shadow effect of pictures? Sometimes we can see a picture on a web page. When you put your mouse on this picture, a light and shadow will be drawn on the picture. This is the light and shadow effect. Isn’t it very interesting? You can use CSS3 for this. To realize it, without further ado, let’s go directly to the text.
First of all, we need to know that in this article, css3 needs to use the transition attribute and transform attribute to achieve the light and shadow effect of the image.
Let’s take a brief look at the two properties: transition attribute and transform attribute.
The transition property is a shorthand property for setting four transition properties:
transition-property: specifies the name of the CSS property that sets the transition effect.
transition-duration: Specifies how many seconds or milliseconds it takes to complete the transition effect.
transition-timing-function: Specifies the speed curve of the speed effect.
transition-delay: Define when the transition effect starts.
The transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element.
After reading these two properties, let’s look directly at the code for css3 image light and shadow implementation:
Idea: Set a transparent layer i, skewx on the X axis A deformation of minus 25 degrees was made on the background color. The background color was linear-gradient of CSS3, and then when hovering, the animation time was set to 0.5s. At the same time, use cursor:pointer on layer i. If this is not set, you need to wait for the transparent layer to animate before you can see the pointer.
<!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="How to achieve image light and shadow effects in css3? Introduction to the method of realizing light and shadow in css3 images" ></a>
<i class="light"></i>
</p>
</body>
</html>The light and shadow effects of css3 pictures are as follows:
The above is the entire content of this article, about the transition attribute and For a more detailed explanation of the transform attribute, you can refer to css3 Learning Manual.
The above is the detailed content of How to achieve image light and shadow effects in css3? Introduction to the method of realizing light and shadow in css3 images. For more information, please follow other related articles on the PHP Chinese website!