html 回复 笑脸图标,CSS3 笑脸图标

CSS

语言：

CSSSCSS

确定

.base {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

height: 319px;

width: 240px;

background: #7ed321;

border-radius: 16px;

}

.eye1 {

position: absolute;

height: 85px;

width: 45px;

margin-top: 122px;

margin-left: 45px;

border-radius: 50%;

border: solid #3e6910 8px;

transform: rotate(4deg);

}

.eye2 {

position: absolute;

height: 85px;

width: 45px;

margin-top: 122px;

margin-left: 130px;

border-radius: 50%;

border: solid #3e6910 8px;

transform: rotate(-4deg);

}

.cover {

position: absolute;

height: 85px;

width: 152px;

background: #7ed321;

margin-top: 165px;

margin-left: 45px;

}

.mouth1 {

position: absolute;

height: 81px;

width: 75px;

background: #67a522;

border-top: solid #3e6910 8px;

border-left: solid #3e6910 8px;

border-bottom: solid #3e6910 8px;

margin-top: 187px;

margin-left: 37px;

border-bottom-left-radius: 100%;

overflow: hidden;

}

.teeth1 {

height: 20px;

width: 75px;

background: #fff;

}

.mouth2 {

position: absolute;

height: 81px;

width: 75px;

background: #67a522;

border-top: solid #3e6910 8px;

border-right: solid #3e6910 8px;

border-bottom: solid #3e6910 8px;

margin-top: 187px;

margin-left: 118px;

border-bottom-right-radius: 100%;

overflow: hidden;

}

.teeth2 {

height: 20px;

width: 75px;

background: #fff;

}

.tongue1 {

height: 70px;

width: 70px;

background: #c2dba6;

border-radius: 50%;

margin-left: 40px;

margin-top: 40px;

}

.tongue2 {

height: 70px;

width: 70px;

background: #c2dba6;

border-radius: 50%;

margin-left: -31px;

margin-top: 40px;

}

.fold {

height: 76px;

width: 77px;

background: #cbeda6;

margin-left: 163px;

border-bottom-left-radius: 10px;

}

.cut {

position: absolute;

height: 110px;

width: 60px;

background: #fff;

transform: rotate(-45deg);

margin-top: -38px;

margin-left: 29px;

}