CSS3 implementation of Apple phone unlocked font shining effect example

Time:2021-11-29

0. Preface

Today, August 18, 2016, I noticed the sliding unlocking of Apple mobile phone, and a white light flashed on the prompt word, which was very cool, so I suddenly became interested in making an effect that when the mouse was placed on the font (simulated finger), the white light flashed to illuminate the font.

1. Ideas

First of all, we need to make an inclined white light, which is used to achieve the effect of “illuminating the font”.

After this step is done, the next thing is simple, that is, let the white light disappear first, and then when the mouse moves to the font, the white light appears and crosses over the font.

2. Production of white light

As can be seen from the above picture, the edge of white light does not change from white to black directly, but gradually changes into black. Therefore, when making this white light, we need to use the gradient in CSS.<linear-gradient>

Production process

First, we create a div and set a simple 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>

Operation results:

2. Set gradient.

Set a gradient from “black – > White – > black”, with a certain angle of inclination.

code:

background: -webkit-linear-gradient(-45deg,
  #000 100px,
  #FFF 140px,
  #FFF 220px,
  #000 260px);
/*The angle setting is - 45 °*/

At this time, the running result:

In addition, the starting direction and angle of the gradient are described as follows:

1. If the gradient direction and angle are not set, the default is top-down gradient;
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 indicate that the gradient starts from the corresponding four corners
4. The angle can be set. The angle of the linear gradient starts counterclockwise from the negative half axis of the X axis. The angle here is set to – 45 °,

Therefore, it gradually changes from the upper left corner to the lower right corner.

3. Setting background text here, some people may have questions: why do you say setting background text alone?

Because there is an obvious trap here!

What is it? I won’t explain it here. There will be a specific phenomenon to you later.

Here, set the font normally.

font-size: 50px;
text-align: center;
line-height: 200px;
color: white;
/*The setting text is: la la la la la la la de Marcia*/

4. Sliding effect of white light

There’s nothing to say about this. Let the white light disappear first. When the mouse is placed on the div, the white light appears and then crosses.

Directly:


background-position: -1000px,0px;

effect:

Uh… Uh, what’s going on??

Well, the background is repeated. Background repeat must be set here: no repeat; (Note: the font is white, so the text will not be displayed temporarily)

Set dynamic pseudo class:


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

For the effect, we set the background color of the whole body to black.

Effect: when the mouse is not moved to the div, only text is displayed. When the mouse is placed on the div, a white light will cross.

3.background-clip:text

White light is done, but it is different from what we think.

You know, what we want to force is to only illuminate the text, rather than make you scratch like a laser.

Therefore, at this time, we need to use a label:<background-clip:text>

The meaning of this label is that all backgrounds other than text can be cut off. This will achieve our results.

However, it should be noted that this tag should be prefixed with the browser when it is used, because many browsers cannot recognize it without the browser prefix.

Look directly at the results.

what?! Why didn’t it work? Where’s my white light?

At this time, you will find that when the mouse moves up, there is no phenomenon. The phenomenon of white light has disappeared!

Did it really disappear?

Of course not. The white light actually exists here, but is blocked by words.

Remember why I took out the setting text separately before? Because if the text is only a separate color setting, it can’t. We need to give the text a transparency, so that the white light of the background can be displayed through the text.

At this time, we should use the RGBA method to set the color of the text to give the text a certain transparency.

<color:rgba(255,255,255,0.1);>

In this way, the effect of illuminating the font we want is realized. (^__^ )

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(255,255,255,1);
			background: -webkit-linear-gradient(-45deg,
				#000 100px,
				#FFF 140px,
				#FFF 220px,
				#000 260px);
			/*The angle setting 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 > la la la la la la la de Marcia</ div>
</body>
</html>

This is the end of this article about CSS3’s example of the font shining effect of Apple mobile phone unlocking. For more information about CSS3’s apple unlocking font shining, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

On the mutation mechanism of Clickhouse (with source code analysis)

Recently studied a bit of CH code.I found an interesting word, mutation.The word Google has the meaning of mutation, but more relevant articles translate this as “revision”. The previous article analyzed background_ pool_ Size parameter.This parameter is related to the background asynchronous worker pool merge.The asynchronous merge and mutation work in Clickhouse kernel is completed […]