The foreword 0.

Do you still remember that when the iPhone was sliding to unlock, there would be a white flash on the prompt word, which felt very cool, so I suddenly wanted to make a white flash on the font to illuminate the effect when the mouse was placed on the font (simulating fingers).

1. The train of thought

First, you need to create a slanted white light that will “illuminate the font”.

Once this is done, the next thing to do is to make the white light disappear first, and then when the mouse moves over the font, the white light appears and moves across the font.

2. Production of white light

As you can see in the image above, the edge of the white light does not change from white to black directly, but fades to black. So, when we create this white light, we need to use CSS gradients.

  1. The production process

    1. We’ll start by creating a div and setting a simple centered default style.

    Code:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin: 0; } div{ width: 700px; height: 200px; border: 1px solid black; margin: 0 auto; } </style> </head> <body> <div></div> </body> </html>Copy the code
Running results:Copy the code

  1. Set the gradient.

Set a gradient from “black -> White -> Black” to a certain Angle.

Code:

background: -webkit-linear-gradient(-45deg, #000 100px, #FFF 140px, #FFF 220px, #000 260px); /* Set the Angle to -45°*/Copy the code

At this point, the result is:

1. If the gradient direction and Angle are not set, the default gradient is from top to bottom. 2. If the gradient direction is set, follow the set direction, for example: <background: -webkit-Linear-gradient (right,red,yellow, blue)> The gradient direction is red,yellow, and blue from right to left. 3. You can set top right, right bottom, left bottom, and top left to change the gradient from the corresponding corners. You can set the Angle. The Angle of the linear gradient is calculated counterclockwise from the negative half of the X axis. Here the Angle is set to -45 degrees, so the gradient goes from the top left to the bottom right.Copy the code
  1. Set the background text

At this point, some people may have a question: why set the background word separately?

Because there’s a catch that’s not obvious!

I won’t tell you what it is, but I’ll show you what it is.

Here is the general setting of the font.

font-size: 50px; text-align: center; line-height: 200px; color: white; /* Set the text to: la la la la la la de Macia!! * /Copy the code
  1. White light sliding effect

This is not much to say, first make the white light disappear, when the mouse over the div, the white light appears, and then across.

Directly on:Copy the code
background-position: -1000px,0px;
Copy the code

Effect:

Uh… Uh, what’s going on?

Okay, the background repeats. Be sure to set background-repeat: no-repeat; (Note: The font is white, so the text will not be displayed for the time being.)

Set the dynamic pseudo class:

div:hover{
  background-position: 1000px,0px;
  transition:all 5s;
}
Copy the code

We set the background color of the entire body to black for effect.

Effect, when the mouse is not over the div, only text is displayed, and when the mouse is over the div, a white light moves across it.

3. The background – clip: text

The white light is done, but it’s not exactly what we expected.

You know, the trick we want is to just light up the text, not make you slurp through it like a laser.

The meaning of this label is: you can remove all background except text. So that’s what we’re going to do.

Note, however, that this tag is used with a browser prefix, because many browsers don’t recognize it without a browser prefix.

Just look at the results.

What? ! Why didn’t it work? Where is my white light?

At this point, you will find that when the mouse moves up, there is no phenomenon. The white light is gone!

Did it really disappear?

Of course not. The white light is actually there, but it’s blocked by the text.

Remember why I had to separate out the Settings text earlier? Because if the text is just a separate color, it won’t work. We need to give the text transparency so that the white light of the background can be seen through the text.

At this point we should use rGBA method to set the color of the text, give the text some transparency.

"Color: rgba (255255255,0.1); >

This will give us the desired effect of lighting up the font. (^ __ ^)

The overall code is attached below:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin: 0; background: #000; } div{ width: 1000px; height: 200px; border: 1px solid black; margin: 0 auto; font-size: 70px; text-align: center; line-height: 200px; Color: rgba (255255255, 1); background: -webkit-linear-gradient(-45deg, #000 100px, #FFF 140px, #FFF 220px, #000 260px); /* The Angle is -45°*/ background-position: -1000px,0px; background-repeat: no-repeat; -webkit-background-clip: text; } div:hover{ background-position: 1000px,0px; transition:all 5s; } </style> </head> <body> <div> </div> </body> </html>Copy the code