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

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

0. Introduction

1. Idea

2. Production of white light

2. Set the gradient.

3.background-clip: text

Deploy Confluence with Docker

Zabbix monitoring solution - the latest official version 4.4 [recommended]

Design Reference Beautiful and Original Blog Design

Html makes a simple and beautiful login page

vue-cropper component realizes image cutting and uploading

The reason why MySQL uses B+ tree as its underlying data structure

CSS3 realizes the animation of shuttle starry sky

10 kinds of loading animations implemented with CSS3, pick one and go?

Mysql table creation foreign key error solution

Things to note when designing web pages for small-screen mobile devices

Recommend

Vue implements a movable floating button

Detailed explanation of the code between the MySQL master library binlog (master-log) and the slave library relay-log

Summary of JavaScript custom object methods

SQL merge operation of query results of tables with different columns

Alibaba Cloud Centos7.3 installation mysql5.7.18 rpm installation tutorial

Use of Linux dynamic link library

Examples of new selectors in CSS3

33 of the best free English fonts shared

vue+element custom query component

JavaScript implements select all and unselect all operations

How to Install Oracle Java 14 on Ubuntu Linux

Detailed explanation of the Docker container lifecycle architecture and the differences between it and VM

How to install Oracle_11g using Docker

JS native 2048 game source code sharing (the latest on the Internet)

Pure HTML+CSS to achieve Element loading effect