用svg来给图标绘边

最新推荐文章于 2024-08-24 07:25:22 发布

出于蓝

最新推荐文章于 2024-08-24 07:25:22 发布

阅读量286

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/orq18810575870/article/details/79823372

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

首先先介绍一下 stroke-dasharray和stroke-dashoffset这两个属性

1 stroke-dasharray这个属性就是给图标绘边.

当 stroke-dasharray只有一个参数时,描绘的是需要,线段的长度,间隔的距离等于 stroke-dasharray的值

当 stroke-dasharray有两个参数时,第一个表示线段的长度,第二个表示距离

多个参数时,第奇数个参数表示线段的长度,偶数表示距离(从1开始数)

2stroke-dashoffset定义stroke-dasharray画的虚线开始画的时候的偏移量.这两个属性结合起来可以模拟动态的绘边.比如说:

.classname{

stroke-dasharray:2000;

-webkit-animation:sakura 4s ease-in 0s forwards;

}

@-webkit-keyframes sakura{

0%{ stroke-dashoffset:2000;}

100%{stroke-dashoffset:0}

}

这样就可以动态的,慢慢的为图标描绘边框.

下面给出一个完整的例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #svg{
            width:500px;
            height:500px;
            margin:auto;
        }


        svg path.hanabira{

            fill: antiquewhite;
            stroke:#ff95b2;
            stroke-dasharray:2000;
            stroke-dashoffset:2000;
            stroke-width:2;
            -webkit-animation:sakura 4s ease-in 0s forwards;
            animation:sakura 4s ease-in 0s forwards;
        }
        @-webkit-keyframes sakura{
            0%{
                stroke-dashoffset:2000;
            }
            30%{
                fill:transparent;
            }
            60%{
                stroke-dashoffset:0;
            }
            100%{
                stroke-dashoffset:0;
                fill: antiquewhite;
            }
        }
    </style>

</head>
<body>
    <div id="svg">
        <svg viewBox="0 0 500 500">
                <path class="hanabira" d="M251.2,53.7c0,0-19.7-14.3-40.1-37.6c-22,25.1-44.7,60.6-44.7,100.1c0,76,84.8,137.7,84.8,137.7
     		s84.8-61.6,84.8-137.7c0-39.4-22.8-75-44.7-100.1C270.8,39.4,251.2,53.7,251.2,53.7z"/>

        </svg>
    </div>

</body>
</html>