Implementation of text sweep effect code in CSS3

CSS3 to achieve the text sweep effect, almost comparable with Flash

Effect analysis

Let's analyze the functionality that is needed to achieve this effect:

Implement a sweep background block because the light is moving, so add a gradient effect (e.g. a small area of a flashlight)

To control the sweep background block to the text (that is, to implement the text background)

To achieve sweeping animation (sweep of light block from left to right loop movement)

The idea is clear, and the next step is to realize the

Background gradient-webkit-linear-gradient (forming sweep background block)

Background: #111-webkit-linear-gradient (left, #111, #fff) 0 0 no-repeat;
background-size:80px

The default background is black, a black and white gradient from left to right, background in the upper left corner, no repetition, background size 80x80 (sweep background block)

Background range-webkit-background-clip (implementing text background)

In order to achieve the text sweep, we have to take the previous step to form the sweep background block, control in the text above

Background-clip has three attributes: Border-box, Padding-box, Content-box (the effect is not detailed)

Obviously these attributes do not meet our needs, and there is no property to control the text background

But under WebKit, Background-clip has the attribute that Background-clip:text is usually used with its private properties-webkit-text-fill-color (fill text color)

Background animation (sweep light animation)

@-webkit-keyframes Slideshine {
0% {
background-position:0 0;
}
100% {
background-position:100% 100%;
}
}
To achieve the effect of sweeping by adjusting the position of the background (from left to right)

Effect instance

CSS Code
. BG {
Background: #000;
width:1000px;
height:300px;
margin:0 Auto;
padding-top:100px;
}
. slideshine {
width:1000px;
font-family: "Microsoft Yahei";
font-size:60px;
Text-align:center;
Background: #111-webkit-linear-gradient (left, #111, #fff) 0 0 no-repeat;
-webkit-background-size:80px;
-webkit-background-clip:text;
-webkit-text-fill-color:rgba (255, 255, 255, 0.3);
-webkit-animation:slideshine 3s infinite;
}
@-webkit-keyframes Slideshine {
0% {
background-position:0 0;
}
100% {
background-position:100% 100%;
}
}
HTML Code
<div class= "BG" >
<p class= "Slideshine" >welcome to Xinpurezhu blog</p>
</div>

Effect illustration