svg描边动画收集 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>doc</title>
    <style>
        #line{
            animation: lineScroll 2s linear infinite;
        }
        @keyframes lineScroll{
            0%{
                stroke-dashoffset: 300;
            }
            100%{
                stroke-dashoffset: 0;
            }
        }
        #circle{
            transition: all 2s;
            stroke-dasharray:314,314;
            stroke-dashoffset:314;
        }
        svg:hover #circle{
            stroke-dashoffset:0;
        }
        #rect {
            stroke-width: 6px;
            fill: #fff;
            stroke: red;
            stroke-dasharray: 20;
            animation: path-animation 5s linear infinite;
        }        
        @keyframes path-animation {
            from {
                stroke-dashoffset: 100%; 
            }
            to {
                stroke-dashoffset: 0%; 
            } 
        }
        .star-path {
            fill:none;
            stroke-width:10;
            stroke: #d3dce6;
            stroke-linejoin:round;
            stroke-linecap:round;
        }
        .star-fill {
            fill:none;
            stroke-width:10;
            stroke: #ff7700;
            stroke-linejoin:round;
            stroke-linecap:round;
            stroke-dasharray:1340;
            stroke-dashoffset:0;
            animation: starFill 2s ease-out infinite;
        }
        @keyframes starFill {
            0% {
                stroke-dashoffset:1340;
            }
            100% {
                stroke-dashoffset:0;
            }
        }
    </style>
</head>

<body>
    <h1>svg</h1>
    <!-- 直线滚出 -->
    <svg >
    　　<line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="red" stroke-dasharray="300,320"/>
    </svg>
    <!-- 圆形路径滚出 -->
    <svg  width="200" height="200" viewBox="0 0 200 200">
        <circle id="circle" cx="100" cy="80" r="50"  fill="gray" stroke-width="5" stroke="green" />
    </svg>
    <!-- 矩形虚线框边框滚动动画 -->
    <svg height="100" width="300">
        <rect id="rect" height="100" width="300" />
    </svg>
    <!-- 竖直轨迹文字动画 -->
    <svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
        <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">人
            <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="5s" rotate="0" repeatCount="indefinite"/>
        </text>
        <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
    </svg>
    <!-- 五角星全绘 -->
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewbox="-500 -500 2500 2500">
        <polygon points="-12 -69,-58 85,64 -14,-81 -14,41 85" class="star-path"></polygon>
        <polygon points="-12 -69,-58 85,64 -14,-81 -14,41 85" class="star-fill"></polygon>
    </svg>
    <!-- 横向文字循环滚动 -->
    <svg width="100%" height="250" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text font-family="microsoft yahei,sans-serif" font-size="15" y="50" x="200" fill="#5F9F9F">内容2
                <animate attributeName="x" from="100%" to="-200" begin="0.5s" dur="10s" repeatCount="indefinite"></animate>
            </text>
        </g>
    </svg>
    <!-- 小球折线运动 -->
    <svg width="500" height="500">
        <path d="M100 150 L200 50 L300 150 L400 50 Z" stroke="#ccc" stroke-width="2" fill="none" />
        <circle r="20" x="150" y="0" style="fill:#336622;">  
            <animateMotion dur="3s" repeatCount="indefinite" rotate="auto" path="M100 150 L200 50 L300 150 L400 50 Z" />
        </circle>
    </svg>
    <!-- 小球曲线闭合运动 -->
    <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
        <!-- Draw the outline of the motion path in grey, along
        with 2 small circles at key points -->
        <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="theMotionPath" />
        <circle cx="10" cy="110" r="3" fill="lightgrey" />
        <circle cx="110" cy="10" r="3" fill="lightgrey" />
        <!-- Red circle which will be moved along the motion path. -->
        <circle cx="" cy="" r="5" fill="red">
            <!-- Define the motion path animation -->
            <animateMotion dur="6s" repeatCount="indefinite">
                <mpath xlink:href="#theMotionPath" />
            </animateMotion>
        </circle>
    </svg>
    <!-- 图片曲线运动 -->
    <svg width="500" height="350" viewBox="0 0 500 350">
        <!--运动的路径轨迹-->
        <path style="fill:none;" stroke="#000" id="motionPath" d="M0.038,0c0,0-2.25,26.75,27.75,42.25c11.501,5.942,36.167,25.667,42.5,29.583
        c5.465,3.38,37.333,22.667-11.125,55.917" />
        <!--运动的图片-->
        <image id="car" transform="translate(-72,-72)" style="overflow:visible;" width="144px" height="144px" xlink:href="images/light.png">
            <animate attributeName="opacity" values="0;1;1;1;1;0" dur="3s" repeatCount="indefinite" />
        </image>
        <!--运动的相关参数  1、href链接到图片   mpath链接到路径-->
        <animateMotion xlink:href="#car" dur="3s" begin="0s" fill="freeze" repeatCount="indefinite">
            <mpath xlink:href="#motionPath" />
        </animateMotion>
    </svg>
</body>

</html>

 

posted @ 2021-06-28 17:25  全玉  阅读(90)  评论(0)    收藏  举报