body {
background-color:#12172a;
}
.head {
margin:100px auto 0;
width:400px;
height:400px;
background-image:radial-gradient(#f7e4aa 150px,#e6ba63);
border-radius:50%;
position:relative;
}
.leftmei,.rightmei {
height:150px;
width:80px;
position:absolute;
top:0;
border-radius:40px/75px;
/*transform:rotateZ(0deg);
*/
animation:mei 0.2s infinite alternate;
-webkit-animation:mei 0.2s infinite alternate;
}
.leftmei {
background-image:radial-gradient(50px 75px at 35px 90px,transparent 99%,#000 60%);
left:50px;
-webkit-transform:rotateZ(-10deg);
transform:rotateZ(-10deg);
}
.rightmei {
background-image:radial-gradient(50px 75px at 45px 90px,transparent 99%,#000 60%);
right:50px;
transform:rotateZ(10deg);
-webkit-transform:rotateZ(10deg);
}
.lefteye,.righteye {
width:150px;
height:50px;
border-color:#000;
border-top-style:solid;
/*border-bottom-style:solid;
*/
/* border-bottom-style:hidden;
*/ position:absolute;
top:80px;
background-image:radial-gradient(75px 20px at bottom center,transparent 99%,#000 99%,#fff 60%);
border-radius:75px/25px;
box-shadow:5px 48px 10px -10px pink;
}
.righteye {
right:0;
}
.lefteye .eyeball,.righteye .eyeball {
width:25px;
height:25px;
background-color:#000000;
border-radius:50%;
margin:10px;
animation:ball 3s;
-webkit-animation:ball 3s ease-out infinite;
}
.mouth {
width:300px;
height:150px;
margin:200px 50px;
/*background:#000;
*/
position:absolute;
overflow:hidden;
}
.mouth::before {
content:"";
width:300px;
height:300px;
background-color:#865a1b;
border-radius:50%;
position:absolute;
top:-150px;
}
.mouth::after {
content:"";
width:300px;
height:300px;
background-color:#f7e4aa;
position:absolute;
top:-160px;
border-radius:50%;
}
@-webkit-keyframes mei {
100% {
top:-10px;
-webkit-transform:rotateZ(0deg);
}
}@keyframes mei {
100% {
top:-10px;
transform:rotateZ(0deg);
}
}@keyframes ball {
0% {
margin:10px;
}
70% {
margin:10px 125px 0;
}
100% {
margin:10px;
}
}@-webkit-keyframes ball {
70% {
margin:10px 125px 0;
}
100% {
margin:10px;
}
}挺简单的纯css动画眼睛、眉毛是用渐变画的