利用svg描边+css3实现边框逐渐消失小动画

首先简单的描述一下svg中两个属性：

stroke-dasharray：表示每个虚线的长短。

stroke-dashoffset：表示首个虚线的偏移量。

当两者都特别大的时候就会消失掉

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框逐渐消失</title>
    <style>
        .br_hide{
            text-decoration:none;
        }
        .br_hide:hover{
            text-decoration:none;
        }
        .br_hide:hover text{
            fill:#913F3F;
        }
        .br_hide:hover g{
            animation:first1 3s linear infinite;
            stroke:#913F3F;
            stroke-width:2;
            -moz-animation:first1 0.5s linear;
            -webkit-animation:first1 0.5s linear;
        }
        @-moz-keyframes first1
        {
            0%   {stroke-dasharray: 0%, 500%;stroke-dashoffset: 0%;}
            100%  {stroke-dasharray: 500%, 0%;stroke-dashoffset: 0%;}
        }
        @-webkit-keyframes first1
        {
            0%   {stroke-dasharray: 0%, 500%;stroke-dashoffset: 0%;}
            100%  {stroke-dasharray: 500%, 250%;stroke-dashoffset: 0%;}
        }
    </style>
</head>
<body>
<a href="#" class="br_hide">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="36">
        <rect fill="none" stroke="#DBEAF9" stroke-width="2" width="80" height="36"/>
        <text x="10" y="24">王玉娇</text>
        <g fill="none" >
            <rect width="80" height="36"/>
        </g>
    </svg>
</a>
<a href="#" class="br_hide">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="36">
        <rect fill="none" stroke="#C8E3CB" stroke-width="2" width="80" height="36"/>
        <text x="10" y="24">王玉娇</text>
        <g fill="none" >
            <rect width="80" height="36"/>
        </g>
    </svg>
</a>
<a href="#" class="br_hide">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="36">
        <rect fill="none" stroke="#DBEAF9" stroke-width="2" width="80" height="36"/>
        <text x="10" y="24">王玉娇</text>
        <g fill="none" >
            <rect width="80" height="36"/>
        </g>
    </svg>
</a>
</body>
</html>

即可实现效果。

利用svg描边+css3实现边框逐渐消失小动画

相关推荐