The original article is reprinted from liu Yue’s Technology blog v3u.cn/a_id_197

Moviegoers will surely notice an interesting detail, which is that the producers of the movie will definitely make a small special effect in the Logo section at the beginning of the film: a flash of light between the shadows. This can not only improve the Logo’s recognition, but also improve the texture, killing two birds with one stone. Consider Warner Bros. Pictures:

So, on the front end, can you achieve similar effects using pure CSS? Of course, the answer is yes, this time we take the Logo of this site as an example, with a hold million, the gist of how to explain how to use pure CSS technology to achieve the image Logo mouse hover luster flash light and shadow effects.

In general, most front-end development will choose Linear-gradient (), which creates an image that represents a linear gradient of two or more colors. The result is a data type and is a special kindData type.

Simple usage:

/* The gradient axis is 45 degrees, from blue to red */ Linear-gradient (45deg, blue, red); /* Linear gradient(to left top, blue, red); /* Linear gradient(to left top, blue, red); /* Linear gradient(0deg, blue, green 40%, red); /* Linear gradient(0deg, blue, green 40%, red);Copy the code

So how does it work with a logo image? First I create an object, because it’s a logo, so I use the A tag, which is the hyperlink, and then declare the pseudo-class myLOGO:

<a href="/" class="mylogo" title=" mylogo" >Copy the code

After that, define the logo style:

.mylogo{	  
		display:block;  
		margin: 0 auto;  
    width:255px;  
    height:200px;  
    background-image:/logo.png;  
    background-repeat: no-repeat;  
}
Copy the code

Linear-gradient () is then introduced. The principle is not complicated. Linear-gradient is used to draw a white translucent gradient layer and hide it by using the negative coordinates of the background. Gradually shift the coordinates of the spot to produce an effect of gloss passing:

.mylogo{ width: 255px; height: 200px; background: -- its -- linear gradient (left, rgba (255255255, 0, 0), rgba (255255255,0.5) 50%, Rgba (255,255,255,0)100%) no-repeat -270px 0, url(/logo.png) no-repeat; transition: 1s ease; } .mylogo:hover { background-position: 200px 0, 0 0; }Copy the code

Note that the default negative coordinates must exceed the width of the logo body, otherwise the displacement will not be sufficient, and the effect will look like this:

This transition is set to the pseudo-class of the logo body, and if the logo body loses focus, the spot goes back to its original negative position, and the light flashes back again. We can load the transition into the hover pseudo-class, so there is no secondary shift, because the animation only appears over the hover, and there is no animation after the hover:

.mylogo{ width: 255px; height: 200px; /* Use the background zoom version directly */ /* The position of each gradient point should not be too small, otherwise there will be incomplete spots */ *no-repeat -270px 0: Hide spot location */ background: -- its -- linear gradient (left, rgba (255255255, 0, 0), rgba (255255255,0.5) 50%, Rgba (255,255,255,0)100%) no-repeat -270px 0, url(/logo.png) no-repeat; /* transition: 1s ease; */}. Mylogo :hover{/* background-position: 200px 0, 0; transition: 1s ease; }Copy the code

It works like this:

But is that the end of it? Not yet, because it seems like… A little bit of the same?

Linear-gradient would be a little boring if everyone tried to use it, but is there another way to break the mold?

Now that we know the principle is nothing more than a trick of displacement generation, we completely deviate from Linear-gradient and use a background image with a glossy texture shine. PNG:

Since the background image is used, we need to modify the code to add a container for the background image of the entity, the SPAN tag:

< a href = "/" class = "mylogo" title = "Liu Yue technology blog" > < span > < / span > < / a >Copy the code

Similar to Linear-gradient, it also uses negative coordinates to hide the background image inside the SPAN tag:

.mylogo span {  
	display: block;  
	background: url("/shine.png") -360px -380px no-repeat;	  
  
	transition-property: all;  
	transition-duration: .7s;  
  
	height: 200px;  
	width: 255px;  
}
Copy the code

The next step is much simpler than Linear-gradient, which directly sets the hover attribute to shift the background image:

.mylogo:hover span {  
	background-position: 100px 300px;  
}
Copy the code

It works like this:

If you observe carefully, you will find that the background image is more consistent with the effect of passing light and shadow, because each gradient point of Linear-gradient is not uniform under different resolutions of the screen, that is to say, incomplete light spots will appear at high resolution.

Dark mode looks like this:

It looks a little bit more textured, but you might want to do something a little more exciting with the transition:

.mylogo:hover {  
            -webkit-transform: rotate(666turn);  
			transform: rotate(666turn);  
			transition-delay: 1s;  
			transition-property: all;  
			transition-duration: 59s;  
			transition-timing-function: cubic-bezier(.34, 0, .84, 1)  
}
Copy the code

Let’s spin and jump and close our eyes:

Conclusion: The difference between the two schemes is that Linear-gradient does not consume the bandwidth of the website, but the CPU and memory of the computer. Compared with background gradient, the background image has a better effect, but it will use more network bandwidth. Webp technology allows us to compress images to the extreme, so it’s understandable that this is a tradeoff. After all, it’s what’s written in the book, but it’s a trade-off in real life, right?

The original article is reprinted from liu Yue’s Technology blog v3u.cn/a_id_197