CSS3僵尸宝宝头像

CSS3 Zombie

css3, zombie

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

#title {
    font-family: 'Creepster', cursive;
    font-size: 40px;
    color: #8aaf48;
    text-align: center;
    padding-top: 40px;
}
.contain {
    width: 300px;
    margin: 0 auto;
    position: relative;
    padding-top: 100px;
}
#head {
    width: 300px;
    height: 300px;
    background: #CCE7A0;
    border-radius: 50%;
    box-shadow: inset 43px 0px 3px 2px #BFD99A;
}
.cut {
    height: 75px;
    width: 100px;
    border-radius: 90px 90px 0 0;
    -moz-border-radius: 90px 90px 0 0;
    -webkit-border-radius: 90px 90px 0 0;
    background: #FE98A6;
    position: absolute;
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(13deg);
    left: 175px;
    top: 102px;
}
.cut:before {
    content: ' ';
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #FE98A6;
    position: absolute;
    top: 26px;
    left: 25px;
}
.cut:after {
    content: ' ';
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #FE98A6;
    position: absolute;
    top: 12px;
    left: -26px;
}
.eye {
    background: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative;
    border: 5px solid #b9ce96;
}
.eye.left {
    left: 65px;
    top: 106px;
}
.eye.right {
    left: 165px;
    top: 35px;
    background: #fffcac;
}
.pupil {
    background: black;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    left: 36px;
    position: absolute;
    top: 27px;
}
.pupil.left {
    top: 10px;
}
.nose:before {
    content: ' ';
    width: 25px;
    height: 25px;
    display: block;
    background: #575675;
    border-radius: 50%;
    position: relative;
    left: 115px;
    top: 75px;
}
.nose:after {
    content: ' ';
    width: 25px;
    height: 25px;
    display: block;
    background: #575675;
    border-radius: 50%;
    position: relative;
    left: 154px;
    top: 50px;
}
.mouth {
    width: 130px;
    height: 40px;
    background: #575675;
    border-radius: 10px;
    position: relative;
    top: 71px;
    left: 82px;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}
.tooth {
    width: 20px;
    height: 17px;
    background: #fff;
    position: relative;
}
.tooth.first {
    left: 20px;
}
.tooth.second {
    left: 86px;
    top: -17px;
}
.tooth.third {
    left: 44px;
    top: -4px;
}
.blood:before {
    content: ' ';
    background: #8D3B44;
    width: 40px;
    height: 22px;
    display: block;
    border-radius: 10px;
    position: relative;
    top: -27px;
    left: 80px;
    z-index: -1;
}
.blood:after {
    content: ' ';
    background: #8D3B44;
    width: 20px;
    height: 47px;
    display: block;
    border-radius: 10px;
    position: relative;
    top: -55px;
    left: 108px;
    z-index: -1;
}
.ear {
    width: 50px;
    height: 50px;
    position: absolute;
    background: #BFD99A;
}
.ear.left {
    top: 220px;
    left: -25px;
    -webkit-border-radius: 15px 0 0 15px;
    border-radius: 15px 0 0 15px;
}
.ear.right {
    top: 220px;
    left: 277px;
    -webkit-border-radius: 0px 15px 15px 0px;
    border-radius: 0px 15px 15px 0px;
    z-index: -1;
}

HTML

CSS3 Zombie

css3, zombie

编辑器支持Emmet

快捷键

CSS3 Zombie

css3, zombie

CSS3+SVG VIP头像边框外的动效

CSS3 搞怪熊猫头像动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：