利用H5SVG实现线性动画效果

效果图

利用H5SVG实现线性动画效果_第1张图片

原理

主要应用到了SVG的两个属性分别为: stroke-dasharray和stroke-dashoffset.

stroke-dasharray

strokedasharray属性用于创建虚线:下面来看看例子

        path{
            stroke: #000;
            fill: transparent;
            stroke-width: 2px;
            stroke-dasharray: 10;
        }
    style>
head>
<body>
    <svg width=500 height=500>
        <path d="M 100 100 L 200 100"/>
    svg>

效果:
利用H5SVG实现线性动画效果_第2张图片
,当我们尝试增大stroke-dasharray时效果:
这里写图片描述
会发现放我们增大它的值时, 其中间的空白会变大吗,因此当我们把它设置成线长时并通过stroke-dashoffset就可以隐藏再通过CSS3就可以实现动画效果.

代码


<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            border:0;
        }
        ol, ul ,li{list-style: none;}
        path{
            stroke: #000;
            fill: transparent;
            stroke-width: 2px;
            stroke-dasharray: 10;
/*             stroke-dashoffset: 100;
            animation: dash 1s linear infinite alternate-reverse; */
        }
        @keyframes dash {
            to {
              stroke-dashoffset: 0;
            }
        }

    style>
head>
<body>
    <svg width=500 height=500>
        <path d="M 100 100 L 200 100"/>
    svg>
body>
html>

你可能感兴趣的:(HTML)