css3实现光线滑过文字效果，IE不支持，试试flash做动画吧

写在前面

一日，甲方要实现一个光线滑过文字的动画效果，听到动画效果，马上就想到了html5 /css3, 而后用如下代码实现光线不断滑过文字效果，无非就是keyframes ,animation.效果很棒

.logobuilding h2 {

    text-align: center;

    background: -webkit-gradient(linear, left top, right top, color-stop(0, rgb(248,152,28)), color-stop(.4, rgb(248,152,28)), color-stop(.5, white), color-stop(.6, rgb(248,152,28)), color-stop(1, rgb(248,152,28)));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    -webkit-animation: animate 5s infinite;

}

@-webkit-keyframes animate {

   from {background-position: -100px;}

    to {background-position: 100px;}

}

@keyframes animate {

    from {background-position: -100px;}

    to {background-position: 100px;}

}

flash上阵

然而，很快就发现了bug， IE内核不支持-webkit属性，然而还必须要兼容IE浏览器，然后就各种度娘，google的搜能够IE的方法，得到的答案是，要想让她支持CSS3效果，只好坐飞机去找盖茨喽。显然CSS3的方法是行不通的。

那么很快我就想到第二种方案SVG动画，显示一顿狂搜乱看svg动画制作软件，后来发现都用不上手。

最后的最后，打开了flash软件，然后做了个遮罩动画，ctrl+enter后，奇迹发生了，在chrome浏览器里打开了动画效果，欣喜若狂：） 不光可以不用svg动画，还可以直接用canvas的代码直接套用

实现方法

STEP1 在图层一 敲入文本value

STEP2  复制图层1得到图层2，并且把图层2的文字改成白色

STEP3 新建图层3 ，用矩形工具画一个长方形并转换为元件

STEP4 在80帧处插入关键帧，并把矩形移动文字右侧，同时图层1，图层2都在80帧处插入关键帧

STEP5 在图层3 帧处右击选择创建传统补间

STEP6 右击图层3选择遮罩层

STEP7 按ctrl+enter键盘 就可以在html里看到动画效果

SETP8 查看页面源代码，并把js以及html复制到页面里，然后就大功告成