最近看到CSS动画的强大之处,所以研究了一下下。
关羽svg 属性 ------SVG 元素
SVG在线转换工具 这些 转换png格式的时候有坑,因为 alpha通道的原因,转换的时候,会将背景图变黑色(期望,内容部分为黑色),经测试 jpg格式转svg没影响。
最终我用sketch 点击左侧图片,然后生产svg代码 得到svg
CSS 很强大,走来一段图 , 网页查看
#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>里面定义了两个#downlxp #downlxb
和 keyframes mymove
,然后在<body><div id=downlxp><svg>....</svg></div>
就实现了