无标题文章

最近看到CSS动画的强大之处,所以研究了一下下。

点击飞往 git 仓库链接
点击查看效果

关羽svg 属性 ------SVG 元素

SVG在线转换工具 这些 转换png格式的时候有坑,因为 alpha通道的原因,转换的时候,会将背景图变黑色(期望,内容部分为黑色),经测试 jpg格式转svg没影响。
最终我用sketch 点击左侧图片,然后生产svg代码 得到svg

CSS 很强大,走来一段图 , 网页查看

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>里面定义了两个#downlxp #downlxbkeyframes mymove ,然后在<body><div id=downlxp><svg>....</svg></div>就实现了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容