怎么用CSS画一个哭脸？

最新推荐文章于 2022-10-30 14:14:35 发布

yunraodongpo

最新推荐文章于 2022-10-30 14:14:35 发布

阅读量2.7k

点赞数

本文链接：https://blog.csdn.net/yunraodongpo/article/details/52605097

版权

效果如上，代码在下

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

yunraodongpo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
怎么用CSS画一个哭脸？

效果如上，代码在下 Document .first-div{ width: 300px; height: 300px; background: purple; position: absolute; left:50px; top:50px;
复制链接

扫一扫