前端SVG画会动的线

最新推荐文章于 2024-05-18 23:00:17 发布

可乐油条

最新推荐文章于 2024-05-18 23:00:17 发布

阅读量2.2k

点赞数 1

分类专栏：前端文章标签： H5之svg

本文链接：https://blog.csdn.net/qq_41864230/article/details/81285521

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

简单的利用svg画线，只需修改对应的坐标点即可。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <?xml version="1.0" encoding="utf-8"?>

                    <svg  class="svg1" version="1.1" id="svg_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         viewBox="0 0 1334 622" style="enable-background:new 0 0 1334 622; " xml:space="preserve">

                    <style type="text/css">

                        .st1{fill:#FFFFFF;stroke:#000000;stroke-dasharray: 20;}
                        .path {

                            stroke-dasharray: 1000;
                            stroke-dashoffset: 1000;
                            stroke:#34a4e4;
                            stroke-width:4px;
                            animation: dash 10s linear forwards;

                        }
                       .path1{
                        transition: all 5s ;
                       }

                        @keyframes dash {
                            from {
                                stroke-dashoffset: 1000;
                            }
                            to {
                                stroke-dashoffset: 0;
                            }
                        }
                    </style>
                    <line class="st0 path" x1="754.7" y1="186" x2="536" y2="474"/>
                    <line class="st1" x1="536" y1="474" x2="754.7" y2="186"/>
                    </svg>
    </body>
</html>