最近看到CSS動(dòng)畫的強(qiáng)大之處，所以研究了一下下。
點(diǎn)擊飛往 git 倉庫鏈接
點(diǎn)擊查看效果
關(guān)羽svg 屬性 ------SVG 元素
SVG在線轉(zhuǎn)換工具 這些 轉(zhuǎn)換png格式的時(shí)候有坑，因?yàn)?alpha通道的原因，轉(zhuǎn)換的時(shí)候，會(huì)將背景圖變黑色（期望，內(nèi)容部分為黑色），經(jīng)測試 jpg格式轉(zhuǎn)svg沒影響。
最終我用sketch 點(diǎn)擊左側(cè)圖片，然后生產(chǎn)svg代碼 得到svg
CSS 很強(qiáng)大，走來一段圖 , 網(wǎng)頁查看
lx.gif
#downlxp{
position:relative;
animation:mymove1 5s infinite;
-moz-animation:mymove1 5s infinite; /* Firefox */
-webkit-animation:mymove1 5s infinite; /* Safari and Chrome */
-o-animation:mymove1 5s infinite; /* Opera */
}
#downlxb{
position :relative;
animation:mymove 5s infinite;
}
@keyframes mymove1{
from {top:0px;left: 200px;}
to {top:200px;left:0px;}
}
@keyframes mymove{
from {top:0px;}
to {top:200px;}
}
我在<script></script>里面定義了兩個(gè)#downlxp #downlxb 和 keyframes mymove ,然后在<body><div id=downlxp><svg>....</svg></div>就實(shí)現(xiàn)了
