Example of using CSS3 to achieve shiny font effect when unlocking an Apple phone

Example of using CSS3 to achieve shiny font effect when unlocking an Apple phone

0. Introduction

August 18, 2016 Today, I noticed that when the iPhone slides to unlock, a white light flashes on the prompt text, which feels very cool. So I suddenly became interested in making an effect where when the mouse is placed on the text (simulating a finger), a white light flashes and illuminates the text.

1. Idea

First of all, you need to make a slanted white light, which is used to achieve the effect of "illuminating the font".

After completing this step, 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 passes over the font.

2. Production of white light

As you can see from the picture above, the edge of the white light does not change directly from white to black, but gradually changes to black. Therefore, when we make 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 centered 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>

Running results:

2. Set the 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 is set to -45°*/

At this point, the running result is:

In addition, the starting angle of the gradient is explained as follows:

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, then follow the set direction.
For example: <background: -webkit-linear-gradient(right,red,yellow，blue)> is set
The gradient direction is red, yellow, and blue from right to left.
3. You can set top right, right bottom, left bottom, top left, which means the gradient starts from the corresponding four corners.
4. The angle can be set. The linear gradient angle starts from the negative half of the X axis and is counted counterclockwise. The angle here is set to -45°.

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

3. Setting the background text At this point, some people may have questions: Why do we have to talk about setting the background text separately?

Because there is a subtle trap here!

I won’t explain what it is specifically here, but I will present the specific phenomena to you later.

Here we first set the font in general.

font-size: 50px;
text-align: center;
line-height: 200px;
color: white;
/*The set text is: La la la la la la la la Demacia! ! */

4. Sliding effect of white light

There is nothing much to say about this. First make the white light disappear. When the mouse is placed on the div, the white light appears and then moves across.

Directly:

background-position: -1000px,0px;

Effect:

Uh...uh, what's going on? ?

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

To set a dynamic pseudo-class:

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

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

The effect is that when the mouse is not moved to the div, only the text is displayed. When the mouse is placed on the div, a white light will pass by.

3.background-clip: text

The white light was done, but it was not quite the same as we imagined.

You know, what we want is to illuminate the text instead of having it whiz across like a laser.

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

The meaning of this tag is: all backgrounds except text can be removed. This will achieve our effect.

However, please note that this tag must be added with a browser prefix when used, because many browsers cannot recognize it without the browser prefix.

Just look at the results.

What? ! Why is there no effect? Where is my white light?

At this time, you will find that when you move the mouse over it, nothing happens. The phenomenon of white light flashing disappeared!

Is it really gone?

Of course not, the white light here actually exists, it is just blocked by the text.

Remember why I mentioned the setting text separately before? Because if you just set the color of the text alone, it won’t work. We need to give the text a transparency so that the white light of the background can show through the text.

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

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

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

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 is set to -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 Demacia! ! </div>
</body>
</html>

This is the end of this article about the example of how to achieve the font shining effect for Apple mobile phone unlocking with CSS3. For more relevant CSS3 Apple unlocking font shining content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  Solution to using html2canvas to process Dom elements with Baidu map into images

>>:  Docker installation of Nginx problems and error analysis

Recommend

css3 flex layout justify-content:space-between the last line is aligned to the left

When using justify-content:space-between layout, ...

Deep understanding of JavaScript syntax and code structure

Table of contents Overview Functionality and read...

Tutorial on installing Microsoft TrueType fonts on Ubuntu-based distributions

If you open some Microsoft documents with LibreOf...

TCP socket SYN queue and Accept queue difference analysis

First we must understand that a TCP socket in the...

Good website copywriting and good user experience

Looking at a website is actually like evaluating a...

Tips on disabling IE8 and IE9's compatibility view mode using HTML

Starting from IE 8, IE added a compatibility mode,...

Detailed explanation of solving the problem of cross-domain access of nginx/apache static resources

1. Apache static resource cross-domain access Fin...

MySQL solution for creating horizontal histogram

Preface Histogram is a basic statistical informat...

About uniApp editor WeChat sliding problem

The uniapp applet will have a similar drop-down p...

Using CSS3 to create header animation effects

Netease Kanyouxi official website (http://kanyoux...

CocosCreator Universal Framework Design Network

Table of contents Preface Using websocket Constru...

Vue implements adding watermark effect to the page

Recently, when I was working on a project, I was ...

Summary of React's way of creating components

Table of contents 1. Create components using func...

Website Design Experience Summary of Common Mistakes in Website Construction

Reminder: Whether it is planning, designing, or de...

Learn the black technology of union all usage in MySQL 5.7 in 5 minutes

Performance of union all in MySQL 5.6 Part 1:MySQ...