今天做出的动画效果如下：
这个效果的做法其实很简单，只需要对
stroke-dasharray
和
stroke-dashoffset
加以灵活应用，就可以做出来啦~
首先
准备一个超大的div盒子，使其高度和宽度都为视图高度和视图宽度，然后在其中放入一个
div盒子
作为最终按钮形成边框的盒子，在其中放入
svg
和
div
，分别用来绘制边框和写入文字，记得在svg中放入
rect
绘制一个矩形。
框架建好后，就为其设置
CSS样式
：
首先设置矩形的
fill属性
为transparent，选择一个喜欢的颜色当作
stroke
边框颜色，然后调节
stroke-dasharray
以及
stroke-dashoffset
，令其只显示一部分，如图；
数值的设定
就需要结合具体的长度来不断调节，直到达到满意的效果，如下是两种属性的介绍：
(36条消息) SVG中stroke-dasharray及stroke-dashoffset属性_justforuse的博客-CSDN博客_stroke-dashoffset
然后为
装按钮文字
的div盒子设置属性，主要是
display
属性设置为relative或者absolute，（要记得前提是装该div盒子的div盒子的display属性要设置为relative），装文字的盒子建议设置为
relative
，因为这样的话直接调节top就可以了。这样，最后的效果就是按钮文字正好位于之前已经设置好的边框的正上方。
最后一步
呢，就是为hover设置动画啦，使得鼠标放在整个div盒子上时，边框的样式发生如图所示的改变。
此时就需要用到@
keyframes
，令其中的
to
中的
stroke-dasharray
和
stroke-dashoffset
发生变化，得到最终完整的边框，然后在
rect
对应的class中添加
animation
属性，得到最终的效果。
其实在整个效果的制作中，有
很多细节
需要注意，包括display的设置，div盒子高度数值的设定等等，我也从中学到了很多知识，建议读者看明白了制作流程后，自己试着去做出同样的效果~
整个效果的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#rec{
fill:transparent;
stroke:tomato;
stroke-width: 12px;
/* 设置按钮下面的粗边框 */
stroke-dasharray: 100 500;
stroke-dashoffset: 230;
}
.btn{
position: relative;
/* 为其设置宽度和高度的原因是 其hover的范围只应该是按钮矩形那么大 */
/* 将nav盒子放在其中也不会消失，只是会在盒子外，之所以将nav放在btn中，是因为方便设置其top值 */
width: 240px;
height: 60px;
}
.nav{
font-size: 23px;
position: relative;
top:-50px;
letter-spacing: 6px;
}
@keyframes move{
to{
stroke-width: 4px;
stroke-dasharray: 600;
stroke-dashoffset: 0;
}
}
/* 想想为啥是hover之后加了#rec 是因为鼠标放到按钮框上之后要看到rect的变化 */
.btn:hover #rec{
animation: move 0.8s linear forwards;
}
</style>
</head>
<body>
<div class="container">
<div class="btn">
<svg width="240" height="60">
<rect width="240" height="60" id="rec"/>
</svg>
<div class="nav">按钮</div>
</div>
</div>
</body>
</html>