创建笑脸并添加表情

Question

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

小提琴 - 演示

Should express Happy(this is there): <div id="smiley1">☻ </div>
Should express sad :<div id="smiley2">☻ </div> ?? 
Should express neutral<div id="smiley3">☻</div> ??

问题：

1. 所有这些都应该一个接一个地放置（目前重叠）
2. 如何让它表达悲伤和中性？

CSS：

#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;
}

Answer 1

这些是字体，所以你不能使用CSS改变他们的情绪，而是做这样的事情，我从头开始制作它们..

演示

在这里，我使用了

:before

和

:after

伪值来创建笑脸的眼睛，嵌套的

span

标签用于表达...我没有重构我的 CSS，但你可以砍掉通过合并

class

中的公共属性并在单个元素上调用多个类，在很大程度上实现了这一点。

.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;
}

Answer 2

正如已经指出的，你不能用 CSS 改变字体的情绪，而必须使用其他方法来创建笑脸。

如果你想制作真正富有表现力的笑脸，外星人先生的回答中提供的方法是最好的。但如果这不是强制性的，并且您可以接受与问题中的表情一样富有表现力的表情，那么您可以使用下面的代码片段。

在此方法中，我们使用：

• A

  div

  转换为圆形（使用

  border-radius

  ）作为面。您可以更改

  background-color

  来更改脸部颜色。
• 键盘字符添加到伪元素，使用 CSS 进行转换和定位以产生所需的情绪。使用的字体是 Arial，它跨平台使用非常安全。使用的字符几乎是聊天中每个笑脸常用的字符（例如

  :-)

  表示微笑，

  :-(

  表示悲伤，

  :-|

  表示冷漠/中立等）

.smiley > div {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 45px;
  margin: 22.5px;
  text-align: center;
  line-height: 45px;
  border: 2px solid #999;
  border-radius: 100%;
}

:before,
:after {
  left: 0px;
  top: -2px;
  height: 100%;
  width: 100%;
  position: absolute;
  font-weight: bolder;
  transform-origin: bottm left;
  border: 2px solid transparent;
}

.smile:after {
  content: ":-)";
  transform: rotate(90deg);
}

.sad:after {
  content: ":-(";
  transform: rotate(90deg);
}

.cry:after {
  content: "'";
  margin-left: 8px;
  margin-top: 5px;
}

.cry:before {
  content: ": (";
  transform: rotate(90deg);
}

.wink:after {
  content: ";-)";
  transform: rotate(90deg);
}

.indifferent:after {
  content: ":-\00a0";
  transform: rotate(90deg);
}

.indifferent:before{
  content: "|";
  margin-top: 10px;
  transform: rotate(90deg);
}

/* Just for presentation */

body {
  background-color: #282831;
  color: #999;
  left: 10%;
  position: absolute;
  width: 600px;
  font-family: Arial;
  font-size: 1.25em;
}

<div class="smiley">
  <div class="smile"></div>
  <div class="sad"></div>
  <div class="indifferent"></div>
  <div class="cry"></div>
  <div class="wink"></div>
</div>

我的笔里有更多这样的表情符号这里。

Answer 3

您可以检查Font Awesome - 图标。有很多图标。

Answer 4

<h1>sad face in html </h1>
    <p style="font-size:100px">&#128540;</p>
    <p>I will display &#128540;</p>
    <p>I will display &#x1F61C;</p>
    
    [sad][1]