SVG动画

SVG动画示例


<html>
    <head>
        <meta charset="utf-8" />
        <title>title>
        <style>


            @-webkit-keyframes myfirst
            {
                from {stroke-dasharray: 0px 50000px;}
                to {stroke-dasharray: 500px 50000px;}
            }
            #line{
                stroke-dasharray: 10px 50000px;
                -webkit-animation: myfirst 5s;
                -webkit-transition: stroke-dasharray 5s;

            }
            #line:hover{
                stroke-dasharray: 600px 50000px;
            }
            .icon1{
                background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAARCAYAAADKZhx3AAAAAXNSR0IArs4c6QAAAy1JREFUSA2llV9I01EUx91v/9Q9uLSYDCnUzD/kS1FUFj1F5Fs+SPQgbGy6QUEvCWFIED0IvfTi1BGCD0mSPfgSPaRBGEVPhabixIzSjdoWFFu2uV+fMzazuc1ZF86+55577vmee+65vxUV/ccYHh4uRir/JYSmkE0jIyOmaDTaoapqPf5GpAH9ELgHKUHeKIrS0tXVFUMvaCiFeEUikR6I+jQajQH/t5DcAY+73e5Sl8ulYNeyfgMpKJ5w6uQn3/B4PFdYv6TVapucTuenTF9I1bGxsZOhUGhyYGBAiG9l+mSb5y314OCgm1N0E/wsZfy4NQB3a04kEpZYLGZh3YJeC3bjM0pFJkA9NhO6aWNjo5S1BLYwFRqVODmJvV7vNTb04vMAKUakiSwkIkSVYBQMYAugB9D9yDfmFyD8AYoeQUQX1CNuEunlELd1/f3940yOYVQRKZUkY4RU7m6coP50YEG9Xh+wWq3+1tbWdfyyjZvZjGLjKp6SlF10ueMPBFwl4F0SSECoCkIas9vtX8Qpc3AF+7n7M/i9Y21+F90sJf8u8XQ0zQuInQ6HYyWTINsc0jKyXiHANFgGHuAkE+Xl5fb29vZf2fZsscmVJZ+cYjAYXjE5MTU1tWOHpwJch8xLk5zmOTWj12Bvoavfp9ZzAgeU55hMTrHZbH4mc4uLi+dy7tiywObLlPhe2kSZv6LLM1tK23IhSUr/xGU9fcqHlM3G/IkYcw3ea0kwGKzu7OycFR86v5qeeEQyR0jGlGtf2g5vFF/50iW7uAjDfQwtBDqadsqG3GEUe5jGUpHpeDz+mvmziooKHSeXJ5N3wBPGYa84ydGTg0AXUR6TuZUgaynzNiBBhQTPE2SdhnwOyodh25Ce8fl8dfjXUs1aHOQD08i8AezYJJaddOdVoAfyNsr5Umw7DcqvpbFq2NNI2ZvxP5ySOgiWIVpmTe5/CT2JHGz+L2IhgbwNhz7Uz2ycRHzoa2RtRjezZmYu/0pNzOVf6iC4Cs6CcvczEM1UVVXN5fnI/Ck1GzYHQZShoSH59J3CWEPAfaA8fPkMishdLSDzRqNxgZfxE31X4zdCxG8xv83TEQAAAABJRU5ErkJggg==') no-repeat;
                width: 30px;
                height: 15px;
            }
        style>

    head>
    <body>


    <svg width="198px" height="197px" viewBox="0 0 198 197" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        
        <desc>Created with Sketch.desc>
        <defs>defs>
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path d="M92.6171875,3.71484375 C92.6171875,3.71484375 193.902344,-15 194.265625,95.65625 C194.628906,206.3125 100.773438,192.949219 100.773438,192.949219 C100.773438,192.949219 3.46875,201.011719 2.66015625,108.023438 C1.8515625,15.0351562 92.6171875,3.71484375 92.6171875,3.71484375 Z" id="Path" stroke-opacity="0.378651495" stroke="#9B9B9B" stroke-width="5">path>
            <path id='line' d="M92.9570312,4.19561394 C92.9570312,4.19561394 194.242187,-14.5192298 194.605469,96.1370202 C194.96875,206.79327 101.113281,193.429989 101.113281,193.429989 C101.113281,193.429989 3.80859375,201.492489 3,108.504208 C2.19140625,15.5159264 92.9570312,4.19561394 92.9570312,4.19561394 Z" id="Path" stroke="#4990E2" stroke-width="5">path>
        g>
    svg>



    
    
    <script>
            var svg_path=document.getElementById('line');
            var totalLength=svg_path.getTotalLength();
            var length=0;
            console.log(totalLength);

        script>
    body>
html>

你可能感兴趣的:(前端)