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

时间：2020-11-26 06:50:07

首先简单的描述一下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>

即可实现效果。

相关文章