神奇的SVG动画
时间：2023-03-02 来源：本站
用CSS可以写出漂亮的动画。直接上例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG动画</title>
<style>
.button{
width: 200px;
height:50px;
background: #fff;
margin:300px auto;
position: relative;
border:1px solid #ddd;
cursor: pointer;
}
.hover-text{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index: 999;
}
.shape{
fill:#fff;
width: 200px;
height: 50px;
}
.button:hover .shape{
fill:#fff;
-webkit-animation: draw 0.5s linear forwards;
animation: draw 0.5s linear forwards;
}
@keyframes draw {
0% {
stroke-dasharray: 160 520;
stroke-dashoffset: -460;
stroke-width: 4px;
}
100% {
stroke-dasharray: 760;
stroke-dashoffset: 0;
stroke-width: 4px;
stroke: red;
}
}
</style>
</head>
<body>
<div class="button">
<svg viewBox="0 0 200 50" version="1.1" xmlns="http://www.w3.org/2000/svg" >
<rect class="shape"></rect>
</svg>
<div class="hover-text">文字标题</div>
</div>
</body>
</html>
SVG 线条动画基础入门知识
button垂直水平居中、shape透明填充，边框宽度4px，边框颜色#1199ff。
也许你会对fill、stroke-width等属性有点懵，下面看看他们的描述：
fill：类比 css 中的 background-color，给 svg 图形填充颜色；
stroke-width：类比 css 中的 border-width，给 svg 图形设定边框宽度；
stroke：类比 css 中的 border-color，给 svg 图形设定边框颜色；
stroke-linejoin | stroke-linecap：设定线段连接处的样式；
stroke-dasharray：值是一组数组，没数量上限，每个数字交替表示划线与间隔的宽度；
stroke-dashoffset：则是划线与间隔的偏移量
重点能够实现线条动画的关键属性 stroke-dasharray 。属性 stroke-dasharray 可控制用来描边的点划线的图案范式。