写在前面
一日，甲方要实现一个光线滑过文字的动画效果，听到动画效果，马上就想到了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复制到页面里，然后就大功告成
网友评论