寫(xiě)在前面
一日，甲方要實(shí)現(xiàn)一個(gè)光線滑過(guò)文字的動(dòng)畫(huà)效果纯蛾，聽(tīng)到動(dòng)畫(huà)效果纤房，馬上就想到了html5 /css3, 而后用如下代碼實(shí)現(xiàn)光線不斷滑過(guò)文字效果，無(wú)非就是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動(dòng)畫(huà)洪乍，顯示一頓狂搜亂看svg動(dòng)畫(huà)制作軟件，后來(lái)發(fā)現(xiàn)都用不上手夜焦。
最后的最后壳澳，打開(kāi)了flash軟件，然后做了個(gè)遮罩動(dòng)畫(huà)茫经，ctrl+enter后巷波，奇跡發(fā)生了，在chrome瀏覽器里打開(kāi)了動(dòng)畫(huà)效果卸伞，欣喜若狂：） 不光可以不用svg動(dòng)畫(huà)抹镊，還可以直接用canvas的代碼直接套用
實(shí)現(xiàn)方法
STEP1 在圖層一 敲入文本value
STEP2? 復(fù)制圖層1得到圖層2，并且把圖層2的文字改成白色
STEP3 新建圖層3 瞪慧，用矩形工具畫(huà)一個(gè)長(zhǎng)方形并轉(zhuǎn)換為元件
STEP4 在80幀處插入關(guān)鍵幀髓考，并把矩形移動(dòng)文字右側(cè)，同時(shí)圖層1弃酌，圖層2都在80幀處插入關(guān)鍵幀
STEP5 在圖層3 幀處右擊選擇創(chuàng)建傳統(tǒng)補(bǔ)間
STEP6 右擊圖層3選擇遮罩層
STEP7 按ctrl+enter鍵盤(pán) 就可以在html里看到動(dòng)畫(huà)效果
SETP8 查看頁(yè)面源代碼氨菇，并把js以及html復(fù)制到頁(yè)面里儡炼，然后就大功告成
