CSS特效（四）：按钮Hover边框动画特效_svg 画矩形怎么设置hover-CSDN博客

本文链接：https://blog.csdn.net/qwerty053/article/details/120612022

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