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

Detailed explanation of Vue configuration request multiple server solutions

1. Solution 1.1 Describing the interface context-...

How to prevent the scroll bar from affecting the page width when the scroll bar appears on the page

Set the width of the body to the width of the wind...

A few experiences in self-cultivation of artists

As the company's influence grows and its prod...

SASS Style Programming Guide for CSS

As more and more developers use SASS, we need to ...

mysql8.0.11 winx64 manual installation and configuration tutorial

First of all, let me talk to you about my daily l...

Common writing examples for MySQL and Oracle batch insert SQL

Table of contents For example: General writing: S...

Implementation of draggable rows and columns and selection column components based on el-table encapsulation

Effect Need environment vue elementUI Drag and dr...

Problems and solutions of error 08001 when linking to MySQL in IDEA and no table display after successful connection

Error: Connection to blog0@localhost failed. [080...

Text mode in IE! Introduction to the role of DOCTYPE

After solving the form auto-fill problem discussed...

100-1% of the content on the website is navigation

Website, (100-1)% of the content is navigation 1....

Use of MySQL SHOW STATUS statement

To do MySQL performance adjustment and service st...

Detailed explanation and summary of the URL for database connection

Detailed explanation and summary of the URL for d...

Perfect solution to Google Chrome autofill problem

In Google Chrome, after successful login, Google ...

JavaScript to achieve JD.com flash sale effect

This article shares the specific code of JavaScri...

VMware ESXI server virtualization cluster

Table of contents summary Environment and tool pr...