使用svg和css3轻松制作动画

浏览:1225 发布日期: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


评论(3 相关
回复 admin 2016-10-19
画的是我老婆
回复 访客 2016-11-28
L2:加油 我爱你
回复 币安 2017-11-16
币安网:http://www.lelev.com 大陆重新开放注册。

发表评论

必填

选填

选填