创建笑脸并添加表情

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

问题：

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 改变它们的情绪，而是像这样做，我从头开始制作它们..

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 改变字体的情绪，而是必须使用其他方法来创建笑脸。

如果您想创建真正富有表现力的笑脸，那么外星人的答案中提供的方法是最好的。但是，如果这不是强制性的，并且您可以使用与问题中的表情一样富有表现力的笑脸，那么您可以使用下面的 sn-p。

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

• 将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。有很多图标。