zoukankan      html  css  js  c++  java
  • svg描边路径动画

    svg描边路径动画
    <pre>
    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <style>

    html,body{
    100%; height:100%;
    }
    /*1000是线条(path)的长度 stroke-dasharray和stroke-dashoffset的值要一样 stroke-dasharray的值就是每段的长度 stroke-dashoffset每段的偏移值 */
    path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    -webkit-animation: dash 1s linear infinite;
    }

    @-webkit-keyframes dash {
    to {
    stroke-dashoffset: 0;
    }
    }
    .svgdonghua2{
    display: none;
    }
    </style>
    </head>
    <body>


    <div style="300px; height:300px;" class="ds">
    <svg class="svgdonghua svgdonghua1" version="1.1" id="huaban1" xmlns="http://www.w3.org/2000/svg" width="31rem" height="31rem" viewBox="0 0 167 167" preserveAspectRatio="xMaxYMax meet" >
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M1.2,1.011c1.885-0.986,6.254-0.182,8.395-0.182
    c12.128,0,24.256,0,36.383,0c13.245,0,26.49,0,39.735,0c3.012,0,5.487,0.271,8.421,1.165c6.376,1.941,12.309,2.474,18.951,2.665
    c5.468,0.157,10.894,0.001,16.298-0.724c4.636-0.622,9.396-0.374,14.094-0.374c6.421,0,12.851-0.041,19.267,0.002
    c0.196,24.462,0.439,48.991,0.21,73.474c-0.063,6.69-0.391,13.389-0.367,20.103c0.031,9.434,1.144,18.918-1.417,28.075
    c-0.944,3.375-0.21,4.532,0.259,7.825c0.572,4.013,0.765,7.719,0.975,11.732c0.186,3.555,3.401,8.736,0.915,12.164
    c-2.479,3.416-8.678,5.368-12.396,6.45c-6.105,1.777-12.556,1.496-18.925,1.563c-6.96,0.074-13.882,0.559-20.823,0.542
    c-29.13-0.067-58.268,0.183-87.387,0.183c-4.539,0-9.118,0.193-13.652,0c-1.883-0.08-5.043-0.18-6.566-1.272
    c-1.454-1.043-1.981-4.339-2.145-6.046c-0.266-2.767,0.061-5.548-0.264-8.322c-0.352-3.009-0.733-6.372-0.124-9.383
    c0.97-4.795,1.534-9.665,2.355-14.517c0.391-2.309,0.553-4.632,0.898-6.944c0.434-2.9,1.448-5.635,1.842-8.542
    c1.016-7.5,0.352-15.428,0.352-22.993c0-12.143,0.861-24.604-1.147-36.562C3.297,38.959,2.699,26.44,2.476,14.118
    C2.394,9.625,1.047,5.583,1.018,1.193"/>
    </svg>
    </div>
    </pre>


    </body>
    </html>

    ps:svg设置宽度并不能修改里面的宽度 viewBox 167 167是svg原本的宽度和高度 单位是像素 不能去改他 改width和height只能等比例缩放 不能拉伸


    更多svg自适应的理解查看 http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/

  • 相关阅读:
    [ Algorithm ] N次方算法 N Square 动态规划解决
    [ Algorithm ] LCS 算法 动态规划解决
    sql server全文索引使用中的小坑
    关于join时显示no join predicate的那点事
    使用scvmm 2012的动态优化管理群集资源
    附加数据库后无法创建发布,error 2812 解决
    浅谈Virtual Machine Manager(SCVMM 2012) cluster 过载状态检测算法
    windows 2012 r2下安装sharepoint 2013错误解决
    sql server 2012 数据引擎任务调度算法解析(下)
    sql server 2012 数据引擎任务调度算法解析(上)
  • 原文地址:https://www.cnblogs.com/newmiracle/p/11876731.html
Copyright © 2011-2022 走看看