1. 主页
  2. 设计
  3. ICON SVG 动画

ICON SVG 动画

SVG + CSS animation 可以做出复杂的动画。

SVG本身的矢量,文件较小,加上一行css代码,就能让logo动起来。

以后logo凡事出现在屏幕上,都可以用这个方法,预计会非常good

Designed by

Designed by 

Designed by <a href=”https://www.imaiko.com/”><img style=”display: inline-block; height: 10px;” src=”https://www.imaiko.com/wp-content/uploads/2018/11/imaiko.svg” /></a>

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
viewBox="0 0 112 22" style="enable-background:new 0 0 112 22;" 
xml:space="preserve">
<style type="text/css"> 
.st3{ fill:none;stroke:#000000; 
stroke-linecap:round; 
stroke-linejoin:round; 
stroke-miterlimit:10; }
 .last {    stroke-dashoffset: 1000;     
stroke-dasharray:1000;    
animation-name:padda;    
animation: padda 3s infinite alternate;    
animation: padda 3s infinite;    
animation-timing-function: ease-in;}   
 @keyframes padda{    to {    stroke-dashoffset:0;    }}
</style>

<path class="st3 last" d="M107.9,12.5C107.2,17.3,103,21,98,21c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5,0,9.2,3.7,9.9,8.5"/> 
<line class="st3" x1="85" y1="21" x2="73" y2="11.5"/>
<line class="st3" x1="73" y1="11" x2="85" y2="1"/> 
<line class="st3" x1="72.9" y1="1" x2="72.9" y2="21"/> 
<line class="st3" x1="65" y1="1" x2="65" y2="21"/>
<path class="st3" d="M57,1v20V1z"/> 
<circle class="st3" cx="46.9" cy="11" r="10"/> 
<line class="st3" x1="32.4" y1="6.4" x2="32.5" y2="21"/>
<path class="st3" d="M22,6.4c0-3,2.4-5.4,5.2-5.4s5.2,2.4,5.2,5.4"/> 
<line class="st3" x1="22" y1="6.4" x2="22" y2="21"/> 
<path class="st3" d="M11.5,6.4c0-3,2.4-5.4,5.2-5.4S22,3.4,22,6.4"/> 
<line class="st3" x1="11.5" y1="1" x2="11.5" y2="21"/> 
<line class="st3" x1="4" y1="1" x2="4" y2="21"/></svg>
更新于 2018年12月5日

帮到你了吗?

相关文章