The front-end pure CSS3 realizes the light and shadow effect of the extraordinary picture Logo with a flash of gloss when the mouse hovers

The original text is reproduced from "Liu Yue's technology blog" https://v3u.cn/a_id_197

Friends who like watching movies will certainly notice an interesting detail, that is, the film producer will make a small special effect in the Logo link at the beginning of the film: the gloss flashes between the shadow flows. This can not only improve the recognition of the Logo, but also improve the texture and kill two birds with one stone. Refer to the example of Warner Bros. pictures:

So, in the front-end field, if you use pure CSS technology, can you achieve similar special effects? Of course, the answer is yes. This time, taking the Logo of our website as an example, we will explain how to use pure CSS technology to realize the light and shadow effect of the mouse hovering gloss of the image Logo.

In general, most front-end developers choose linear gradient (), which creates a picture representing a linear gradient of two or more colors. The result belongs to the < gradient > data type, which is a special < Image > data type.

Simple usage:

/* The gradient axis is 45 degrees, from blue to red */  
linear-gradient(45deg, blue, red);  
  
/* From bottom right to top left, from blue to red */  
linear-gradient(to left top, blue, red);  
  
/* From bottom to top, the gradient starts with blue, starts with green at 40% of the height, and ends with red */  
linear-gradient(0deg, blue, green 40%, red);

So how does it work with logo images? First, create an object. Because it is a logo, I use the a tag, that is, hyperlink, and then declare the pseudo class mylogo:

<a href="/" class="mylogo" title="Liu Yue's technology blog"></a>

After that, define the style of the logo:

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

Then linear gradient () comes out. The principle is not complex. Draw a white translucent gradient layer with linear gradient, hide it with the negative coordinates of the background, and cooperate with the transition attribute. When the mouse hovers, set a 1-second delay animation to gradually shift the coordinates of the light spot to produce a gloss passing effect:

.mylogo{  
            width: 255px;  
            height: 200px;  
   
            background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,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;  
}

It should be noted here that the default negative coordinate must exceed the width of the logo body, otherwise the displacement will not be sufficient. The effect is as follows:

It looks good. The transition attribute here is set on the pseudo class of the logo ontology. At this time, if the logo ontology loses the focus of the mouse, the spot position will return to the original negative coordinate. At this time, the light and shadow will flash back once, that is, two displacements and flickers twice in a hover. If you want to flash only once, you can load the transition into the hover pseudo class, In this way, there will be no secondary displacement after leaving, because the animation effect will only appear on the mouse hover. After the mouse leaves, there will be no animation flashback:

.mylogo{  
            width: 255px;  
            height: 200px;  
            /*Scale the version directly using background*/  
            /*The position of each gradient point cannot be too small, otherwise incomplete light spots will appear*/  
            /*no-repeat -270px 0: Hide flare positioning*/  
            background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,0.5)50%, rgba(255,255,255,0)100%) no-repeat -270px 0, url(/logo.png) no-repeat;  
           /* transition: 1s ease;  */  
        }  
  
.mylogo:hover{  
    /*Slide the mouse over to realize spot sliding, but in the case of multiple backgrounds, multiple background position attribute values are required, otherwise other backgrounds will be affected*/  
    background-position: 200px 0, 0 0;  
    transition: 1s ease;  
}

The effect is as follows:

But is this over? Not yet, because it seems... A little thousands?

If everyone uses linear gradient, it will inevitably be a little boring. Is there any other unconventional way to play?

Now that we know the principle, it is nothing more than a trick generated by displacement, so we completely break away from linear gradient and use a shiny background picture shine.png:

Because the background image is used, we need to modify the code and add a container for the background image of the entity, span tag:

<a href="/" class="mylogo" title="Liu Yue's technology blog"><span></span></a>

The style is similar to that of linear gradient. It also uses negative coordinates to hide the background image in 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;  
}

Next, it is much simpler than linear gradient. Directly set the hover attribute to make the background image shift:

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

The effect is as follows:

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

The effect in dark mode is as follows:

It seems a little more textured. In addition, you may also want to use transition to play some more exciting effects:

.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)  
}

Let's spin, jump and close our eyes:

Conclusion: both schemes can well realize light and shadow effects. The difference is that linear gradient will not consume the bandwidth of the website, but will consume the CPU and memory of the computer. Compared with the background gradient, the background image effect will be better, but the network bandwidth will be used more, and webp technology can also help us to compress the picture to the extreme (see: https://v3u.cn/a \_id\_190), so we can understand that this is a trade-off. After all, what is written in books is truth, but in reality, it is about trade-offs, isn't it?

The original text is reproduced from "Liu Yue's technology blog" https://v3u.cn/a_id_197

Tags: css3 html5 html

Posted on Sat, 04 Dec 2021 02:11:31 -0500 by vishal99