Html
    Css
    Js

    
                        
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;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css 坏笑(原创)

挺简单的纯css动画眼睛、眉毛是用渐变画的

0