Question

在这里，我使用CSS创建了三个表情符号。

小提琴 - Demo

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

的问题：

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

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改变他们的心情，而是做这样的事情，我从头开始制作它们。

Demo

在这里，我使用: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改变字体的情绪，而是必须使用其他方法来创建表情符号。

Alien先生的回答中提供的方法是最好的，如果你想创造真正富有表现力的表情。但是，如果这不是强制性的，你可以使用表情符号作为问题中的表情，那么你可以使用下面的代码片段。

在这种方法中，我们使用：

将div转换为圆圈（使用border-radius）作为面孔。您可以将background-color更改为更改面部颜色。
将键盘字符添加到伪元素中，使用CSS进行转换和定位以产生所需的情绪。使用的字体是Arial，very safe to use across platforms。使用的字符几乎是聊天中每个笑脸经常使用的字符（例如:-)表示微笑，:-(表示悲伤，:-|表示无关紧要/中立等。

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

我的笔here中有更多这样的表情。

Answer 3

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

创建笑脸并添加表达

3 个答案: