CSS3實現文字掃光效果

本篇文章由：http://xinpure.com/css3-text-light-sweep-effect/

CSS3 實現的文字掃光效果，幾乎可以和 Flash 相媲美了

效果解析

我們分析一下實現這個效果需要實現的功能:

1. 實現一個掃光背景塊，因為光是移動的，所以要加入漸變效果 (例如: 手電筒照射的一小塊區域)

2. 將掃光背景塊控制到文本上 (即實現文本背景)

3. 實現掃光動畫 (掃光塊從左往右循環移動)

思路理清了，接下來就是一步一步實現了

背景漸變 -webkit-linear-gradient (形成掃光背景塊)

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

默認背景為黑色，從左往右產生黑白漸變效果，背景位於左上角，不重復，背景大小80x80 (掃光背景塊)

背景范圍 -webkit-background-clip (實現文本背景)

為了實現文字掃光，我們必須把上一步形成的掃光背景塊，控制在文字上面

background-clip 有三個屬性: border-box, padding-box, content-box (具體效果不細說了)

顯然這些屬性並不能滿足我們的這個需求，並沒有可以控制文字背景的屬性

但是在 webkit 下 background-clip 就有這樣一個屬性，那就是 background-clip: text 通常會配合其私有屬性 -webkit-text-fill-color (填充文本顏色) 一起使用

背景動畫 (掃光動畫)

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

通過調整背景的位置(從左往右)，來達到掃動的效果

效果實例

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>

效果示圖