CSS implementation of text Luminescence effect method Summary

Objective

The video I recorded has not been online, and the news of the website says it is possible to join the employment course or a series of courses. There may be the end of the line, I wait for the flowers are thanks! Therefore, I saw yesterday in the course net, found that they really revised, the actual page has pictures sweeping effect, address I will not list! Feel this effect is quite good, in fact, I have done a similar effect before. Today, with this introduction, to discuss with you about the image of the sweep effect bar!

Ideas

In fact, the idea of sweeping the light is the same, nothing more than a dynamic surface layer of light, from left to right to carry out an animation movement!

But this movement of light, is generally used in the pseudo element to:: After or:: Before to achieve.

We then processed the pseudo element using a CSS gradient gradient.

The text sweeps the light

Less nonsense, we next realize a simple sweeping text!

The code is as follows

Copy Code

. sample{ Background-color: #0E1326; padding-top:30px; Overflow:hidden; } . blank_text{ position:relative; width:200px; margin:20px Auto; Color: #fff; Line-height:1; font-size:50px; Font-size:0.74074rem; Text-align:center; Overflow:hidden; font-family: "Icomoon"; } . blank_text:after{ width:300%; height:100%; Content: ""; Position:absolute; top:0; left:0; Background:-webkit-gradient (linear, left top, right top, color-stop (0, Rgba (15,20,40, 0.7)), Color-stop (0.4, Rgba (15,20) , 0.7)), Color-stop (0.5, Rgba (15,20,40, 0)), Color-stop (0.6, Rgba (15,20,40, 0.7)), Color-stop (1, Rgba (15,20,40, 0.7)) ); -webkit-animation:slide ease-in-out 2s infinite; } @-webkit-keyframes slide{ 0%{-webkit-transform:translatex (-66.666%);} 100%{-webkit-transform:translatex (0);} The HTML code is as follows: <div class= "Sample" > <div class= "Blank_text" >haorooms Blog scanning light test </div> </div>

The preview results are as follows:

Picture Sweep Light

MU-course network is moved up through the mouse, pseudo-class position changes, through the following code:

The code is as follows	Copy Code
. banner-bg. Banner-box. Right-pic:hover::before { -webkit-transition:left 8s; -moz-transition:left 8s; Transition:left 8s; left:480px; }

The position changed.

We do not have to MU-net way, I here also simple to achieve!

As follows:

The CSS code is as follows:

The code is as follows

Copy Code

@keyframes Aniblink { from { margin-left:-440px } to { margin-left:500px } } @-webkit-keyframes Aniblink { from { margin-left:-440px } to { margin-left:500px } } . logo { position:relative; width:440px; height:160px; Overflow:hidden; } . logo a { Display:inline-block } . logo A:before { Content: '; Position:absolute; width:60px; height:160px; margin-top:0px; margin-left:-440px; Overflow:hidden; Z-index:6; Overflow:hidden; Background:-moz-linear-gradient (left, RGBA (255, 255, 255, 0) 0, Rgba (255, 255, 255, 0.2) 50%, RGBA (255, 255, 255, 0) 100% ); Background:-webkit-gradient (linear, left top, right top, color-stop (0%, Rgba (255, 255, 255, 0)), Color-stop (50%, Rgba (255 , 255, 255, 0.2)), Color-stop (100%, Rgba (255, 255, 255, 0)); Background:-webkit-linear-gradient (left, RGBA (255, 255, 255, 0) 0, Rgba (255, 255, 255, 0.2) 50%, RGBA (255, 255, 255, 0) 1 0%); Background:-o-linear-gradient (left, RGBA (255, 255, 255, 0) 0, Rgba (255, 255, 255, 0.2) 50%, RGBA (255, 255, 255, 0) 100%); -webkit-transform:skewx ( -25DEG); -moz-transform:skewx ( -25DEG); } . logo:hover A:before { -webkit-animation:aniblink 8s Ease-out forwards; -moz-animation:aniblink 8s Ease-out forwards; -o-animation:aniblink 8s Ease-out forwards; Animation:aniblink 8s Ease-out Forwards }

The HTML code is as follows:

The code is as follows	Copy Code
<div class= "logo" > <a href= "http://www.111cn.net" ></a> </div>

Of course, we can also use the web of the same position offset to do, can!