css画一个微笑的表情

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

前言

沸点最近出了一个活动，在码上掘金平台上画画送给儿童节的小朋友。我也用css画了几个，今天画的是一个微笑的表情，这里把这个过程记录下来。

效果展示

过程

这个笑脸是分成脸型，眼睛，嘴巴，三部分组成。下面一一讲解。

脸型

这里我是使用圆形代表脸型。并且这个脸型的颜色不是纯色的。而是渐变的。从中心向外渐变的。

我们一般用的渐变，是linear-gradient，但是这个是线性渐变，从左到右，或者从上到下的线性渐变等等。

我们需要的是从内向外渐变。这里需要使用径向渐变，radial-gradient

语法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
复制代码

渐变需要使用在background-image上，用在background-color没有效果。

它默认是椭圆ellipse，我们这里设置成圆形circle。后面跟着渐变的颜色。默认是从中心向外边渐变。

代码如下：

  <div class="smile">
    <div class="left-eye"></div>
    <div class="right-eye"></div>
    <div class="mouth"></div>
  </div>
  <style>
    .smile {
      position: relative;
      width: 100px;
      height: 100px;
      background: radial-gradient(circle, #fbfa57, #ffc600);
      border-radius: 50%;
    }
  </style>
复制代码

眼睛

眼睛主要是画2个椭圆，设置圆角是50%，背景是白色，然后黑色的部分，是用伪元素画的。也是椭圆，设置50%的圆角。

    .left-eye,
    .right-eye {
      position: absolute;
      left: 20px;
      top: 20px;
      width: 20px;
      height: 25px;
      border: 1px solid #000;
      border-radius: 50%;
      background-color: #fff;
    }

    .right-eye {
      left: inherit;
      right: 20px;
    }

    .left-eye::before,
    .right-eye::before {
      position: absolute;
      bottom: 0;
      left: 4px;
      content: '';
      display: block;
      width: 12px;
      height: 15px;
      background-color: #000;
      border-radius: 50%;
    }
复制代码

嘴巴

最后就是嘴巴的部分。它是有弧度的。我们可以使用边框(border)再加圆角(border-radius)实现的。

这里只需要设置底部的边框，其它三边都设置成透明颜色即可。

    .mouth {
      position: absolute;
      left: 10px;
      bottom: 20px;
      width: 80px;
      height: 100px;
      border: 2.5px solid transparent;
      border-bottom-color: #000;
      border-radius: 50%;
      box-sizing: border-box;
    }
复制代码

快动手画起来吧

源码展示