效果如上,代码在下
<!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>