html 文本显示表情,CSS3 文本字符组成的表情图案

CSS

语言：

CSSSCSS

确定

.container {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

.face {

width: 60px;

height: 40px;

position: relative;

float: left;

margin: 40px 0 0 25px;

}

.face .eyes {

width: 20px;

height: 20px;

position: relative;

float: left;

border: 1px solid #000;

}

.face .eyes::before {

content: '';

width: 7px;

height: 7px;

position: absolute;

box-sizing: border-box;

}

.face .eyes:nth-child(2) {

float: right;

}

.face .mouse {

width: 20px;

height: 1px;

position: absolute;

left: 50%;

bottom: 0;

transform: translateX(-50%);

background: #000;

}

.face .smile::before,

.face .smile::after {

content: '';

width: 1px;

height: 5px;

position: absolute;

bottom: 0;

background: #000;

}

.face .smile::after {

right: 0;

}

#face1 {

margin-left: 0;

}

#face1-eyes::before {

top: 50%;

right: 0;

transform: translateY(-50%);

background: #000;

}

#face1-eyes:nth-child(2)::before {

left: 0;

}

#face2-eyes::before {

top: 100%;

right: 0;

transform: translateY(-100%);

background: #000;

}

#face2-eyes:nth-child(2)::before {

left: 0;

}

#face3-eyes::before {

top: 50%;

right: 0;

transform: translateY(-50%);

background: #000;

}

#face3-eyes:nth-child(2)::before {

left: 0;

}

#face4-eyes::before {

top: 100%;

left: 0;

transform: translateY(-100%);

background: #000;

}

#face5-eyes::before {

top: 100%;

left: 0;

transform: translateY(-100%);

background: #000;

}

#face5-eyes:nth-child(2)::before {

left: auto;

right: 0;

}

#face6-eyes::before {

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

border: 1px solid #000;

}

#face6-mouse {

height: 5px;

background: transparent;

border: 1px solid #000;

}