Html 创建笑脸并添加表情

在这里，我使用CSS创建了三个笑脸

小提琴-

---

这些是字体，所以你不能用CSS来改变他们的情绪，而是像这样做，我从头开始做的

在这里，我使用了

：before

和

：after

pseudo来创建笑脸的眼睛，嵌套的

span

标记用于表达式。。。我还没有重构我的CSS，但是你可以通过在一个

类中合并公共属性并在一个元素上调用多个类来在很大程度上分解它

.smiley {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

.smiley:before {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    left: 15px;
    top: 30px;
}

.smiley:after {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    right: 15px;
    top: 30px;
}

.smiley span {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border-bottom: 2px solid red;
    position: absolute;
    bottom: 10px;
    left: 25px;
}










.neutral {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

.neutral:before {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    left: 15px;
    top: 30px;
}

.neutral:after {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    right: 15px;
    top: 30px;
}

.neutral span {
    height: 50px;
    width: 50px;
    border-bottom: 2px solid red;
    position: absolute;
    bottom: 20px;
    left: 25px;
}










.sad {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

.sad:before {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    left: 15px;
    top: 30px;
}

.sad:after {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    right: 15px;
    top: 30px;
}

.sad span {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border-top: 2px solid red;
    position: absolute;
    bottom: -15px;
    left: 25px;
}

你可以查一下。有很多图标。
正如已经指出的，你不能用CSS改变字体的情绪，而必须使用其他方法来创建笑脸

如果你想创造出真正富有表现力的笑脸，Alien先生的答案中提供的方法是最好的。但是如果这不是强制性的，并且你对笑脸的表达能力和问题中的一样好，那么你可以使用下面的代码片段

在该方法中，我们使用：


一个
div
转换成一个圆（使用
边界半径
）作为面。您可以将
背景色
更改为更改面部颜色
添加到伪元素中的键盘字符，使用CSS进行转换和定位，以产生所需的情绪。使用的字体为Arial，即。所使用的字符几乎就是聊天中每个笑脸经常使用的字符（如
：-）
表示微笑，
：-（
表示悲伤，
：-|
表示冷漠/中立等）


.smiley>div{
位置：相对位置；
显示：内联块；
宽度：45px；
高度：45px；
利润率：22.5px；
文本对齐：居中；
线高：45px；
边框：2个实心#999；
边界半径：100%；
}
：之前，
：之后{
左：0px；
顶部：-2px；
身高：100%；
宽度：100%；
位置：绝对位置；
字体大小：粗体；
变换原点：bottm左；
边框：2倍实心透明；
}
.微笑：之后{
内容：“：-）”；
变换：旋转（90度）；
}
.悲伤：之后{
内容：“：-（”；
变换：旋转（90度）；
}
.哭：之后{
内容：“”；
左边距：8px；
边缘顶部：5px；
}
.哭：以前{
内容：“：（”；
变换：旋转（90度）；
}
.眨眼：之后{
内容：“；-）”；
变换：旋转（90度）；
}
.无所谓{
内容：“：-\00a0”；
变换：旋转（90度）；
}
.冷漠：以前{
内容：“|”；
边缘顶部：10px；
变换：旋转（90度）；
}
/*只是为了展示*/
身体{
背景色：#282831；
颜色：#999；
左：10%；
位置：绝对位置；
宽度：600px；
字体系列：Arial；
字号：1.25em；
}

这三个元素都在微笑。你的代码中没有中性或悲伤的元素。外星人先生：我想把这三个元素放在一行中，放在一起。哪个元素可以做到这一点？@Programming\u疯狂地使
div
内联块
像这样
div.smiley，div.neutral，div.sad{display:inline block；}
这是一个很好的解决方案。感谢您的帮助。：）图标不表示悲伤和中立的表情。我看不到所有的。我看到他们提供了很多图片。您可以在此处向他们询问有关新图标的信息：
#smiley1 {
    -webkit-border-radius:50px;
    background-color:rgba(0, 0, 0, 0);
    color: red;
    width:350px;
    position: absolute;
    text-align: center;
    font-size: 20pt;
    z-index: 9999;
}

#smiley2 {
    -webkit-border-radius:50px;
    background-color:rgba(0, 0, 0, 0);
    color: blue;
    width:350px;
    position: absolute;
    text-align: center;
    font-size: 20pt;
    z-index: 9999;
}
#smiley3 {
    -webkit-border-radius:50px;
    background-color:rgba(0, 0, 0, 0);
    color: green;
    width:350px;
    position: absolute;
    text-align: center;
    font-size: 20pt;
    z-index: 9999;
}

.smiley {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

.smiley:before {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    left: 15px;
    top: 30px;
}

.smiley:after {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    right: 15px;
    top: 30px;
}

.smiley span {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border-bottom: 2px solid red;
    position: absolute;
    bottom: 10px;
    left: 25px;
}










.neutral {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

.neutral:before {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    left: 15px;
    top: 30px;
}

.neutral:after {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    right: 15px;
    top: 30px;
}

.neutral span {
    height: 50px;
    width: 50px;
    border-bottom: 2px solid red;
    position: absolute;
    bottom: 20px;
    left: 25px;
}










.sad {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

.sad:before {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    left: 15px;
    top: 30px;
}

.sad:after {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    right: 15px;
    top: 30px;
}

.sad span {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border-top: 2px solid red;
    position: absolute;
    bottom: -15px;
    left: 25px;
}