css svg 描边动画效果

最新推荐文章于 2024-05-12 10:58:45 发布

呆子zhou

最新推荐文章于 2024-05-12 10:58:45 发布

阅读量579

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/z_lengqiu/article/details/103093547

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

svg实现的一个微不足道的描边效果：

线条是运动着的，以下是png,本应放gif来着

颜色看起来有点乱，哈哈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>流光</title>
    <style>
        .text{
            fill:#eee;
            font-size: 80px;
        }
        .text1{
            stroke: #f00;
            animation: slide1 5s linear infinite;
        }
        @keyframes slide1{0%{stroke-dashoffset: -0;}
            100% {stroke-dashoffset: 125;}}
        .text2{
            stroke: #f33;
            animation: slide2 5s linear infinite;
        }
        @keyframes slide2{0%{stroke-dashoffset: -35;}
            100% {stroke-dashoffset: 160;}}
        .text3{
            stroke: #f66;
            animation: slide3 5s linear infinite;
        }
        @keyframes slide3{0%{stroke-dashoffset: -70;}
            100% {stroke-dashoffset: 195;}}
        .text4{
            stroke: #faa;
            animation: slide4 5s linear infinite;
        }
        @keyframes slide4{0%{stroke-dashoffset: -105;}
            100% {stroke-dashoffset: 230;}}
    </style>
</head>
<body>
    <div class="svg_wrap">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600px;height: 300px;">
            <text class="text text1" x="50" y="100"
            stroke-dasharray="35 135" >细草微风岸，平林月未满</text>
            <text class="text text2" x="50" y="100"
            stroke-dasharray="35 135" >细草微风岸，平林月未满</text>
            <text class="text text3" x="50" y="100"
            stroke-dasharray="35 135" >细草微风岸，平林月未满</text>
            <text class="text text4" x="50" y="100"
            stroke-dasharray="35 135" >细草微风岸，平林月未满</text>
        </svg>
    </div>
</body>
</html>

呆子zhou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css svg 描边动画效果

svg实现的一个微不足道的描边效果：线条是运动着的，以下是png,本应放gif来着颜色看起来有点乱，哈哈<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...
复制链接

扫一扫