CSS3+SVG 自动签名动画

CSS3, SVG, 笔画

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #DDF291;
}
.h-con {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0) rotate(-3deg) scale3d(0.9, 0.9, 1);
}
.h-con__h {
    width: 300px;
}
.h-con__h__line {
    fill: none;
    stroke: #273E4E;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 0;
    stroke-dasharray: 2346;
    stroke-dashoffset: 2346;
}
.h-con__h__motif {
    stroke: #DDF291;
    fill: #273E4E;
}
.h-con__h__motif--one {
    stroke-width: 13px;
}
.h-con__h__motif--two {
    stroke-width: 37px;
}
.h-con__h__motif--three {
    stroke-width: 16px;
}
.h-con__h__motif--four {
    stroke-width: 23px;
}
.h-con__h__motif--five {
    stroke-width: 28px;
}
@keyframes motif {
    to {
        stroke-width: 0;
    }
}
.animation {
    animation: 3s in forwards;
}
@keyframes in {
    to {
        transform: translate3d(-50%, -50%, 0);
    }
}
.animation .h-con__h__line {
    animation: draw 2.2s forwards, stroke-width 1.12s forwards;
}
@keyframes stroke-width {
    to {
        stroke-width: 8px;
    }
}
@keyframes draw {
    31% {
        stroke-dashoffset: 1975;
        animation-timing: cubic-bezier(0.46, 0, 0.32, 1);
    }
    100% {
        stroke-dashoffset: 0;
        animation-timing: cubic-bezier(0.92, 0, 0, 1);
    }
}
.animation .h-con__h__motif--one {
    animation: motif 1s forwards 0.02s cubic-bezier(0.41, 0.01, 0.3, 1);
}
.animation .h-con__h__motif--two {
    animation: motif 1s forwards 0.75s cubic-bezier(0.41, 0.01, 0.3, 1);
}
.animation .h-con__h__motif--three {
    animation: motif 0.7s forwards 0.9s cubic-bezier(0.41, 0.01, 0.3, 1);
}
.animation .h-con__h__motif--four {
    animation: motif 0.8s forwards 1.3s cubic-bezier(0.41, 0.01, 0.3, 1);
}
.animation .h-con__h__motif--five {
    animation: motif 1.2s forwards 1.55s cubic-bezier(0.41, 0.01, 0.3, 1);
}
.restart {
    background: none;
    border-radius: 3px;
    border: 2px solid #273E4E;
    position: fixed;
    bottom: 2vw;
    right: 2vw;
    padding: 1em 1.5em;
    outline: none;
    transition: 0.3s;
    cursor: crosshair;
    font-weight: bold;
    color: #273E4E;
}
.restart:hover,
.restart:hover,
.restart:focus {
    background: #273E4E;
    color: #DDF291;
}

HTML

<button class="restart" id="restart">restart</button>

CSS3, SVG, 笔画

编辑器支持Emmet

快捷键

CSS3, SVG, 笔画

CSS3+SVG 七巧板拼成自行车形状动画

CSS3+SVG 多条波浪叠加动画效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：