寫在前面
一日，甲方要實(shí)現(xiàn)一個(gè)光線滑過文字的動畫效果，聽到動畫效果，馬上就想到了html5 /css3, 而后用如下代碼實(shí)現(xiàn)光線不斷滑過文字效果，無非就是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上陣
然而，很快就發(fā)現(xiàn)了bug， IE內(nèi)核不支持-webkit屬性，然而還必須要兼容IE瀏覽器，然后就各種度娘，google的搜能夠IE的方法，得到的答案是，要想讓她支持CSS3效果，只好坐飛機(jī)去找蓋茨嘍。顯然CSS3的方法是行不通的。
那么很快我就想到第二種方案SVG動畫，顯示一頓狂搜亂看svg動畫制作軟件，后來發(fā)現(xiàn)都用不上手。
最后的最后，打開了flash軟件，然后做了個(gè)遮罩動畫，ctrl+enter后，奇跡發(fā)生了，在chrome瀏覽器里打開了動畫效果，欣喜若狂：） 不光可以不用svg動畫，還可以直接用canvas的代碼直接套用
實(shí)現(xiàn)方法
STEP1 在圖層一 敲入文本value
STEP2? 復(fù)制圖層1得到圖層2，并且把圖層2的文字改成白色
STEP3 新建圖層3 ，用矩形工具畫一個(gè)長方形并轉(zhuǎn)換為元件
STEP4 在80幀處插入關(guān)鍵幀，并把矩形移動文字右側(cè)，同時(shí)圖層1，圖層2都在80幀處插入關(guān)鍵幀
STEP5 在圖層3 幀處右擊選擇創(chuàng)建傳統(tǒng)補(bǔ)間
STEP6 右擊圖層3選擇遮罩層
STEP7 按ctrl+enter鍵盤 就可以在html里看到動畫效果
SETP8 查看頁面源代碼，并把js以及html復(fù)制到頁面里，然后就大功告成
