console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表情图片</title>
<style type="text/css">
.lian{
width: 200px;
height: 200px;
border-radius: 50%;
background:#fcd671;
margin: 100px auto;
position: relative;
}
.m{
width:30px;
height: 30px;
border-radius:50%;
background:#fcd671;
border-top: 4px solid #000;
}
.m1{
position: absolute;
left:20%;
top:14%;
transform: rotate(20deg);
}
.m2{
position: absolute;
left:65%;
top:14%;
transform: rotate(-20deg);
}
.y{
width:70px;
height: 20px;
background: #fff;
border-radius: 50%;
}
.y1{
position: absolute;
left:10%;
top:30%;
}
.y2{
position: absolute;
left:55%;
top:30%;
}
span{
display:block;
width: 12px;
height: 12px;
background: #000;
border-radius: 50%;
transform: translate(3px,4px);
}
.z{
width: 114px;
height: 100px;
border-radius: 50%;
border-bottom: 3px solid #000;
position: absolute;
left:22%;
top:28%;
}
@keyframes yanzhu
{
from{transform: translate(3px,4px)scale(1);}
10%{transform: translate(24px,4px)scale(1);}
30%{
transform: translate(24px,4px)scale(3);
opacity:0;
}
31%{
transform: translate(24px,4px)scale(3);
opacity: 1;
background: url(./1.gif)center center no-repeat;
background-size: 11px 9px;
}
69%{
transform: translate(24px,4px)scale(3);
opacity: 1;
background: url(./1.gif)center center no-repeat;
background-size: 11px 9px;
}
70%{
transform: translate(24px,4px)scale(3);
opacity: 0;
}
80%{
transform: translate(52px,4px)scale(1);}
to{transform: translate(52px,4px)scale(1);}
}
</style>
</head>
<body>
<div class="lian">
<p class="m1 m"></p>
<p class="m2 m"></p>
<p class="y1 y">
<span></span>
</p>
<p class="y2 y">
<span></span>
</p>
<p class="z"></p>
</div>
</body>
</html>