HTML5/CSS3 哆啦A梦 | 机器猫卡通肖像

Doraemon in Pure CSS，献给儿童节。

html5, cartoon

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #93B8CA;
}
.border-box {
    box-sizing: border-box;
}
.clearfix {
    content: "";
    display: block;
    clear: both;
}
.face_01 {
    margin: 50px auto;
    position: relative;
    width: 420px;
    height: 400px;
    background-color: #1E90FF;
    border: 2px solid #000;
    border-radius: 47% 47% 45% 45%;
}
.face_02 {
    position: absolute;
    bottom: 0;
    left: 30px;
    width: 360px;
    height: 300px;
    background-color: #FFF;
    border: 2px solid #000;
    border-radius: 50% 50% 45% 45%;
}
.eye_box {
    position: absolute;
    top: -45px;
    right: 90px;
    width: 180px;
    height: auto;
}
.big_eye_left,
.big_eye_right {
    width: 90px;
    height: 110px;
    background-color: #FFF;
    border: 2px solid #000;
    border-radius: 46%;
}
.big_eye_left {
    float: left;
}
.big_eye_right {
    float: right;
}
.small_eye_left,
.small_eye_right {
    position: absolute;
    top: 60px;
    width: 20px;
    height: 20px;
    background-color: #000;
    border-radius: 50%;
}
.small_eye_left {
    left: 60px;
}
.small_eye_right {
    right: 60px;
}
.nose_01 {
    position: absolute;
    top: 47px;
    left: 151px;
    width: 50px;
    height: 50px;
    background-color: #FF0000;
    border: 2px solid #000;
    border-radius: 50%;
}
.nose_01_shadow {
    position: absolute;
    top: 10px;
    left: 25px;
    width: 15px;
    height: 15px;
    background-color: #FFF;
    border-radius: 50%;
    box-shadow: 0px 0px 2px 2px rgba(255, 255, 255, .4);
}
.nose_02 {
    height: 130px;
    width: 2px;
    position: absolute;
    top: 95px;
    left: 176px;
    border-left: 2px solid #000;
}
.mouth {
    position: absolute;
    top: 25px;
    left: 60px;
    height: 200px;
    width: 240px;
    border-bottom: 2px solid #000;
    border-radius: 0 0 45% 45%;
}
.whisker_left,
.whisker_right {
    position: absolute;
    top: 60px;
    width: 180px;
    height: 180px;
}
.whisker_left {
    left: 0;
}
.whisker_right {
    right: 0;
}
.whisker_left span:nth-child(1),
.whisker_right span:nth-child(1) {
    position: absolute;
    top: 30px;
    height: 60px;
    width: 100px;
    border-top: 2px solid #000;
}
.whisker_left span:nth-child(1) {
    left: 30px;
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
.whisker_right span:nth-child(1) {
    right: 30px;
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
.whisker_left span:nth-child(2),
.whisker_right span:nth-child(2) {
    position: absolute;
    top: 60px;
    height: 60px;
    width: 100px;
    border-top: 2px solid #000;
}
.whisker_left span:nth-child(2) {
    left: 35px;
}
.whisker_right span:nth-child(2) {
    right: 35px;
}
.whisker_left span:nth-child(3),
.whisker_right span:nth-child(3) {
    position: absolute;
    top: 90px;
    height: 60px;
    width: 100px;
    border-top: 2px solid #000;
}
.whisker_left span:nth-child(3) {
    left: 50px;
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
.whisker_right span:nth-child(3) {
    right: 50px;
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
.collar {
    position: absolute;
    top: 350px;
    left: 50px;
    width: 320px;
    height: 50px;
    background-color: #FF0000;
    border: 2px solid #000;
    border-radius: 30px;
}
.bell_01 {
    position: absolute;
    top: 15px;
    left: 130px;
    width: 60px;
    height: 60px;
    background-color: #FFFF00;
    border: 2px solid #000;
    border-radius: 50%;
}
.bell_02 {
    position: absolute;
    top: 17px;
    left: 1px;
    width: 53px;
    height: 18px;
    border-top: 2px solid #000;
}
.bell_03 {
    position: absolute;
    top: 22px;
    left: 0;
    width: 57px;
    height: 23px;
    border-top: 2px solid #000;
}
.bell_04 {
    position: absolute;
    top: 30px;
    left: 20px;
    width: 15px;
    height: 10px;
    background-color: #000;
    border-radius: 50%;
}
.bell_05 {
    position: absolute;
    top: 37px;
    left: 27px;
    width: 30px;
    height: 20px;
    border-left: 2px solid #000;
}

HTML

</div>
            <div class="big_eye_right border-box "> <span class="small_eye_right border-box"></span>

</div>
        </div>
        <div class="nose_01 border-box"> <span class="nose_01_shadow"></span>

</div>
        <div class="nose_02 border-box"></div>
        <div class="mouth border-box"></div>
        <div class="whisker_left border-box"> <span class="whisker"></span>
            <span class="whisker"></span>
            <span class="whisker"></span>

</div>
        <div class="whisker_right border-box"> <span class="whisker"></span>
            <span class="whisker"></span>
            <span class="whisker"></span>
        </div>
    </div>
    <div class="collar border-box">
        <div class="bell_01 border-box"> <span class="bell_02"></span>
            <span class="bell_03"></span>
            <span class="bell_04"></span>
            <span class="bell_05"></span>

</div>
    </div>
</div>

Doraemon in Pure CSS，献给儿童节。

html5, cartoon

编辑器支持Emmet

快捷键

Doraemon in Pure CSS，献给儿童节。

html5, cartoon

HTML5 CSS3 SVG团队成员介绍卡片页面模板

HTML5 CSS3 GSAP带音效的超级马里奥跑跳动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：