jQuery+SVG 电子名片签名动画

Name Card SVG Animation. 点击名片会触发签名动画。

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1675
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    margin: 50px 0 0 auto;
    text-align: center;
    background-color: whitesmoke;
}
.svgwrapper {
    display: inline-block;
    width: 25%;
    border-radius: 16px;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
}
.svgwrapper:hover {
    cursor: pointer;
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition: -webkit-transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
}
p {
    margin-top: 30px;
    font-family: Arial, sans-serif;
    font-style: italic;
    font-weight: bold;
    color: #ef3d33;
}
.parc {
    stroke-dasharray: 279;
    stroke-dashoffset: 279;
    stroke-width: 6;
    -webkit-animation: parc 2s ease-in-out forwards;
    animation: parc 2s ease-in-out forwards;
}
@-webkit-keyframes parc {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes parc {
    to {
        stroke-dashoffset: 0;
    }
}
.ptrait {
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
    stroke-width: 10;
    -webkit-animation: ptrait 0.5s 0.5s ease-in-out forwards;
    animation: ptrait 0.5s 0.5s ease-in-out forwards;
}
@-webkit-keyframes ptrait {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes ptrait {
    to {
        stroke-dashoffset: 0;
    }
}
.ierrick {
    stroke-dasharray: 323;
    stroke-dashoffset: 323;
    stroke-width: 4;
    -webkit-animation: ierrick 0.75s 0.8s ease-in forwards;
    animation: ierrick 0.75s 0.8s ease-in forwards;
}
@-webkit-keyframes ierrick {
    to {
        stroke-width: 6;
        stroke-dashoffset: 0;
    }
}
@keyframes ierrick {
    /* Points I */
    
    to {
        stroke-width: 6;
        stroke-dashoffset: 0;
    }
}
.pointi1 {
    opacity: 0;
    -webkit-animation: pointi1 0.25s 0.75s ease-in forwards;
    animation: pointi1 0.25s 0.75s ease-in forwards;
}
@-webkit-keyframes pointi1 {
    to {
        opacity: 1;
    }
}
@keyframes pointi1 {
    to {
        opacity: 1;
    }
}
.pointi2 {
    opacity: 0;
    -webkit-animation: pointi2 0.25s 1.15s ease-in forwards;
    animation: pointi2 0.25s 1.15s ease-in forwards;
}
@-webkit-keyframes pointi2 {
    to {
        opacity: 1;
    }
}
@keyframes pointi2 {
    to {
        opacity: 1;
    }
}

HTML

<head>
    <title>SVG - Carn Name Animation</title>
    <link href="css/style.css" rel="stylesheet" />
    <meta charset="utf-8" />
</head>

<body>

<clippath id="parcpath">
                <path d="M281.9-100.6c-0.5-1.2-1.3-2.1-2.3-2.7s-2.1-1.1-3.3-1.4c-1.2-0.3-2.5-0.4-3.9-0.4c-1.4,0.1-2.7,0.2-4.1,0.4
                             s-2.6,0.4-3.9,0.7c-1.2,0.3-2.3,0.6-3.2,0.8c-2,0.5-3.9,1.1-5.8,1.8c-1.9,0.7-3.8,1.5-5.7,2.4s-3.7,1.9-5.4,3s-3.4,2.3-4.9,3.7
                             c-0.7,0.7-1.5,1.5-2.3,2.6c-0.8,1.1-1.3,2.2-1.7,3.4c-0.4,1.2-0.4,2.3-0.1,3.4s1.1,2,2.3,2.7c1.1,0.6,2.2,0.9,3.5,1.1
                             c1.3,0.1,2.6,0.1,4-0.2c1.4-0.2,2.8-0.6,4.2-1.2c1.4-0.5,2.7-1.1,4-1.8c1.3-0.7,2.4-1.4,3.5-2.2c1.1-0.8,2-1.6,2.7-2.3
                             c0.3-0.3,0.5-0.6,0.7-0.9c0.2-0.3,0.4-0.6,0.5-1c0.1-0.3,0.1-0.7,0.1-1.1c0-0.4-0.2-0.7-0.5-1.1c-0.3-0.4-0.6-0.6-0.9-0.6
                             c-0.3,0-0.5,0.1-0.8,0.3s-0.5,0.5-0.7,0.8c-0.2,0.3-0.4,0.6-0.6,0.7c-0.9,1-2.1,2-3.5,2.9s-2.9,1.7-4.5,2.4
                             c-1.6,0.7-3.2,1.2-4.8,1.5c-1.6,0.3-3.1,0.4-4.5,0.1c-1.6-0.3-2.3-1.2-2.2-2.7c0.1-1.2,0.5-2.3,1.4-3.4c0.8-1.1,1.8-2,3-2.9
                             c1.1-0.9,2.3-1.7,3.6-2.4c1.2-0.7,2.3-1.3,3.2-1.8c2.8-1.5,5.8-2.7,8.9-3.8c3.1-1,6.2-1.8,9.4-2.3c0.7-0.1,1.6-0.2,2.7-0.4
                             c1.1-0.2,2.2-0.2,3.3-0.2c1.1,0,2.2,0.2,3.2,0.5c1,0.3,1.8,0.8,2.3,1.6c0.7,0.9,1.1,1.8,1.1,2.7c0.1,0.9-0.1,1.9-0.4,2.9
                             c-0.3,1-0.8,2-1.5,2.9c-0.6,0.9-1.4,1.8-2.1,2.7s-1.6,1.6-2.3,2.3c-0.8,0.7-1.5,1.3-2,1.7c-0.8,0.6-1.8,1.3-2.7,1.9s-2,1.2-3,1.7
                             c-1,0.5-3.2,1.4-3.2,1.4s-2.6,1-6.9,0.9c-0.4-0.1-0.8-0.2-1.3-0.4s-0.8-0.2-1.1-0.1c-0.6,0.1-1.1,0.3-1.2,0.7
                             c-0.2,0.4-0.2,0.7-0.1,1.2c0.1,0.4,0.4,0.8,0.7,1.2c0.4,0.4,1.4,1.3,4.4,1.1c1.7,0,3.4-0.2,5.2-0.7c1.7-0.5,3.4-1.2,5-2.1
                             s3.2-1.8,4.6-2.9c1.4-1.1,2.7-2.2,3.9-3.3c1-0.9,2-2.1,3-3.3c1-1.3,1.8-2.6,2.5-4c0.7-1.4,1.1-2.9,1.2-4.4
                             C282.9-97.6,282.6-99.1,281.9-100.6z" />
            </clippath>
            <g id="parc" clip-path="url(#parcpath)">
                <path class="parc" fill="none" stroke="#000" d="M251.4-79.1c0,0,17.1,9.7,30.4-17.1c0,0,0-4.4-3.5-6.6c-14.5-3.6-37,6.1-41.7,15.6
                                                                     c-1.3,2.6,0.3,5.3,0.3,5.3c8.7,4.3,24.5-4,22.5-10.3" />
            </g>

<clippath id="ptraitpath">
                <path d="M264.5-85c-0.1-0.4-0.3-0.7-0.6-0.9c-0.3-0.2-0.6-0.4-1.1-0.5c-0.4-0.1-0.7,0-1.1,0.2
                             c-1.4,0.9-2.5,1.9-3.4,3.1c-1,1.2-1.9,2.6-2.6,4c0,0-1,1.3-2,4.3c-0.2,0.4-0.3,0.7-0.4,1.1c-0.1,0.4-0.2,0.7-0.2,1.1
                             c-0.1,0.4,0,0.7,0.1,1c0.2,0.6,0.4,1,0.6,1.3c0.3,0.3,0.5,0.5,0.8,0.6c0.3,0,0.5-0.1,0.8-0.3s0.4-0.7,0.6-1.3
                             c0.2-0.7,0.5-2.1,0.5-2.1s1.3-3.9,2.9-5.8c0.3-0.5,0.6-0.9,1-1.3c0.4-0.4,0.7-0.8,1.1-1.2c0.2-0.2,0.4-0.4,0.7-0.5
                             c0.3-0.2,0.6-0.4,0.9-0.6c0.3-0.2,0.6-0.4,0.8-0.6s0.4-0.4,0.6-0.6C264.5-84.2,264.6-84.6,264.5-85z" />
            </clippath>
            <g id="ptrait" clip-path="url(#ptraitpath)">
                <path class="ptrait" fill="none" stroke="#000" d="M265.6-86.9C254.8-82.2,254-67.6,254-67.6" />
            </g>

<clippath id="ierrickpath">
                <path d="M367.3-90.2c0-0.4-0.2-0.7-0.4-0.8c-0.2-0.2-0.5-0.2-0.8-0.1c-0.4,0.1-0.7,0.4-1,0.9
                             c-0.4,0.6-0.8,1.1-1.2,1.7c-0.5,0.6-0.9,1.1-1.4,1.5c-0.4,0.4-0.9,0.7-1.3,0.9s-0.7,0.2-1,0c-0.2-0.2-0.3-0.4-0.2-0.6
                             c0.1-0.3,0.3-0.6,0.4-1c0.2-0.4,0.3-0.7,0.4-1.1c0.1-0.4,0.1-0.7-0.1-1.1c-0.2-0.4-0.6-0.6-1-0.7c-0.5-0.1-1-0.1-1.6,0
                             c0.5-0.4,1.1-0.7,1.6-1.1s1-0.7,1.5-0.9s0.9-0.5,1.2-0.6c0.4-0.1,0.6-0.2,0.8-0.1c0.4,0.2,0.7,0.1,1-0.1c0.3-0.2,0.5-0.5,0.6-0.9
                             c0.1-0.4,0.2-0.8,0.2-1.2s-0.2-0.8-0.5-1c-0.4-0.4-1-0.5-1.6-0.4c-0.7,0.1-1.4,0.4-2.1,0.9c-0.8,0.4-1.5,1-2.3,1.6
                             c-0.8,0.6-1.5,1.3-2.2,1.9l4-9.3c0.2-0.5,0.2-0.8-0.1-1c-0.3-0.2-0.7-0.3-1.3-0.3s-1.1,0.2-1.5,0.4c-0.4,0.2-0.7,0.6-1,1.2
                             c-0.1,0.2-0.2,0.5-0.4,1c-0.2,0.5-0.5,1-0.7,1.7c-0.3,0.6-0.6,1.4-0.9,2.1c-0.3,0.8-0.7,1.5-1,2.3c-0.7,1.5-1.4,3.2-2.2,5
                             c-0.7,0.9-1.4,1.7-2.2,2.4c-0.8,0.7-1.6,1.3-2.4,1.8c-0.8,0.5-1.6,0.7-2.3,0.9c-0.7,0.1-1.4,0-1.9-0.3c-0.6-0.4-1-0.9-1.1-1.7
                             c-0.1-0.8-0.1-1.6,0.2-2.4c0.2-0.8,0.6-1.5,1.2-2.2c0.5-0.6,1.2-0.9,1.9-1c0.3,0,0.5,0,0.6,0.1c0.2,0.1,0.2,0.2,0.3,0.3
                             c0,0.1,0,0.3-0.1,0.4s-0.2,0.2-0.3,0.3c-0.1,0.1-0.2,0.2-0.1,0.4c0.1,0.2,0.2,0.5,0.4,0.7s0.5,0.4,0.9,0.4c0.4,0.1,0.8,0,1.2-0.3
                             c0.5-0.3,0.8-0.7,0.9-1.4c0.1-0.6,0.1-1.3-0.2-1.8c-0.3-0.6-0.8-1.1-1.6-1.4c-0.8-0.4-1.9-0.4-3.3-0.2c-0.9,0.2-1.7,0.5-2.4,1.1
                             c-0.7,0.6-1.3,1.3-1.8,2.1c-0.4,0.7-0.7,1.5-0.9,2.3l0,0c-0.4,0.5-0.8,1-1.2,1.5c-0.5,0.5-0.9,1-1.5,1.4c-0.5,0.4-1,0.8-1.5,1.1
                             s-0.9,0.4-1.4,0.4c-0.3,0-0.5-0.1-0.7-0.3s-0.2-0.4-0.2-0.6c0-0.3,0.1-0.5,0.2-0.8s0.2-0.5,0.3-0.8c0.1-0.2,0.3-0.6,0.5-1.1
                             c0.3-0.5,0.5-1,0.8-1.6c0.3-0.5,0.5-1.1,0.8-1.6c0.2-0.5,0.4-0.9,0.5-1.2c0.2-0.5,0.2-0.8-0.1-0.9c-0.3-0.2-0.7-0.2-1.1-0.2
                             c-0.7,0-1.2,0.1-1.5,0.3s-0.6,0.4-0.8,0.8c-0.2,0.3-0.4,0.7-0.6,1.2s-0.4,0.9-0.7,1.4c-0.2,0.5-0.5,1-0.7,1.5c0,0,0,0,0,0.1
                             c-0.7,1-1.5,1.9-2.3,2.7c-0.8,0.8-1.6,1.3-2.3,1.5c-0.8,0.2-1.3,0-1.7-0.5c-0.3-0.5-0.3-1.1,0-1.8c0.2-0.4,0.4-0.8,0.7-1.3
                             c0.3-0.5,0.6-0.9,1-1.4c0.4-0.5,0.7-0.9,1.1-1.3s0.7-0.7,1-1c0.2-0.2,0.3-0.4,0.3-0.7c0.1-0.3,0-0.6-0.1-0.8
                             c-0.1-0.3-0.3-0.4-0.5-0.6s-0.5-0.1-0.9,0.1c-0.9,0.5-1.8,0.7-2.6,0.7s-1.4,0-1.9-0.1c0.1-0.4,0.1-0.8,0-1.2
                             c-0.2-0.3-0.4-0.6-0.7-0.7c-0.3-0.1-0.7-0.1-1.1,0c-0.4,0.2-0.8,0.5-1.2,1c-0.4,0.5-0.5,1.1-0.4,1.6c0.1,0.5,0.3,1,0.7,1.4
                             c-0.4,0.9-0.8,1.7-1.3,2.5c-0.5,0.8-1,1.5-1.5,2.2c-0.5,0.6-1.1,1.2-1.6,1.6s-1,0.7-1.4,0.8c-0.8,0.2-1.3,0.1-1.7-0.4
                             c-0.3-0.5-0.3-1.1,0-1.8c0.2-0.4,0.4-0.8,0.7-1.3c0.3-0.5,0.6-0.9,1-1.4c0.4-0.5,0.7-0.9,1.1-1.3c0.4-0.4,0.7-0.7,1-1
                             c0.2-0.2,0.3-0.4,0.3-0.7c0.1-0.3,0-0.6-0.1-0.8c-0.1-0.3-0.3-0.4-0.5-0.6s-0.5-0.1-0.9,0.1c-0.5,0.3-0.9,0.5-1.4,0.7
                             c-0.5,0.2-0.9,0.4-1.3,0.6c-0.4,0.2-0.8,0.3-1.2,0.4c-0.4,0.1-0.6,0.1-0.9,0.1c0.1-0.4,0.1-0.8,0-1.2c-0.2-0.3-0.4-0.6-0.7-0.7
                             c-0.3-0.1-0.7-0.1-1.1,0c-0.4,0.2-0.8,0.5-1.2,1c-0.3,0.5-0.5,1-0.4,1.5c0.1,0.5,0.2,0.9,0.5,1.3c-0.1,0.3-0.1,0.6-0.2,0.9
                             c-0.1,0.3-0.3,0.6-0.5,1l0,0c-2,2.4-3.7,3.9-5.3,4.6s-2.9,0.8-4,0.2c-0.4-0.2-0.7-0.5-0.9-0.9c-0.2-0.4-0.3-0.8-0.4-1.2
                             c0.7,0.3,1.4,0.4,2.2,0.3c0.8-0.1,1.6-0.3,2.3-0.6c0.7-0.3,1.4-0.8,2-1.4c0.6-0.6,0.9-1.3,1.2-2.1c0.2-0.6,0.1-1.3-0.1-1.8
                             c-0.2-0.5-0.5-1-1-1.4c-0.5-0.4-1.1-0.6-1.7-0.7c-0.7-0.1-1.4-0.1-2.3,0.1c-1,0.2-1.8,0.6-2.5,1.2c-0.7,0.6-1.3,1.3-1.8,2.1
                             c-0.4,0.7-0.7,1.4-0.9,2.2c-0.4,0.5-0.7,0.9-1.2,1.4c-0.5,0.5-0.9,1-1.5,1.4s-1,0.8-1.5,1.1c-0.5,0.3-0.9,0.4-1.4,0.4
                             c-0.3,0-0.5-0.1-0.7-0.3c-0.1-0.2-0.2-0.4-0.2-0.6s0.1-0.5,0.2-0.8s0.2-0.5,0.3-0.8c0.1-0.2,0.3-0.6,0.5-1.1c0.3-0.5,0.5-1,0.8-1.6
                             c0.3-0.5,0.5-1.1,0.8-1.6c0.2-0.5,0.4-0.9,0.5-1.2c0.2-0.5,0.2-0.8-0.1-0.9c-0.3-0.2-0.7-0.2-1.1-0.2c-0.7,0-1.2,0.1-1.5,0.3
                             c-0.3,0.2-0.6,0.4-0.8,0.8c-0.2,0.3-0.4,0.7-0.6,1.2s-0.4,0.9-0.7,1.4c-0.2,0.5-0.5,1-0.7,1.5c-0.3,0.5-0.5,1-0.7,1.4
                             c-0.4,0.8-0.7,1.6-0.7,2.3c-0.1,0.7,0.1,1.3,0.4,1.8c0.3,0.5,0.7,0.9,1.3,1.2c0.6,0.3,1.3,0.4,2.1,0.4c0.9-0.1,1.8-0.3,2.6-0.6
                             c0.8-0.4,1.6-0.9,2.3-1.4c0.6-0.5,1.1-0.9,1.5-1.5c0.2,0.5,0.3,1,0.6,1.4c0.4,0.7,1,1.3,1.8,1.7c1.1,0.6,2.2,0.8,3.4,0.7
                             c1.2-0.2,2.4-0.6,3.5-1.2c1.1-0.6,2.2-1.5,3.2-2.5s1.8-2.1,2.4-3.3c0,0,0-0.1,0-0.1c0,0,0.1-0.1,0.1-0.1c0.2-0.4,0.4-0.7,0.5-1.1
                             c0.1-0.4,0.2-0.7,0.3-1c0.4,0,0.8-0.1,1.1-0.2c0.3-0.1,0.6-0.2,0.8-0.3c-0.2,0.1-0.4,0.4-0.8,0.7c-0.4,0.4-0.7,0.8-1,1.3
                             c-0.3,0.5-0.6,1.1-0.8,1.7c-0.2,0.6-0.2,1.3-0.1,2c0.2,0.7,0.5,1.2,1,1.6c0.5,0.4,1.1,0.7,1.8,0.8c0.7,0.1,1.4,0.1,2.2,0
                             c0.8-0.2,1.5-0.4,2.2-0.9c0.5-0.3,0.9-0.7,1.4-1.3c0.5-0.6,1-1.2,1.5-2c0.5-0.7,1-1.6,1.5-2.5s0.9-1.8,1.4-2.7
                             c0.4,0.1,0.8,0.1,1.2,0c0.4-0.1,0.7-0.1,0.9-0.2c-0.2,0.1-0.4,0.4-0.8,0.9c-0.4,0.4-0.8,1-1.2,1.6c-0.4,0.6-0.7,1.3-0.9,2
                             c-0.3,0.7-0.3,1.4-0.1,2.1c0.2,0.7,0.5,1.2,1,1.6c0.5,0.4,1.1,0.7,1.8,0.8c0.7,0.1,1.4,0.1,2.2,0c0.8-0.2,1.5-0.4,2.2-0.9
                             c0.5-0.4,1.1-0.8,1.5-1.2c0.1,0.1,0.1,0.3,0.2,0.4c0.3,0.5,0.7,0.9,1.3,1.2c0.6,0.3,1.3,0.4,2.1,0.4c0.9-0.1,1.8-0.3,2.6-0.6
                             c0.8-0.4,1.6-0.9,2.3-1.4c0.5-0.4,1-0.9,1.5-1.5c0.2,0.5,0.4,1,0.6,1.5c0.4,0.7,1.1,1.3,1.9,1.7c1,0.5,2.1,0.6,3.2,0.4
                             c1.2-0.2,2.4-0.6,3.5-1.2c0.8-0.4,1.5-0.9,2.2-1.5c0.1,0.4,0.2,0.7,0.4,0.9c0.3,0.4,0.5,0.7,0.9,0.8c0.3,0.2,0.6,0.2,0.9,0.1
                             c0.3-0.1,0.5-0.3,0.6-0.6c0,0,0.1-0.2,0.3-0.6c0.1-0.4,0.3-0.8,0.6-1.4c0.3-0.6,0.5-1.2,0.8-2c0.3-0.8,0.6-1.6,1-2.4
                             c0.4-0.1,0.8-0.2,1.3-0.2c0.4,0,0.7,0.1,0.8,0.4c0.1,0.2,0.1,0.5,0,0.8c-0.1,0.3-0.2,0.7-0.3,1.1c-0.1,0.4-0.2,0.8-0.3,1.3
                             c-0.1,0.4-0.1,0.8,0,1.2c0.2,0.7,0.6,1.3,1.3,1.6c0.7,0.4,1.5,0.4,2.4,0.3c0.6-0.1,1.2-0.4,1.8-0.8c0.6-0.4,1.3-0.9,1.9-1.5
                             c0.6-0.6,1.2-1.2,1.7-1.9c0.5-0.7,1-1.3,1.3-2C367.1-89.3,367.3-89.8,367.3-90.2z M296.4-89.3c0.6-0.6,1.2-0.9,1.9-0.9
                             c0.5,0,0.9,0.1,1.1,0.5s0.2,0.7,0,1.1c-0.2,0.4-0.5,0.7-0.9,1s-0.7,0.4-1.2,0.6c-0.4,0.1-0.8,0.2-1.3,0.1c-0.4,0-0.8-0.1-1.1-0.3
                             C295.4-88,295.8-88.7,296.4-89.3z" />
            </clippath>
            <g id="ierrick" clip-path="url(#ierrickpath)">
                <path class="ierrick" fill="none" stroke="#000" d="M288-92.5c0,0-4.2,6.7-4.2,9.4c0.5,4.5,6,0,6,0l3.3-2.3c0,0,7.9-0.6,7.9-3.7
                                                                       c0-3-4.9-2.2-4.9-2.2s-6.8,6.5,0.6,10.7c7.5-0.8,11.1-8.7,11.4-10s-1.2-2-1.2-2s-1,2.5,1.2,3.1c2.3,0.5,7.8-4.3,7.8-4.3
                                                                       s-11,9.2-4.9,11.7c4.5,0.6,9-8.7,9.6-9.8c0.5-1.1-1.3-2.3-1.3-2.3s-1.1,2.1,1,2.9c2.1,0.9,8.1-3.2,8.1-3.2s-11.7,9.5-5,12
                                                                       c6.7-0.8,10.8-12.3,10.8-12.3s-7,11-2.9,12s7.6-5.1,7.6-5.1s2.2-6.1,5.3-5.9s3.6,2.2,2.4,3.4c-0.4-2.2-2.3-2.4-2.3-2.4
                                                                       s-8,0.7-2.4,9.9c4.6,0.6,6.6-2.2,8.2-3.6c6-4.7,7.7-17.4,9.9-19.1c-9.6,14.7-8.7,25.1-8.7,25.1s1.5-9.7,5.4-11.4
                                                                       c5.5-3.6,6.9-3.1,6.9-3.1s-5.5,1.2-6.3,3.8c0.4,4,4.2,0.5,4.2,0.5s-5,4.2-3.1,6.7c5.7,0.8,9.4-8.8,9.4-8.8" />
            </g>

<g id="pointi1">
                <path class="pointi1" stroke="#000" d="M287.7-93.2c0.4,0.3,0.8,0.4,1.3,0.4c0.6,0,1.2-0.3,1.7-0.8c0.5-0.5,0.8-1.2,0.9-1.9c0-0.5-0.1-1-0.5-1.3
                                                           c-0.4-0.3-0.8-0.4-1.4-0.3c-0.7,0.1-1.3,0.5-1.8,1.1c-0.4,0.6-0.7,1.2-0.7,1.7C287.2-93.9,287.3-93.4,287.7-93.2z" />
            </g>

<p>Click card to see animation again.</p>

</body>

</html>

Name Card SVG Animation. 点击名片会触发签名动画。

编辑器支持Emmet

快捷键

Name Card SVG Animation. 点击名片会触发签名动画。

HTML5 Vue.js+D3.js+GSAP交互式机场飞行距离演示动画

基于jQuery和GSAP实现的页面滚动图像过渡切换动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：