使用svg和css3轻松制作动画

浏览:1964 发布日期:2016/10/19 分类:css3 关键字:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #laopo {
        display: block;
        margin: 0 auto;
        stroke-dasharray: 2500;
        stroke-width: 2;
        animation: dash 15s linear forwards;
    }
    
    @keyframes dash {
        from {
            stroke-dashoffset: 2500;
            opacity: 1;
        }
        to {
            stroke-dashoffset: 0;
            stroke-dasharray: 0;
        }
    }
    </style>
</head>

<body>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="652px" viewBox="0 0 1689 2199.294" enable-background="new 0 0 1689 2199.294" xml:space="preserve" id="laopo">
        <g id="图层_2">
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M470.613,0c0,0-89.997,158.114-89.997,270.609
c-16.499,122.994-31.499,202.49-31.499,202.49s26.999,242.986,15,281.984c-16.5,35.999-15,134.993-15,134.993
s-7.5,112.495-34.498,112.495s0,52.497,0,52.497s73.497-10.498,77.996-8.999s71.998-34.499,71.998-34.499
s31.498,122.999,8.999,182.996s-100.495,95.995-100.495,95.995s0,34.499,53.998,20.999s85.496-91.496,85.496-91.496v47.998
c0,0-4.5,79.497-31.499,83.996s50.997,35.998,73.496-28.499c12-70.496-9-113.994-9-113.994l-7.5-236.994l-6-104.995
c0,0,92.997,98.996,92.997,112.495s71.997,73.496,89.996,79.496s82.496,9,106.495,6s67.497-37.498,67.497-37.498
s104.998-73.498,134.996-110.997s13.5-10.497,13.5-10.497l-86.996,91.495c0,0-64.497,118.495-44.998,169.492
s23.999,25.498,23.999,25.498s-38.999-113.995,17.999-160.492s28.499-1.499,28.499-1.499s-29.999,76.495-6,104.994
s163.494,173.995,182.993,169.495s215.99,25.498,289.486,0s86.996,0,86.996,0l26.998,13.5c0,0,27.001,45.771,25.501,44.636
s1.621,48.362,0.061,52.862s0.45,22.499,0.45,22.499l26.487-23.999l-19.499-100.495l-62.996-82.496
c0,0-64.496-79.495-116.994-85.495s-82.496-22.499-82.496-22.499l4.5-66.003l-49.497-247.486l-28.499-220.488
c0,0-31.497-562.221-88.494-590.094l-58.507,12.625l-515.974-6L470.613,0z" />
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M687.796,46.811h7.806h41.998V18.626
c0,0-49.498-16.813-71.997,14.093s-101.995,77.403-101.995,77.403l-20.999,56.997l-22.499,121.494v119.994v116.994
c0,0-9-280.485,37.498-355.482l29.999-38.998c0,0,58.498-82.497,74.997-74.997s28.499-3,28.499-3L687.796,46.811z" />
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M756,42.02l57-14l71-7c0,0,69,11,94,48s79,68,79,68l49,132.812
c0,0,37,294.188,26,329.188s-44,228-69,253s-21,37-21,37s109-319,117-346s26-282-8-320s-118.275-166.677-135-148s-37-26-37-26
S872-22.98,756,42.02z" />
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M527,412.02c0,0,108-21,122,0s8,0,8,0l1.278-9.333l-29.773-31.667
c0,0-63.505-28-80.505-23S527,412.02,527,412.02z" />
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M879,429.02h51l106-7.667l22-9.333l-14-27.633l-37-16.367h-25l-49,10
C933,378.02,878,417.02,879,429.02z" />
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M527,521.02c0,0,39-55,84-43s55,28,55,28l13,19.581v9.419h-11h-9.722
c0,0-30.278,12-42.278,13s-59-17-59-17L527,521.02z" />
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M592.639,488.02c0,0-3.639,60,28.361,50c7,0,33.371-2.711,30-24.438
s-3.371-21.727-3.371-21.727S597.278,463.02,592.639,488.02z" />
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M868.333,539.144c0,0,0.028-0.099,0.086-0.285
c0.874-2.819,8.489-25.855,27.248-36.173c20-11,29.683-19.667,60.175-12s51.159,25.163,64.825,34.915c13.333,9.419,2,7.419,2,7.419
s-43.373,28.334-59.187,27s-53.48,5-61.813-5s-33.333-12.334-33.333-12.667c0-0.282,0-1.766,0-2.208c0-0.079,0-0.125,0-0.125
V539.144z" />
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M903.75,504.02c0,0-4.75,49.5,22,47.75s32.75-7.75,33.75-14.75
s0-39.75,0-39.75S927,476.02,903.75,504.02z" />
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M687,683.02c0,0-0.426,0.563-1.157,1.594
c-6.942,9.793-41.368,61.883,1.157,75.906c43.5,8,40.5,5,40.5,5s-9.5,0.5-21-13s1-29,14.5-13.5s-10,11-10,11l16.544,1.5
c0,0,36.956,28.602,50.956,14.551S818,729.52,829,742.02c0,13-2,14-18,16s-13,11.934-13,11.934s50.5,5.934,57,0
s14.667-26.434,13.333-32.934s-9.833-43.5-9.833-43.5l-4.5-10.5c0,0-16.5-134.338-12.5-157.419S841,499.02,841,499.02l-10,52.795
c0,0,3.501,109.351,16,127.705s22,70.5,10.5,71.5s-9.5-45.984-35.5-31.492s-39,54.992-72,23.992s-25.5-35-44-29
s-20.5,25.5-20.5,25.5l8.5,10.5c0,0-15.5-6-15-7.5S667,719.02,687,683.02z" />
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M646.335,868.354l-6,10c0,0,28.665-7.165,30.165,0
s35.5,2.665,39,2.665s40,0,46.5,3.5s45.5-3,47.5-3s31-5.629,33.5-4.564s34.5,0,34.5,0H885l3.5-5.936l-22-2.665
c0,0-34.5-0.335-40-6.835s-17-18-27.5-17s-38,5.377-48-0.062s-34,5.562-38.5,10.562s-25,9.25-25,9.25h-21.389l-16.611,3.25
L646.335,868.354z" />
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M702,906.52c0,0,11.336,24,62.418,24.5s52.082-8.5,59.082-15.5
s21-14.5,21-14.5s-12,9.5-12.5,11.5s-5,8.5-9,11s-34.5,14.5-36,15s-40.5-3-40.5-3S695.75,915.02,702,906.52z" />
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M611,988.02l-60,60c0,0-36,117,15,179s83.836,106,198.418,86
c93.582-35,116.582-38,116.582-38l150-56l-5-12c0,0-19,10-22,13s-218,100-284,88s-134.373-67.811-157-107s-26-130,1-153
S611,988.02,611,988.02z" />
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M309,1062.02c0,0-121,29-67,183c5,76,5,108,5,108h11l40-109l114-199
l-38,15L309,1062.02z" />
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M520.111,525.601V809.02L501,885.555c0,0-14,21.465-14,15.465
s-54-348-34-434s42-158,42-158s10-16,12-10S520.111,525.601,520.111,525.601z" />
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M1217,653.02c0,0-1.818,2.074-4.94,6.178
c-17.841,23.451-78.251,113.167-85.06,260.597c-8,173.226,10,193.226,45,199.226s127,20,127,20s-12-14-18-18s-68.939-42-68.939-42
l-19.061-91l19.061-123.75L1217,653.02z" />
            <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="228.122,1221.02 205,1561.02 258,1353.02  " />
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M205,1977.02l23.122,222.274L331,2209.02v-32c0,0-22-74-28.38-102
s-89.62-72-121.62-184s24-318,24-318l26.5-337.074c0,0,57.5,89.074-24.464,317.083s-11.435,377.889-11.435,377.889L205,1977.02z" />
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M1568.1,1338.743c0,0-236.953,98.319-269.1,222.276
s-44.147,161.463-44.147,161.463L1299,1952.004l-44.147,54.005c0,0-12.001,75.008,0,84.009s24.003,36.004,9.001,57.006
s-14.335,52.271-14.335,52.271l32.337-160.281l17.145-54.006l36.86,171.018v18.001l9.001,25.269h333.033v-445.311
c0,0-75.008-378.886-117.012-400.964S1568.1,1338.743,1568.1,1338.743z" />
            <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M1268.572,1325.06l7.5,230.988l-7.5,118.969l-11.999,115.02
l38.03,139.108l-9.531,12.39l-59.997-166.491c0,0-88.494-378.813-53.996-457.144c-24.49-13.831,91.495,0,91.495,0L1268.572,1325.06
z" />
    </svg>
</body>

</html>

猫头鹰博客专注前端开发

前端开发QQ群:577185192

1476844455471.png


评论(20 相关
回复 admin 2016-10-19
画的是我老婆
回复 访客 2016-11-28
L2:加油 我爱你
回复 币安 2017-11-16
币安网:http://www.lelev.com 大陆重新开放注册。
写得很好 继续支持
感谢分享 很喜欢
学习了 很受用
很适合我们年轻人学习
学习了 很受用
博主分享的不错的啦,学习了不少,文章很好收获很大
不错 支持一下 值得学习
非常不错 值得学习
内容精彩 值得学习分享
内容不错的哈,支持支持
内容精彩的啦,赞一个哈
文章的内容真的很精彩啦,支持支持
非常不错 精彩 学习到了
内容精彩 值得学习分享下 很好
支持下 很好 学习了
内容很精彩 学习了 不错
内容精彩 值得学习分享 不错

发表评论

必填

选填

选填