点击右上角的红色按钮关注“网络秀”，让你真正成为秀
前言
通常，我们所说的网络动画实际上包括以下三类。1、CSS3动画
2、javascript动画(canvas ) )。
3、html动画(SVG ) )。
三种动画各有优劣，在实际应用中根据实际情况进行取舍，本文就SVG中在实际项目中认为很有应用价值的SVG线条画进行讨论。
SVG 的历史和优势（W3C）
于2003年1月，SVG 1.1确立为W3C标准。 参加SVG定义的组织有太阳微系统、adobe、苹果、IBM、柯达。 与其他图像格式相比，使用SVG的优点如下。1、SVG可以用非常多的工具读取、修改(例如记事本) )。
2、SVG与JPEG和GIF图像相比尺寸小，压缩性高。
3、SVG是可伸缩的
4、SVG图像可以用任何分辨率高质量地打印
5、SVG可以在不降低画质的情况下放大
6、SVG图像中的文本是可选的，可以同时进行检索(适合制作地图) ) )。
7、SVG可以与Java技术一起运行
8、SVG是开放的标准
9、SVG文件为纯XML
10、SVG的主要竞争对手是Flash。
与Flash相比，SVG最大的优点是与其他标准(如XSL和DOM )的兼容性。 Flash是一种非开源的专用技术。
SVG 是什么
可缩放矢量图形(SVG )是W3C XML的分支语言之一，用于标记可缩放矢量图形。 (摘自MDN )在上面的代码中，我们首先谈谈svg标签：
version :表示SVG的版本。 目前只有1.0、1.1两种xmlns。 http://www.w3.org/2000/SVG固定值xmlns 3360 xlink:http://www.W3.org/1999/xlink上述三个值是固定的，表示命名空间。 如果数据单独存在于svg文件中，则这三个值不能省略class。 也就是我们熟知的class类选择器width | height。 定义svg画布的大小。 viewbox定义可以在画布上显示的区域。 如果viewbox的大小和svg不同，则viewbox会显示在画面上
SVG 基本形状
SVG线条画基础入门
MDN Web有基本形状的文档，所以建议去看。 包括矩形、圆形、椭圆、直线、多边形、多段线等。
那么，有了基本的理解，接下来是今天的话题，SVG线视频。
看完
SVG 线条动画
效果图之后，想想如果是你的话，该怎么实现这个效果呢？
SVG线条画基础入门
ok，像以前一样，先解析一下吧。 按步骤实现。
1、svg按钮(基础形状-矩形(矩形) ) () ) ) ) ) ) ) ) ) ) )。
2、矩形只剩下下面的底边
3、鼠标：实现悬停事件动画效果
svg画按钮
div类=' button '
svg
viewBox='0 0 320 60 '
版本=' 1.1 '
xmlns=' http://www.w3.org/2000/SVG '
rect类=' shape ' height=' 60 ' width=' 320 '/rect
/svg
div类=' hover-text '网络秀/div
/div
添加样式
. button {
位置：绝对；
width: 320px；
height: 60px；
top: 50%；
left: 50%；
变换：变换(-50%、-50%；
}
.超文本{2}
位置：绝对；
线高度： 60px；
width: 320px；
top: 0；
颜色： # 1199 FF；
字体大小： 28px；
文本对齐：中心；
cursor :指示器；
}
. shape {
填充：透明；
行程宽度： 4px；
stroke: #1199ff；
}
SVG线条画基础入门
button垂直水平居中、形状透明填充、边框宽度4px、边框颜色#1199ff。
虽然对fill、stroke-width等属性可能有点无知，但让我们来看看他们的说明：
fill )在模拟css的背景色、svg图形上涂抹颜色； 条纹宽度：为模拟css的边框宽度、svg图形设定边框宽度； stroke (设置svg图形的边框颜色，例如CSS的边框颜色； stroke-linejoin | stroke-linecap :设定线的母公司的样式； stroke-dasharray :值是一系列数组，没有数量上限。 各数字交替表示格线和间隔的宽度。 stroke-dashoffset :线和间隔的偏移量，重点是实现线动画的重要属性stroke-dasharray。 属性stroke-dasharray控制用于线条的点划线模式。
SVG矩形只剩下底边
在本例中，我们将向按钮添加stroke-dasharray。
. shape {
.
行程阵列： 160 520；
行程偏移：-460；
}
SVG线条画基础入门
SVG悬停动画
. button :移动器.移动器-文本
翻译：5s；
颜色：像素；
}
. button :霍夫. shape {
--WebKit动画3360绘制0.5线性前进；
动画：绘制0.5线性前进；
}
@ key框架绘制{
0 %
行程阵列： 160 520；
行程偏移：-460；
行程宽度： 4px；
}
100% {
行程阵列： 760；
行程偏移： 0；
行程宽度： 2px；
stroke: pink；
}
}
如果是hover，请更改文字的颜色，以在stroke-dasharray和stroke-dashoffset中实现动画效果。
在接下来的文章中，我们将详细介绍如何使用PS AI生成路径以实现SVG动画，敬请期待。
喜欢
公告
小编的点击跟随，知道更多知识！要下载源地址和源文件，请单击下面的“详细信息”