纯CSS画的JIGGLER卡通形象

植物大战僵尸里面的花生米射手。

CSS3, cartoon

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

the-soup {
    align-items: center;
    background-color: #fefebc;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
jiggler {
    display: flex;
    height: 56vh;
    justify-content: center;
    position: relative;
    transform: rotate(-11.5deg);
    width: 28vh;
}
.jiggler__hat {
    background-color: #aaccff;
    border: 1vh solid #000;
    border-radius: 42%;
    height: 4vh;
    position: absolute;
    top: -1.6vh;
    left: 6vh;
    transform: rotate(-14deg);
    width: 6vh;
}
.jiggler__leg {
    background-color: #aaccff;
    border: 1vh solid #000;
    border-radius: 50%;
    height: 4vh;
    position: absolute;
    width: 6vh;
}
.jiggler__leg--left {
    bottom: -.4vh;
    left: 3vh;
    transform: rotate(30deg);
}
.jiggler__leg--right {
    bottom: 0;
    right: 3vh;
    transform: rotate(-30deg);
}
.jiggler__head {
    border: 1vh solid #000;
    background-color: #666;
    border-radius: 50%;
    height: 26vh;
    position: absolute;
    top: 0;
    left: 0;
    width: 26vh;
}
.jiggler__head::before {
    border-top: 15vh solid transparent;
    border-bottom: 10vh solid #dfdfff;
    border-bottom-left-radius: 13vh;
    border-bottom-right-radius: 13vh;
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 26vh;
}
.jiggler__head::after {
    border-top: 3vh solid #dfdfff;
    border-bottom: 5vh solid transparent;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    content: '';
    display: block;
    position: absolute;
    bottom: 4.8vh;
    left: 0;
    width: 26vh;
    z-index: 0;
}
.jiggler__eyes {
    height: 6vh;
    position: absolute;
    top: 5vh;
    left: 7vh;
    transform: rotate(4deg);
    width: 18vh;
}
.jiggler__eye {
    border-right: 1vh solid #666;
    border-bottom: 1vh solid #000;
    border-left: 1vh solid #666;
    border-radius: 50%;
    float: left;
    height: 6vh;
    width: 4vh;
}
.jiggler__eye--right {
    float: right;
}
.jiggler__left-shoulder {
    background-color: #aaccff;
    border: 1vh solid #000;
    border-radius: 42%;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    height: 5vh;
    position: absolute;
    top: 13vh;
    left: -2vh;
    transform: rotate(-11.5deg);
    width: 3vh;
    z-index: 4;
}
.jiggler__left-shoulder::before {
    border-right: 0.6vh solid #000;
    border-top-right-radius: 36%;
    border-bottom-right-radius: 36%;
    content: '';
    display: block;
    height: 3.6vh;
    position: absolute;
    top: .7vh;
    right: .8vh;
    width: 3vh;
}
.jiggler__lips {
    background-color: #dfdfff;
    border-top: 0.6vh solid #000;
    border-bottom: 0.6vh solid #000;
    height: 3.2vh;
    position: absolute;
    top: 16.4vh;
    right: 8vh;
    transform: rotate(-12deg);
    width: 2vh;
    z-index: 2;
}
.jiggler__lips::before {
    background-color: #aaccff;
    border: 0.8vh solid #000;
    border-radius: 50%;
    content: '';
    display: block;
    height: 5vh;
    position: absolute;
    top: -1.6vh;
    left: 1.2vh;
    width: 4vh;
    z-index: 2;
}
.jiggler__lips::after {
    background-color: #000;
    border-radius: 50%;
    content: '';
    display: block;
    height: 3.2vh;
    position: absolute;
    top: 0vh;
    left: 3vh;
    width: 2vh;
    z-index: 3;
}
.jiggler__neck {
    background-color: #dfdfff;
    border-right: 1vh solid #000;
    border-left: 1vh solid #000;
    height: 4vh;
    position: absolute;
    top: 26vh;
    left: 9vh;
    width: 8vh;
}
.jiggler__neck::before {
    background-color: transparent;
    border-top: 1vh solid #000;
    border-right: 1vh solid transparent;
    border-left: 1vh solid transparent;
    border-radius: 50%;
    content: '';
    display: block;
    height: 2vh;
    position: absolute;
    top: -1.6vh;
    left: -1vh;
    transform: rotate(-45deg);
    width: 2vh;
    z-index: 2;
}
.jiggler__neck::after {
    background-color: transparent;
    border-bottom: 1vh solid #000;
    border-left: 1vh solid transparent;
    border-radius: 50%;
    content: '';
    display: block;
    height: 8vh;
    position: absolute;
    bottom: -4vh;
    left: -.8vh;
    transform: rotate(45deg);
    width: 8vh;
    z-index: 2;
}
.jiggler__body {
    border: 1vh solid #000;
    background-color: #666;
    border-radius: 50%;
    height: 26vh;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 26vh;
}
.jiggler__body::before {
    border-top: 13vh solid #dfdfff;
    border-bottom: 13vh solid transparent;
    border-top-left-radius: 13vh;
    border-top-right-radius: 13vh;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 26vh;
}
.jiggler__body::after {
    border-top: 3vh solid transparent;
    border-bottom: 3vh solid #dfdfff;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    content: '';
    display: block;
    position: absolute;
    top: 9.8vh;
    left: 0;
    width: 26vh;
    z-index: 0;
}
.jiggler__body .jiggler__left-shoulder {
    top: 10vh;
    left: -2.6vh;
    transform: rotate(2deg);
}
.jiggler__body .jiggler__left-shoulder::before {
    border-radius: 45%;
}
.jiggler__bottom-lips {
    background-color: #aaccff;
    border: 0.8vh solid #000;
    border-radius: 46%;
    content: '';
    display: block;
    height: 5vh;
    position: absolute;
    top: 6vh;
    right: 6vh;
    transform: rotate(-6deg);
    width: 4.6vh;
    z-index: 2;
}
.jiggler__bottom-lips::before {
    background-color: #000;
    border-radius: 48%;
    content: '';
    display: block;
    height: 3vh;
    position: absolute;
    top: 1vh;
    left: 1.2vh;
    width: 2.6vh;
    z-index: 3;
}
.jiggler__bottom-eyes {
    height: 6vh;
    position: absolute;
    bottom: 3vh;
    left: 10vh;
    transform: rotate(-3deg);
    width: 12vh;
}
.jiggler__bottom-eye {
    background-color: #dfdfff;
    border-radius: 50%;
    float: left;
    height: 1vh;
    width: 1vh;
}
.jiggler__bottom-eye--right {
    float: right;
}

HTML

</div>

</div>

</jiggler>

</the-soup>

植物大战僵尸里面的花生米射手。

CSS3, cartoon

编辑器支持Emmet

快捷键

植物大战僵尸里面的花生米射手。

CSS3, cartoon

CSS3 边框线形成的LOADING动画

CSS3 类似调色卡的LOADING动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：