svg进阶(描边动画)

最新推荐文章于 2025-05-12 09:50:35 发布

鲜虾鱼板面428

最新推荐文章于 2025-05-12 09:50:35 发布

阅读量568

点赞数 8

文章标签： css

本文链接：https://blog.youkuaiyun.com/2401_82752568/article/details/137286972

版权

svg动画描边是应用很广泛的场景，比如b站上的投币！！

效果
源码
实现
- 1、寻找适合的stroke-dasharray;stroke-dashoffset值！
- 2、绑定动画

效果

描边动画

源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
            background-color: #171717;
        }

        svg {
            width: 30rem;
            overflow: visible;
        }

        .path {
            fill: none;
            stroke: #17f700;
            stroke-width: 3;
            stroke-linecap: round;
            stroke-dasharray: 280;
            stroke-dashoffset: 280;
            animation: path 3s linear infinite;
        }

        @keyframes path {
            0% {
                stroke-dashoffset: 280;
            }

            100% {
                stroke-dashoffset: 0;
            }
        }
    </style>
</head>

<body>
    <svg viewBox="0 0 100 100">
        <path class="path" d="M 10,30
               A 20,20 0,0,1 50,30
               A 20,20 0,0,1 90,30
               Q 90,60 50,90
               Q 10,60 10,30 z" />
    </svg>
</body>

</html>

实现

1、寻找适合的stroke-dasharray;stroke-dashoffset值！

要实现描边
1、stroke-dasharray;stroke-dashoffset两个属性值必须相同
2、在动画开始时候

这是目标动画
在这里插入图片描述

这个动画实现的关键就是找对stroke-dasharray;stroke-dashoffset的两个值！！
需要咱们不断试，直到你想要的这个图标完全变黑！！这里小编试了一下280就是爱心完全被遮掉的时候！！

在这里插入图片描述

2、绑定动画

这里0%必须和找到的stroke-dasharray一样！！

        .path {
            fill: none;
            stroke: #17f700;
            stroke-width: 3;
            stroke-linecap: round;
            stroke-dasharray: 280;
            stroke-dashoffset: 280;
            animation: path 3s linear infinite;
        }

        @keyframes path {
            0% {
                stroke-dashoffset: 280;
            }

            100% {
                stroke-dashoffset: 0;
            }
        }