怎么用CSS画一个哭脸？

来源：互联网发布：特效制作软件app 编辑：程序博客网时间：2024/06/10 05:46
效果如上，代码在下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><style>      .first-div{          width: 300px;          height: 300px;          background: purple;            position: absolute;          left:50px;          top:50px;          z-index: 1      }      .eye-left-div{          position:absolute;          left:40px;          top:40px;          width:50px;          height: 50px;          background: #eee;          z-index: 2      }      .eye-right-div{          position:absolute;          left:210px;          top:40px;          width:50px;          height: 50px;          background: #eee;          z-index: 2      }      .mouth-div{      position: absolute;      width: 48px;      height: 80px;      top: 145px;      left: 50%;      margin-left: -24px;      background: #eee;      -moz-border-radius: 30px;      /* Gecko browsers */    -webkit-border-radius: 30px;   /* Webkit browsers */    border-radius:30px;            /* W3C syntax */    z-index: 2      }      .tear-div{      position: absolute;      width: 10px;      height: 24px;      top: 100px;      left: 70%;      background: #eee;      -moz-border-radius: 10px;      /* Gecko browsers */    -webkit-border-radius: 10px;   /* Webkit browsers */    border-radius:10px;            /* W3C syntax */      z-index: 2      }  </style>  <div class="first-div">  <div class="eye-left-div"></div>  <div class="eye-right-div"></div>  <div class="mouth-div"></div>  <div class="tear-div"></div>  </div>  </body></html>
0 0