1.Animate.css簡介
Animate.css是一個可在您的Web項(xiàng)目中使用的即用型跨瀏覽器動畫庫尊残。非常適合強(qiáng)調(diào)，首頁，滑塊和引導(dǎo)注意的提示。它是一個來自國外的 CSS3 動畫庫帆阳，它預(yù)設(shè)了抖動（shake）哺壶、閃爍（flash）屋吨、彈跳（bounce）、翻轉(zhuǎn)（flip）山宾、旋轉(zhuǎn)（rotateIn/rotateOut）至扰、淡入淡出（fadeIn/fadeOut）等多達(dá) 60 多種動畫效果，幾乎包含了所有常見的動畫效果资锰。雖然借助Animate.css能夠很方便敢课、快速的制作 CSS3 動畫效果，但還是建議看看Animate.css的代碼绷杜，也許你能從中學(xué)到一些東西直秆。不論是在Web端和小程序內(nèi)都可以正常使用，詳細(xì)內(nèi)容請到官方地址學(xué)習(xí)鞭盟。
2.動畫效果的實(shí)現(xiàn)
在使用過程中圾结，可以根據(jù)自己的喜好來改造css代碼來達(dá)到你想要的效果，文中動圖顯示可能不是特別直觀齿诉，建議自己寫一遍代碼筝野，即利于學(xué)習(xí)晌姚，又能夠直觀的體會到動畫效果。
1.發(fā)光的盒子
wxml代碼：
<viewid="box">I am LetCode!</view>
wxss代碼：
@keyframesanimated-border{0%{box-shadow:0000rgba(255,255,255,0.4);? }100%{box-shadow:00020pxrgba(255,255,255,0);? }}#box{animation:animated-border1.5sinfinite;height:100rpx;font-family:Arial;font-size:18px;font-weight:bold;color:white;border:2pxsolid;border-radius:10px;margin:100px15px;line-height:100rpx;text-align:center;}
2.文字的縮放效果
wxml代碼：
<viewclass="animate_zoomOutDown">關(guān)注公眾號“Let編程”,有更多分享歇竟！</view>
wxss代碼：
@keyframeszoomOutDown{40%{opacity:1;transform:scale3d(0.475,0.475,0.475)translate3d(0,-60px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);? }to{opacity:0;transform:scale3d(0.1,0.1,0.1)translate3d(0,2000px,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1);? }}.animate_zoomOutDown{animation:2slinear0sinfinitealternatezoomOutDown;font-family:Arial;font-size:18px;font-weight:bold;color:white;margin-top:70px;text-align:center;margin-top:15px;}
3.加載動畫
wxml代碼：
<viewclass="load-container load"><viewclass="loader"></view></view><viewclass="txt">關(guān)注公眾號“Let編程”,有更多分享挥唠！</view>
wxss代碼：
.load-container{width:240px;height:240px;margin:0auto;position:relative;overflow:hidden;box-sizing:border-box;}.load.loader{color:#ffffff;font-size:90px;text-indent:-9999em;overflow:hidden;width:1em;height:1em;border-radius:50%;margin:72pxauto;position:relative;transform:translateZ(0);animation:load1.7sinfiniteease,round1.7sinfiniteease;}@keyframesload{0%{box-shadow:0-0.83em0-0.4em,0-0.83em0-0.42em,0-0.83em0-0.44em,0-0.83em0-0.46em,0-0.83em0-0.477em;}5%,95%{box-shadow:0-0.83em0-0.4em,0-0.83em0-0.42em,0-0.83em0-0.44em,0-0.83em0-0.46em,0-0.83em0-0.477em;}10%,59%{box-shadow:0-0.83em0-0.4em,-0.087em-0.825em0-0.42em,-0.173em-0.812em0-0.44em,-0.256em-0.789em0-0.46em,-0.297em-0.775em0-0.477em;}20%{box-shadow:0-0.83em0-0.4em,-0.338em-0.758em0-0.42em,-0.555em-0.617em0-0.44em,-0.671em-0.488em0-0.46em,-0.749em-0.34em0-0.477em;}38%{box-shadow:0-0.83em0-0.4em,-0.377em-0.74em0-0.42em,-0.645em-0.522em0-0.44em,-0.775em-0.297em0-0.46em,-0.82em-0.09em0-0.477em;}100%{box-shadow:0-0.83em0-0.4em,0-0.83em0-0.42em,0-0.83em0-0.44em,0-0.83em0-0.46em,0-0.83em0-0.477em;}}@keyframesround{0%{transform:rotate(0deg);? ? }100%{transform:rotate(360deg);? ? }}
4.抖動的文字
wxml代碼：
<viewclass="shake-slow txt">關(guān)注公眾號“Let編程”,有更多分享！</view>
wxss代碼：
@keyframesshake-slow{2%{transform:translate(6px,-2px)rotate(3.5deg);? }4%{transform:translate(5px,8px)rotate(-0.5deg);? }6%{transform:translate(6px,-3px)rotate(-2.5deg);? }8%{transform:translate(4px,-2px)rotate(1.5deg);? }10%{transform:translate(-6px,8px)rotate(-1.5deg);? }12%{transform:translate(-5px,5px)rotate(1.5deg);? }14%{transform:translate(4px,10px)rotate(3.5deg);? }16%{transform:translate(0px,4px)rotate(1.5deg);? }18%{transform:translate(-1px,-6px)rotate(-0.5deg);? }20%{transform:translate(6px,-9px)rotate(2.5deg);? }22%{transform:translate(1px,-5px)rotate(-1.5deg);? }24%{transform:translate(-9px,6px)rotate(-0.5deg);? }26%{transform:translate(8px,-2px)rotate(-1.5deg);? }28%{transform:translate(2px,-3px)rotate(-2.5deg);? }30%{transform:translate(9px,-7px)rotate(-0.5deg);? }32%{transform:translate(8px,-6px)rotate(-2.5deg);? }34%{transform:translate(-5px,1px)rotate(3.5deg);? }36%{transform:translate(0px,-5px)rotate(2.5deg);? }38%{transform:translate(2px,7px)rotate(-1.5deg);? }40%{transform:translate(6px,3px)rotate(-1.5deg);? }42%{transform:translate(1px,-5px)rotate(-1.5deg);? }44%{transform:translate(10px,-4px)rotate(-0.5deg);? }46%{transform:translate(-2px,2px)rotate(3.5deg);? }48%{transform:translate(3px,4px)rotate(-0.5deg);? }50%{transform:translate(8px,1px)rotate(-1.5deg);? }52%{transform:translate(7px,4px)rotate(-1.5deg);? }54%{transform:translate(10px,8px)rotate(-1.5deg);? }56%{transform:translate(-3px,0px)rotate(-0.5deg);? }58%{transform:translate(0px,-1px)rotate(1.5deg);? }60%{transform:translate(6px,9px)rotate(-1.5deg);? }62%{transform:translate(-9px,8px)rotate(0.5deg);? }64%{transform:translate(-6px,10px)rotate(0.5deg);? }66%{transform:translate(7px,0px)rotate(0.5deg);? }68%{transform:translate(3px,8px)rotate(-0.5deg);? }70%{transform:translate(-2px,-9px)rotate(1.5deg);? }72%{transform:translate(-6px,2px)rotate(1.5deg);? }74%{transform:translate(-2px,10px)rotate(-1.5deg);? }76%{transform:translate(2px,8px)rotate(2.5deg);? }78%{transform:translate(6px,-2px)rotate(-0.5deg);? }80%{transform:translate(6px,8px)rotate(0.5deg);? }82%{transform:translate(10px,9px)rotate(3.5deg);? }84%{transform:translate(-3px,-1px)rotate(3.5deg);? }86%{transform:translate(1px,8px)rotate(-2.5deg);? }88%{transform:translate(-5px,-9px)rotate(2.5deg);? }90%{transform:translate(2px,8px)rotate(0.5deg);? }92%{transform:translate(0px,-1px)rotate(1.5deg);? }94%{transform:translate(-8px,-1px)rotate(0.5deg);? }96%{transform:translate(-3px,8px)rotate(-1.5deg);? }98%{transform:translate(4px,8px)rotate(0.5deg);? }0%,100%{transform:translate(0,0)rotate(0);? }}.shake-slow{animation:shake-slow5sinfiniteease-in-out;}
在實(shí)際開發(fā)過程中焕议，遠(yuǎn)不止這些炫酷的動畫效果宝磨，在互聯(lián)網(wǎng)迅速的發(fā)展?fàn)顟B(tài)下，還需要更多的程序員來實(shí)現(xiàn)功能需求号坡，因此本文只做簡單的介紹懊烤，未完待續(xù).....
