今天做出的动画效果如下：
这个效果的做法其实很简单，只需要对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>
