因为专注,所以专业
2005 - 2020

如何使用SVG及其动画技术为你的 Web 前端开发带来一些新鲜的体验

时间:2020-02-05 17:14:12    作者:八叔模板堂

可缩放矢量图形

SVG 路径

<!-- A right-angled triangle -->
<path d="M10 10 L75 10 L75 75 Z" />

SVG 路径与 CSS

<path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
<svg width="300px" height="175px" version="1.1">

   <path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

</svg>
svg {
 width: 300px;
 display: block;
 position: absolute;
 .path {
   stroke-dasharray: 320;
   stroke-dashoffset: 0;
   animation: dash 1s linear;
 }
 @keyframes dash {
   from {
     stroke-dashoffset: 320;
   }
   to {
     stroke-dashoffset: 0;
   }
 }
}
<svg width="300px" height="175px" version="1.1">
 <path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
 <path fill="transparent" stroke="#FF2851" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="line2"></path>
 <path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="line1"></path>
</svg>

svg {
 width: 300px;
 display: block;
 position: absolute;
}

svg .line1 {
 stroke-dasharray: 340;
 stroke-dashoffset: 40;
 animation: dash 1.5s linear alternate infinite;
}

svg .line2 {
 stroke-dasharray: 320;
 stroke-dashoffset: 320;
 animation: dash2 1.5s linear alternate infinite;
}

@keyframes dash {
 from {
   stroke-dashoffset: 360;
 }
 to {
   stroke-dashoffset: 40;
 }
}

@keyframes dash2 {
 from {
   stroke-dashoffset: 280;
 }
 to {
   stroke-dashoffset: -40;
 }
}

沿 SVG 路径的动画对象

<svg width="300px" height="175px" version="1.1">
   <path fill="transparent" stroke="#888888" stroke-width="1" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
</svg>
<div class="ball"></div>

svg {
 width: 300px;
 display: block;
 position: absolute;
}

.ball {
 width: 10px;
 height: 10px;
 background-color: red;
 border-radius: 50%;
 offset-path: path('M10 80 Q 77.5 10, 145 80 T 280 80');
 offset-distance: 0%;
 animation: red-ball 2s linear alternate infinite;
}

@keyframes red-ball {
 from {
   offset-distance: 0%;
 }
 to {
   offset-distance: 100%;
 }
}


使用 JavaScript 做 SVG 动画

来源:http://mp.weixin.qq.com/s/vLiBG0YSQGieCO_7bIS7Cw
赞(0
免费拨打  111-1111-1111
免费拨打  111-1111-1111免费拨打 111-1111-1111
微信二维码
手机二维码
返回顶部
返回顶部返回顶部