HTML5 SVG卡通版本的面团 | 汤圆

Floating Dumpling，可以切换到手绘风格的圆形。

svg, moon,

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

:root {
    --float: running;
    --drawn: url(#drawn);
    --arms: paused;
    --eyes: paused;
}
svg {
    width: 90vmin;
    animation: float 2900ms infinite alternate ease-in-out;
    animation-play-state: var(--float);
}
#drawable {
    filter: var(--drawn);
}
#right-arm path {
    animation: lift-right-arm 3000ms 2100ms infinite alternate ease-in-out;
    animation-play-state: var(--arms);
}
#left-arm path {
    animation: lift-left-arm 1900ms 0ms infinite alternate ease-in-out;
    animation-play-state: var(--arms);
}
#right-eye-lid {
    animation: right-eye 8000ms -70ms infinite alternate ease-in both;
    animation-play-state: var(--eyes);
    display: none;
}
#left-eye-lid {
    animation: left-eye 8000ms -70ms infinite alternate ease-in both;
    animation-play-state: var(--eyes);
    display: none;
}
@keyframes float {
    from {
        transform: translateY(-2.2vmin);
    }
    to {
        transform: translateY(2.2vmin);
    }
}
@keyframes lift-right-arm {
    to {
        d: path("M810,700 C810,680 910,690 860,810 L840,820 M860,810 L855,830 M860,810 L880,820");
    }
}
@keyframes lift-left-arm {
    to {
        d: path("M210,700 C210,680 60,690 90,760 L80,780 M90,760 L95,780 M90,760 L110,770");
    }
}
@keyframes left-eye {
    from {
        d: path("M258,640 L262,640")
    }
}
@keyframes right-eye {
    from {
        d: path("M568,651 L572,651")
    }
}
/* Form and Layout styles */

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #fafaff;
    background: hsl(200, 52%, 42%);
}
form {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, .2);
    left: 0;
    right: 0;
    padding: .5rem 1rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
form div {
    margin: 0 1rem;
}
.show-d {
    display: none;
}
@supports(d: path("M0,0 L1,1")) {
    .show-d.arms {
        display: block;
    }
}
form div {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
label {
    padding: .2rem .5rem .2rem 1.75rem;
    border-radius: .5rem;
    display: inline-block;
    transform: translateX(-1.5rem)
}
input:checked + label {
    background: rgba(255, 255, 255, .1);
}

HTML

<form>
    <div>
        <input type="checkbox" id="float" checked/>
        <label for="float">Float</label>
    </div>
    <div>
        <input type="checkbox" id="handdrawn" checked/>
        <label for="handdrawn">Hand Drawn</label>
    </div>
    <div class="show-d arms">
        <input type="checkbox" id="arms" />
        <label for="arms">Arms</label>
    </div>
    <div class="show-d">
        <input type="checkbox" id="eyelids" />
        <label for="eyelids">Eyes</label>
    </div>
</form>

Floating Dumpling，可以切换到手绘风格的圆形。

svg, moon,

编辑器支持Emmet

快捷键

Floating Dumpling，可以切换到手绘风格的圆形。

svg, moon,

HTML5 SVG 被水浸泡的文本特效

HTML5 GSAP带彩色碎片（纸屑）化特效的文本打字动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：