纯CSS3绘制的符号表情动画特效

一款纯CSS3绘制的符号表情动画特效，每一种符号表情都有一个鼠标悬停的效果，可以通过修改CSS样式来调整表情的显示。

分类：css3 > transform 难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入页面的CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，用了多个div的嵌套结构和figure标签，代码如下：

<div class="container">
  <div class="wrapper">
    <div class="emoji grin">
      <figure class="face">
        <span class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </span>
        <span class="mouth teath tounge">
        </span>
      </figure>
    </div>
    <div class="emoji sad">
      <figure class="face">
        <span class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </span>
        <span class="mouth tounge">
        </span>
      </figure>
    </div>
    <div class="emoji shocked">
      <figure class="face">
        <span class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </span>
        <span class="mouth">
        </span>
      </figure>
    </div>
    <div class="emoji laugh">
      <figure class="face">
        <span class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </span>
        <span class="mouth tounge">
        </span>
      </figure>
    </div>
    <div class="emoji smile">
      <figure class="face">
        <span class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </span>
        <span class="mouth">
        </span>
      </figure>
    </div>
    <div class="emoji speechless">
      <figure class="face">
        <span class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </span>
        <span class="mouth">
        </span>
      </figure>
    </div>
    <div class="emoji love">
      <figure class="face">
        <span class="eyes">
          <span class="heart-eye">
            <span class="heart"></span>
          </span>
          <span class="heart-eye">
            <span class="heart"></span>
          </span>
        </span>
        <span class="mouth tounge">
        </span>
      </figure>
    </div>
    <div class="emoji angry">
      <figure class="face">
        <span class="eyes">
            <span class="eye"></span>
            <span class="eye"></span>
        </span>
        <span class="mouth">
        </span>
      </figure>
    </div>
  </div>
</div>