css3写个小笑脸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
.head{width: 80px;height: 80px;border-radius: 40px;border: 1px solid ;position: relative;}
.eye {width: 24px;height: 20px;border-top: 1px solid;position: absolute;border-top-left-radius: 10px;border-top-right-radius:10px;}
.eye::after{width: 15px;height: 15px;border: 1px solid ;background: #000;position: absolute;content: " ";border-radius: 9px;top:5px;left:3px;}
.eye::before{width: 8px;height: 8px;background: #fff;border-radius:4px;content: '';position: absolute;z-index: 1 }
.left-eye {left: 10px;top:20px;}
.left-eye::before{left:6px;top:10px;}
.right-eye {right: 10px;top:20px;}
.right-eye::before{left:4px;top:10px;}
.mouth{width:25px;height: 8px;border-bottom:2px solid;position: absolute;bottom: 12px;left: 26px }
.head:hover .mouth{border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;}
.head:hover .eye::before{display: none;}
</style>
</head>
<body>
<div class="head">
<div class="eye left-eye"></div>
<div class="eye right-eye"></div>
<div class="noise"></div>
<div class="mouth"></div>
</div>
</body>
</html>
WEB前端学习交流群21 598399936
