HTML5 CSS3 俏皮的蓝色小蚂蚁

纯CSS构建迪士尼经典卡通动物肖像。

css3, animal

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    box-sizing: border-box;
    position: relative;
}
*::after,
*::before {
    box-sizing: border-box;
    content: "";
    position: absolute;
}
body {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-image: -webkit-linear-gradient(top, #7b7eb6, #d9879d);
    background-image: linear-gradient(to bottom, #7b7eb6, #d9879d);
    background-size: contain;
    background-repeat: no-repeat;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100vh;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    min-height: 500px;
    min-width: 800px;
    overflow: hidden;
    width: 100vw;
}
.cri-kee {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    right: 4rem;
    height: 37.5rem;
    width: auto;
}
.cri-kee::before {
    /* left antenna */
    
    border-radius: 100%;
    border-right: 0.4rem solid #282828;
    height: 20rem;
    right: 5rem;
    top: calc(40% - 15rem);
    width: 10rem;
    z-index: -2;
}
.cri-kee::after {
    /* right antenna */
    
    border-radius: 100%;
    border-right: 0.4rem solid #282828;
    height: 26rem;
    right: -4rem;
    top: calc(40% - 18rem);
    -webkit-transform: rotateZ(35deg);
    transform: rotateZ(35deg);
    width: 10rem;
    z-index: -2;
}
.cri-kee .head {
    background-color: #694ca6;
    border-radius: 100%;
    height: 8.5rem;
    top: 40%;
    -webkit-transform: rotateZ(30deg);
    transform: rotateZ(30deg);
    width: 10rem;
}
.cri-kee .head .eyes .left .eye-wrinkle,
.cri-kee .head .eyes .right .eye-wrinkle,
.cri-kee .head .face-wrinkles::before,
.cri-kee .head .face-wrinkles::after,
.cri-kee .head .mouth .smile .wrinkles::before,
.cri-kee .head .mouth .smile .wrinkles::after {
    background-color: #694ca6;
    border: 0.15rem solid #3c334e;
    border-width: .15rem 0 0 0;
    border-radius: 100%;
}
.cri-kee .head .eyes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 60%;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    left: 5%;
    -webkit-transform: rotateZ(10deg);
    transform: rotateZ(10deg);
    width: 100%;
    z-index: 1;
}
.cri-kee .head .eyes .left,
.cri-kee .head .eyes .right {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #694ca6;
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 35%;
}
.cri-kee .head .eyes .left::after,
.cri-kee .head .eyes .right::after {
    /* pupil */
    
    background-color: #282828;
    border-radius: 100%;
    height: 25%;
    left: .55rem;
    bottom: 12%;
    -webkit-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg);
    width: 20%;
}
.cri-kee .head .eyes .left::before,
.cri-kee .head .eyes .right::before {
    /* eye white */
    
    background-color: #eee;
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
    height: calc(100% - 1em);
    left: .5rem;
    top: .8rem;
    width: calc(100% - 1rem);
}
.cri-kee .head .eyes .left {
    box-shadow: inset 0.2rem 0.4rem 0 -0.05rem #3c334e;
}
.cri-kee .head .eyes .left .eye-wrinkle {
    height: 1rem;
    left: -.4rem;
    top: 50%;
    -webkit-transform: rotateZ(20deg);
    transform: rotateZ(20deg);
    width: 60%;
}
.cri-kee .head .eyes .right {
    box-shadow: inset -0.2rem 0.4rem 0 -0.05rem #3c334e;
}
.cri-kee .head .eyes .right .eye-wrinkle {
    height: .6rem;
    right: -.6rem;
    top: 45%;
    -webkit-transform: rotateZ(-33deg);
    transform: rotateZ(-33deg);
    width: 65%;
}
.cri-kee .head .face-wrinkles {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transform: rotateZ(15deg);
    transform: rotateZ(15deg);
    width: 50%;
    z-index: 1;
}
.cri-kee .head .face-wrinkles::before {
    height: .8rem;
    left: 85%;
    top: -.6rem;
    width: 45%;
}
.cri-kee .head .face-wrinkles::after {
    height: .6rem;
    left: 95%;
    top: -.2rem;
    -webkit-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg);
    width: 30%;
}
.cri-kee .head .mouth {
    background-color: #694ca6;
    border-radius: 90% 60% 60% 80%;
    height: 7rem;
    left: 5%;
    overflow: hidden;
    top: -38%;
    -webkit-transform: rotateZ(29deg) skew(-10deg);
    transform: rotateZ(29deg) skew(-10deg);
    width: 8.5rem;
}
.cri-kee .head .mouth .smile {
    /* extra shape added to head */
    
    background-color: transparent;
    border-bottom: 0.2rem solid #3c334e;
    border-right: 0.2rem solid #3c334e;
    border-radius: 100% 80% 140% 100% / 0% 90% 100% 80%;
    height: 68%;
    left: 18%;
    top: 24%;
    -webkit-transform: rotateZ(12deg) skew(-5deg);
    transform: rotateZ(12deg) skew(-5deg);
    width: 76%;
}
.cri-kee .head .mouth .smile::before {
    /* cut the smile */
    
    background-color: #694ca6;
    height: 100%;
    left: -20%;
    top: -34%;
    -webkit-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
    width: 110%;
}
.cri-kee .head .mouth .smile .wrinkles::before {
    /* right */
    
    background-color: transparent;
    height: .8rem;
    left: 93%;
    top: .9rem;
    -webkit-transform: rotateZ(-65deg);
    transform: rotateZ(-65deg);
    width: 18%;
}
.cri-kee .head .mouth .smile .wrinkles::after {
    /* left */
    
    background-color: transparent;
    height: .8rem;
    left: 7%;
    top: 4rem;
    -webkit-transform: rotateZ(-65deg);
    transform: rotateZ(-65deg);
    width: 15%;
}
.cri-kee .thorax {
    background-image: -webkit-radial-gradient(ellipse farthest-corner, #6580cc 0%, #566aa3 100%);
    background-image: radial-gradient(ellipse farthest-corner, #6580cc 0%, #566aa3 100%);
    border: 0.2rem solid #4d5d8a;
    border-radius: 60% 60% 90% 60%/ 60% 60% 90% 90%;
    height: 13rem;
    left: .3rem;
    overflow: hidden;
    top: calc(40% - 2rem);
    -webkit-transform: rotateZ(-15deg);
    transform: rotateZ(-15deg);
    width: 8.5rem;
    z-index: -3;
}
.cri-kee .thorax .segments,
.cri-kee .thorax .segments::after,
.cri-kee .thorax .segments::before {
    background-color: transparent;
    border: 0.2rem solid #4d5d8a;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    height: 120%;
}
.cri-kee .thorax .segments {
    /* first thorax segment */
    
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    left: -30%;
    top: -80%;
    -webkit-transform: rotateZ(-50deg);
    transform: rotateZ(-50deg);
    width: 200%;
}
.cri-kee .thorax .segments::after {
    /* second segment */
    
    background-color: transparent;
    left: -16%;
    top: -2%;
    -webkit-transform: rotateZ(-130deg);
    transform: rotateZ(-130deg);
    width: 90%;
}
.cri-kee .thorax .segments::before {
    /* third segment */
    
    background-color: transparent;
    left: -33%;
    top: 4%;
    -webkit-transform: rotateZ(-130deg);
    transform: rotateZ(-130deg);
    width: 90%;
}
.cri-kee .thorax-back {
    background-color: #694ca6;
    border-radius: 60% 60% 90% 60%/ 60% 60% 90% 90%;
    height: 13rem;
    left: .8rem;
    overflow: hidden;
    top: calc(40% - 2rem)-13rem;
    -webkit-transform: rotateZ(-15deg);
    transform: rotateZ(-15deg);
    width: 8.5rem;
    z-index: -4;
}

HTML

纯CSS构建迪士尼经典卡通动物肖像。

css3, animal

编辑器支持Emmet

快捷键

纯CSS构建迪士尼经典卡通动物肖像。

css3, animal

HTML5 CSS3 蓝色斋月灯笼

HTML5 CSS3在球形表面运动的彩色圆形元素

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：