console
<html>
<head>
<title>用纯css3写一个大大的滑稽</title>
</head>
<body>
<div class="box">
<div class="comical">
<div class="mouth"></div>
<div class="eye eye_l">
<div class="e1"></div>
<div class="e2"></div>
<div class="e3"></div>
<div class="e4"></div>
<div class="e5"></div>
<div class="e6"></div>
</div>
<div class="eye eye_r">
<div class="e1"></div>
<div class="e2"></div>
<div class="e3"></div>
<div class="e4"></div>
<div class="e5"></div>
<div class="e6"></div>
</div>
<div class="eyebrow eyebrow_l"></div>
<div class="eyebrow eyebrow_r"></div>
<div class="flush flush_l"></div>
<div class="flush flush_r"></div>
</div>
</div>
</body>
</html>
<style>
*{margin:0; padding:0;}
.box{width:200px; height:200px; animation:rotate2 2s infinite linear; margin:50px;}
.comical{width:200px; height:200px; background:#fd8; border:5px solid #ea5; border-radius:50%; box-shadow:3px 8px 20px 2px rgba(0,0,0,0.3),0 0 20px 10px rgba(238,170,85,0.7) inset, -10px -20px 20px 20px rgba(244,151,58,0.3) inset; position:relative; transform-origin:50% 100%; animation:rotate3 0.5s infinite linear;}
.mouth{width:160px; height:140px; border-bottom:6px solid #533; border-left:0px solid transparent; border-right:0px solid transparent; border-radius:50%/50%; position:absolute; bottom:25px; left:20px;}
.eye{position:absolute; top:-10px; transform:rotate(45deg);}
.eye_l{left:40px;}
.eye_r{left:160px;}
.e1{position:absolute; top:3px; left:3px; width:76px; height:76px; overflow:hidden;}
.e1::before{content:""; width:300px; height:300px; position:absolute; border:20px solid #fff; border-radius:120px;}
.e2{position:absolute; top:0; left:0; width:70px; height:70px; overflow:hidden;}
.e3{position:absolute; top:14px; left:14px; width:65px; height:65px; overflow:hidden;}
.e2::before, .e3::before{content:""; width:300px; height:300px; position:absolute; border:5px solid #fb7; border-radius:120px;}
.e4{position:absolute; top:72px; left:9px; width:24px; height:12px; overflow:hidden; transform:rotate(-160deg);}
.e5{position:absolute; top:15px; left:66px; width:24px; height:12px; overflow:hidden; transform:rotate(70deg);}
.e4::before, .e5::before{content:""; position:absolute; width:14px; height:14px; border:5px solid #fb7; border-radius:120px;}
.e6{position:absolute; top:62px; left:17px; width:15px; height:15px; background:#433; border-radius:10px;}
.eyebrow{width:40px; height:40px; border-top:7px solid #444; border-radius:30px; border-left:0px solid transparent; border-right:0px solid transparent; position:absolute; top:10px;}
.eyebrow_l{left:20px; transform:rotate(20deg);}
.eyebrow_r{left:140px; transform:rotate(-20deg);}
.flush{width:40px; height:20px; border-radius:50%/50%; box-shadow:0 10px 6px 5px rgba(255,80,150,0.3) inset; position:absolute; top:70px;}
.flush_l{left:12px;}
.flush_r{left:148px;}
@keyframes rotate1{
0%{transform:rotate(0deg);}
5%{transform:rotate(15deg);}
10%{transform:rotate(0deg);}
15%{transform:rotate(-15deg);}
20%{transform:rotate(0deg);}
25%{transform:rotate(10deg);}
30%{transform:rotate(0deg);}
35%{transform:rotate(-10deg);}
40%{transform:rotate(0deg);}
45%{transform:rotate(5deg);}
50%{transform:rotate(0deg);}
55%{transform:rotate(-5deg);}
60%{transform:rotate(0deg);}
}
@keyframes rotate2{
0%{transform:rotate(0deg);}
25%{transform:rotate(-15deg);}
50%{transform:rotate(0deg);}
75%{transform:rotate(15deg);}
100%{transform:rotate(0deg);}
}
@keyframes rotate3{
0%{transform:scaleY(1);}
50%{transform:scaleY(1.1);}
100%{transform:scaleY(1);}
}
</style>