CSS3 to achieve text sweep effect

This post consists of: http://xinpure.com/css3-text-light-sweep-effect/

CSS3 implementation of the text sweep effect, almost comparable to Flash

Effect analysis

Let's analyze the functionality required to achieve this effect:

1. Implement a sweep background block because the light is moving, so add a gradient effect (for example: a small piece of area illuminated by a flashlight)

2. Control the sweep background block to text (that is, to implement the text background)

3. Implement sweep animation (sweep blocks move from left to right)

The idea is clear, the next step is to achieve the

Background gradient-webkit-linear-gradient (form 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 is created from left to right, the background is in the upper left corner, not duplicated, and the background size 80x80 (sweep background block)

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

In order to realize the text sweep, we must take the sweep background block formed in the previous step, control the text above

background-clipThere are three properties: Border-box, Padding-box, Content-box (Specific effect not detailed)

Obviously these attributes do not meet our needs, and there are no attributes that can control the text background.

However webkit background-clip , there is a property that is usually used in conjunction with background-clip: text its private properties -webkit-text-fill-color (fill text color)

Background animation (sweep animation)

@-webkit-keyframes slideShine {    0% {        background-position: 0 0;    }    100% {        background-position: 100% 100%;    }}

The sweep effect is achieved by adjusting the position of the background (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;    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

CSS3 to achieve text sweep effect