`
天梯梦
  • 浏览: 13741053 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

纯CSS实现帅气的SVG路径描边动画效果

 
阅读更多

一、应该人人皆会的基础技术

简而言之,就是让SVG的描边像是有人绘制一样的动画效果。

国外很多相关介绍的文章,来看看一些效果gif吧~

纯CSS实现帅气的SVG路径描边动画效果
纯CSS实现帅气的SVG路径描边动画效果
纯CSS实现帅气的SVG路径描边动画效果
纯CSS实现帅气的SVG路径描边动画效果
纯CSS实现帅气的SVG路径描边动画效果
纯CSS实现帅气的SVG路径描边动画效果

我至少看到了4篇外文对此技术介绍(参见文末参考文章),觉得挺有意思,也很好入门,可以不依赖JavaScript,故移花接木,借花献佛,以自己的理解给大家介绍下。

 

二、效果先行,兴趣挑起

纯CSS实现帅气的SVG路径描边动画效果
纯CSS实现帅气的SVG路径描边动画效果

您可以狠狠地点击这里:帅气的签名动画demo

 

三、你需要知道的基础知识

SVG中有个比较重要的属性分支,名为stroke, 中文软件中称之为“描边”。

stroke除了自己,还有其他诸多兄弟姐妹,来,站起来给大家瞅瞅:

  • stroke 表示描边颜色。这很有意思,名字不是stroke-color, 而就是单纯的stroke. 其值,官方称之为”paint“,我就不上梁小丑般翻译了。一般有如下类型值:none, currentColor, <color>. none表示没有颜色,<color>就是我们常规的颜色值。RGBA, HSBA都支持。currentColor略高深,我看了下官方文档,个人理解为:共享父级但不越过SVG元素的XML中color(style中的)值;可以让路径绘制的文字直接继承父标签的color颜色值。
  • stroke-width 表示描边的粗细。
  • stroke-linecap 表示描边端点表现方式。可用值有:butt, round, square, inherit. 表现如下图:
    纯CSS实现帅气的SVG路径描边动画效果
    纯CSS实现帅气的SVG路径描边动画效果
  • stroke-linejoin 表示描边转角的表现方式。可用值有:miter, round, bevel, inherit. 表现如下图:
    纯CSS实现帅气的SVG路径描边动画效果
    纯CSS实现帅气的SVG路径描边动画效果
  • stroke-miterlimit 表示描边相交(锐角)的表现方式。默认大小是4. 什么斜角转斜面的角度损耗之类的意思,值越大,损耗越小。具体干嘛的,我自己也不确定。大家可查查其他资料。
  • stroke-dasharray 表示虚线描边。可选值为:none, <dasharray>, inherit. 其中,none表示不是虚线;<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线端的长度。可以是固定的长度值,也可以是百分比值;inherit表继承。
  • stroke-dashoffset 表示虚线的起始偏移。可选值为:<percentage>, <length>, inherit. 百分比值,长度值,继承。
  • stroke-opacity 表示描边透明度。默认是1.

而,与本文相关的动画效果相关的就是stroke-dasharraystroke-dashoffset着两兄弟。

 

四、stroke-dasharray和stroke-dashoffset

为了方便说明,减少干扰,我们拿一条直线炒个板栗,如下:

点击下面的滑块(或输入数值)体验下:
stroke-dasharray:
stroke-dashoffset:

 

HTML代码为:

<svg id="svgForStroke" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
 <g>
  <line fill="none" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="0" y1="90" x2="400" y2="90"/>
 </g>
</svg>

 

移动滑块时候(或文本框输入)时候,通过setAttribute方法设置<line>节点元素的stroke-dasharraystroke-dashoffset值,达到了上面的效果。//zxx: 如果您发现移送滑块没有效果,可能您访问的不是原出处。

 

一个特殊情况
我们现在都试想一下,如果stroke-dasharraystroke-dashoffset值都很大,超过了描边路径的总长度,会怎么样?

 

用中文解释就是,一根火腿肠12厘米,要在上面画虚线,虚线间隔有15厘米,如果没有dashoffset,则火腿肠前面15厘米会被辣椒酱覆盖!实际上只有12厘米,因此,我们看到的是整个火腿肠都有辣椒酱。现在,dashoffset也是15厘米,也就是虚线要往后偏移15厘米,结果,辣椒酱要抹在火腿肠之外,也就是火腿肠上什么辣椒酱也没有。如果换成上面的直线SVG,也就是直线看不见了。我们把dashoffset值逐渐变小,则会发现,火腿肠上的辣椒酱一点一点出现了,好像辣椒酱从火腿肠根部涂抹上去一样。

上面的两个滑块都右滑到底,然后下面的滑块往左慢慢滑(请使用支持type=range的浏览器),您会看到直线慢慢出来了,这就是SVG路径绘制动画的原理。

 

五、CSS3 animation的支持

内联SVG的强大之处在于,其本身也是个HTML元素,能被CSS属性控制,处理传统的高宽定位、边框背景色等,SVG自身的一些特殊属性也能被CSS支持,甚至在CSS3 animation动画中。

于是,我们上面探讨的SVG描边动画效果能够轻松使用CSS3 animation实现,无需任何JavaScript,这就是一开始Demo页面的实现。

 

其CSS代码如下:

path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

 

1000没有什么特殊含义,只是足够大,保证比比每个路径的长度大即可,你也可以是1500,区别就是描边速度更快一点。

 

属性CSS3 animation的小伙伴应该一看就看出上面代码的含义的,5秒动画,stroke-dashoffset10000. 描边动画形成。

 

以上CSS代码几乎可以通用。无论你的SVG路径多么复杂,都能以描边动画形式呈现。根据自己的测试,IE10+下没有动画效果,不是CSS不支持SVG的stroke相关属性,而是animation中不支持stroke相关属性的动画。

 

以上效果有什么用的,我试想了以下一些场景:演示时候分步展示一些要点;或者图片等hover描边效果;或者网站tip注意项的箭头引导提示效果等,都很有用。技术+你脑中不断的创意,才有精彩纷呈的创新体验。

 

六、路径的长度

如果您想知道路径,或线条的准确长度。可能需要借助JavaScript,类似下面的代码:

var path = document.querySelector('path');
var length = path.getTotalLength();

以上,祝你好运!

 

七、参考文章

 

原文:http://www.zhangxinxu.com/wordpress/?p=4089

转自:纯CSS实现帅气的SVG路径描边动画效果

 

 

分享到:
评论

相关推荐

    使用CSS3实现SVG路径描边动画效果入门教程

    这个CSS代码应用于SVG中的`path`元素,即可实现路径描边的动画效果。需要注意的是,`1000`在这里没有特定含义,只是一个足够大的值,确保初始时线条完全不可见。 总之,通过CSS3的动画功能,我们可以巧妙地利用SVG...

    segment-实现SVG路径描边绘制与动画的轻量库

    SVG路径描边动画在许多场景下都很有用,如加载指示器、数据可视化、交互式图表等。结合CSS和JavaScript,可以实现丰富的动态视觉效果,提高用户体验。 总的来说,`segment`库简化了SVG路径动画的实现,让开发者可以...

    纯CSS3+SVG实现的海岛日落场景动画效果源码.zip

    综上所述,这个“纯CSS3+SVG实现的海岛日落场景动画效果”源码充分利用了CSS3的动画和样式控制能力,以及SVG的矢量绘图和动画特性,创造出一个美丽的动态场景。通过学习和研究这个项目,开发者可以提升自己在现代Web...

    CSS3 SVG网页沙漏加载动画特效

    然后,我们使用CSS3来控制SVG元素的填充或描边,实现从上至下或从下至上的流动效果。可以利用`animation`属性结合`@keyframes`定义动画,例如: ```css @keyframes fill-down { 0% { stroke-dashoffset: 1000; } ...

    HTML5 svg 自行车运动描边动画特效

    在这个自行车运动描边动画特效中,SVG被用来绘制一个骑自行车的运动员图像,其中包括多个线条和路径元素。这些元素的描边(stroke)属性被精心设计,初始状态可能是无色或淡色,然后通过GSAP的动画功能,随着时间的...

    纯CSS3+SVG实现仙人掌(仙人球)的爱情动画效果源码.zip

    这些效果可以通过CSS3的动画和SVG的路径动画实现,让元素按照预设路径移动或变形,创造出浪漫的视觉效果。 为了实现这个项目,开发者可能使用了以下技术步骤: 1. 使用SVG编辑工具(如Adobe Illustrator或Inkscape...

    纯CSS3+SVG实现带虹吸现象的日食动画效果源码.zip

    在本资源中,"纯CSS3+SVG实现带虹吸现象的日食动画效果源码.zip",开发者利用了现代Web技术中的两种关键组件——CSS3和SVG,来创建一个具有真实感的日食动画,其中还包含了虹吸效应。这个创新的实现展示了Web前端...

    HTML5 svg自行车运动员描边动画特效.zip

    本资源"HTML5 svg自行车运动员描边动画特效.zip"显然是一个利用HTML5和SVG技术实现的自行车运动员描边动画效果。这种效果通常通过CSS3和JavaScript进行编程,以实现动态的、交互式的视觉展示。 SVG的优势在于它的...

    SVG描边动画

    而描边动画则是通过控制SVG路径的描边过程来实现动态效果。 在本文提供的示例中,SVG描边动画的实现主要依赖CSS3的`@keyframes`和`@-webkit-keyframes`规则。这些规则定义了动画从开始到结束时的各个阶段,即帧。...

    纯CSS3+SVG实现行走在街道上的猫动画场景效果源码.zip

    总之,这个“纯CSS3+SVG实现行走在街道上的猫动画场景效果”源码是一个很好的学习实例,可以帮助开发者深入理解CSS3的动画功能和SVG的图形绘制能力,同时也提供了一个动手实践的机会,将这些知识应用于实际项目。

    纯css3+svg实现的程序员写代码动画场景特效源码.zip

    【纯CSS3+SVG实现的程序员写代码动画场景特效源码】是一个利用现代Web技术创建的动态视觉效果,主要用于展示程序员编写代码的过程。这个源码是完全基于CSS3和SVG(可缩放矢量图形)构建的,无需JavaScript或其他编程...

    实用绘制和动画SVG描边路径的JavaScript插件

    "实用绘制和动画SVG描边路径的JavaScript插件",如segment.js,是开发人员实现SVG动画效果的强大工具。 segment.js的核心功能在于能够对SVG路径进行精细化控制,特别是在动画方面。通常,SVG路径由一系列的命令和...

    HTML5 SVG自行车描边运动特效.zip

    通过JavaScript,我们可以控制SVG元素的属性,如路径的描边、填充、动画速度等,实现动态效果。在这个自行车描边运动特效中,JavaScript可能使用了时间函数和定时器来平滑地改变SVG路径的stroke-dasharray和stroke-...

    纯css3+svg实现的纸飞机飞行动画特效源码.zip

    SVG图形由一系列的路径、矩形、圆形等元素组成,这些元素可以通过CSS3进行样式化,如改变颜色、填充和描边。更重要的是,SVG元素可以被赋予动画属性,例如改变其位置、大小或形状。这使得SVG成为实现动态图形的理想...

    纯CSS3+SVG实现朋克(Punk)风格的卡通小人行走动画源码.zip

    SVG图形由一系列的路径(path)、圆(circle)、矩形(rect)等元素组成,这些元素可以通过CSS3的transform属性进行旋转(rotate)、平移(translate)和缩放(scale)等操作,从而实现动画。 在实际应用中,CSS3和...

    CSS3与SVG实现文字背景动画炫酷特效源码.zip

    这个"CSS3与SVG实现文字背景动画炫酷特效源码.zip"压缩包可能包含了一个示例项目,展示如何利用这两项技术来增强网页元素,特别是文字的表现力。以下是这些技术的关键知识点: 1. CSS3 动画: - `@keyframes` 规则...

    svg动画之动态描边效果

    总结来说,SVG动态描边动画是一种利用SVG的描边属性和CSS3的过渡效果来创建视觉上吸引人的动画的技术。它在网页设计、用户界面和数据可视化等领域都有广泛应用,可以为用户带来更生动、更丰富的交互体验。通过理解和...

    CSS3+SVG实现带卡通效果的骑单车动画特效源码.zip

    在本项目中,“CSS3+SVG实现带卡通效果的骑单车动画特效源码.zip”是一个包含使用CSS3和SVG技术创建的动态卡通骑单车动画的源代码文件。这个压缩包可能包含HTML、CSS和SVG文件,用于展示如何利用这两项强大的Web开发...

    纯CSS3+SVG实现的沙漠、金字塔和月亮场景效果源码.zip

    要查看和学习这个项目,首先需要解压"纯CSS3+SVG实现的沙漠、金字塔和月亮场景效果源码.zip"文件,然后打开"132689871197634754"(可能是HTML文件或包含代码的文件夹)。同时,阅读"使用须知.txt"了解项目的具体使用...

Global site tag (gtag.js) - Google Analytics