CSS3 企鹅先生卡通肖像

带眼镜、打领结的企鹅绅士：）

css3, penguin

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #BDC4A7;
}
.peng {
    width: 200px;
    height: 300px;
    background: #111;
    margin: 50px auto;
    position: relative;
    border-radius: 50% 50% 40% 40%;
}
.hair {
    width: 0px;
    height: 0px;
    border: 20px solid transparent;
    border-bottom: 50px solid #111;
    margin: auto;
    position: relative;
    top: -50px;
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    transform: rotate(15deg);
}
.hair:before {
    content: "";
    position: absolute;
    border: 20px solid transparent;
    border-bottom: 50px solid #111;
    top: -10px;
    left: -40px;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    transform: rotate(-30deg);
}
.hair:after {
    content: "";
    position: absolute;
    border: 20px solid transparent;
    border-bottom: 50px solid #111;
    top: -20px;
    right: -40px;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    transform: rotate(30deg);
}
.inside {
    width: 180px;
    height: 250px;
    background: #fff;
    border-radius: 50% 50% 40% 40%;
    margin: -30px auto;
    position: relative;
}
.inside:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-top-color: #111;
    margin: auto;
    left: 0;
    right: 0;
}
.glasses {
    width: 220px;
    height: 50px;
    position: absolute;
    margin: auto;
    left: -20px;
    right: 0;
    top: 65px;
}
.glasses:before {
    content: "";
    position: absolute;
    width: 32px;
    height: 20px;
    background: #34495e;
    margin: auto;
    left: 0;
    right: 0;
    top: 10px;
}
.glasses:after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    margin: auto;
    left: 0;
    right: 0;
    top: 17px;
}
.left-lens {
    width: 95px;
    height: 60px;
    border-radius: 10% 20% 50% 50%;
    float: left;
    border: 5px solid #34495e;
    -webkit-transform: rotate(5deg);
}
.right-lens {
    width: 95px;
    height: 60px;
    border-radius: 20% 10% 50% 50%;
    float: right;
    border: 5px solid #34495e;
    -webkit-transform: rotate(-5deg);
}
.eyes {
    width: 110px;
    height: 20px;
    margin: auto;
    position: relative;
    top: 85px;
}
.l-eye {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000;
    float: left;
    position: relative;
    z-index: 99;
    box-shadow: 0 0 2px rgba(0, 0, 0, 1);
}
.l-eye:before {
    content: "";
    position: absolute;
    z-index: 5;
    width: 7px;
    height: 7px;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: #8d97f4;
}
.l-eye:after {
    content: "";
    position: absolute;
    z-index: 2;
    border: 5px solid transparent;
    border-left: 10px solid #fff;
    -webkit-transform: rotate(45deg);
    top: 2px;
}
.r-eye {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000;
    float: right;
    position: relative;
    z-index: 99;
    box-shadow: 0 0 2px rgba(0, 0, 0, 1);
}
.r-eye:before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: #8d97f4;
}
.r-eye:after {
    content: "";
    position: absolute;
    z-index: 2;
    border: 5px solid transparent;
    border-left: 10px solid #fff;
    -webkit-transform: rotate(45deg);
    top: 2px;
}
.nose {
    width: 20px;
    height: 20px;
    margin: 90px auto;
    overflow: hidden;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #F9812F;
}
.tie {
    width: 15px;
    height: 20px;
    border-radius: 50% 50% 40% 40%;
    margin: -60px auto;
    background: #34495e;
    position: relative;
}
.tie:before {
    content: "";
    position: absolute;
    border-left: 50px solid #34495e;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-radius: 40%;
    left: -35px;
    top: -10px;
}
.tie:after {
    content: "";
    position: absolute;
    border-right: 50px solid #34495e;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-radius: 40%;
    right: -35px;
    top: -10px;
}
.hands {
    width: 180px;
    height: 50px;
    margin: 30px auto;
    overflow: hidden;
}
.l-hand {
    border: 20px solid transparent;
    border-left: 50px solid #111;
    top: 100px;
    left: 100px;
    transform-origin: top left;
    transform: rotate(25deg);
    float: left;
}
.r-hand {
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-right: 50px solid #111;
    transform-origin: top left;
    transform: rotate(-25deg);
    float: right;
    position: relative;
    top: 30px;
    right: -7px;
}
.legs {
    width: 150px;
    height: 40px;
    margin: auto;
    position: relative;
    z-index: -2;
}
.l-leg {
    width: 30px;
    height: 45px;
    background: #F9812F;
    border-radius: 50%;
    float: left;
    -webkit-transform: rotate(15deg);
}
.r-leg {
    width: 30px;
    height: 45px;
    background: #F9812F;
    border-radius: 50%;
    float: right;
    -webkit-transform: rotate(-15deg);
}

HTML

带眼镜、打领结的企鹅绅士：）

css3, penguin

编辑器支持Emmet

快捷键

带眼镜、打领结的企鹅绅士：）

css3, penguin

HTML5 CSS3 愤怒的小鸟卡通形象

CSS3 SVG玩爆气球的卡通撒旦宝宝

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：