利用svg描邊+css3實現邊框逐漸消失小動畫

時間 2019-11-18

標籤利用 svg css3 css 實現邊框逐漸消失動畫欄目 CSS 简体版

原文原文鏈接

首先簡單的描述一下svg中兩個屬性：html

stroke-dasharray：表示每一個虛線的長短。web

stroke-dashoffset：表示首個虛線的偏移量。ide

當二者都特別大的時候就會消失掉svg

直接上代碼：spa

<!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>

便可實現效果。code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。