css3按钮好看的特效(一)

css3按钮好看的特效(一)

首先看一下如下效果，特效一是一个边框渐出的效果，需要运用到svg去实现

看看html结构很简单，一个按钮div中套着一个用来实现边线的svg和一个用来显示文字的div，在svg中需要加入一个rect是svg中的矩形。

 <div class="btn">
        <svg width="200" height="60">
            <rect width="200" height="60" class="rect"></rect>
        </svg>
        <div class="text">按钮</div>
    </div>

如何实现出有边线的效果需要了解的两个 stroke-dasharray和 stroke-dashoffset；
1. stroke-dasharray：表示的意思是边框虚线，两个参数或者多个参数时：一个表示长度，一个表示间距
　　如：stroke-dasharray = ‘10, 5’ 表示：虚线长10，间距5，然后重复 虚线长10，间距5
　　如：stroke-dasharray = ‘20, 10, 5’ 表示：虚线长20，间距10，虚线长5，接着是间距20，虚线10，间距5，之后开始循环
　　
2. stroke-dashoffset：表示的是虚线的相对起始点的偏移量，这个需要结合着stroke-dasharray去使用不然没有效果，，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x的时候，相当于往右移动了x个长度单位。

理解两个的意思之后写出如下的css便会得出如上面动图所开始时文字下面一条线（实际是让线偏移到了下面其他的透明轮廓都是虚线的间隙）

 .rect{
            fill: transparent;
            stroke-width: 6;
            stroke: #ff6348;
            stroke-dasharray:  160 400;
            stroke-dashoffset: -281;
        }

实现边线慢慢恢复需要添加动画效果将stroke-dasharray的值设为边框的总长度（目的是为了让两边起到一个同时到达起点的视觉效果），然后恢复虚线的偏移量 stroke-dashoffset: 0，为了美观可以将它的线宽度变窄，我是让 stroke-width从6变到了2.

最后加上hover添加动画效果即可如下方css

@keyframes go {
     to{
           stroke-dasharray: 520;
           stroke-dashoffset: 0;
           stroke-width: 2;
       }
 }
.btn:hover .rect{
    animation: go 0.3s linear forwards;
}

~~~~~~~~~~~~~~~~ end ~~~~~~~~~~~~~~~~~