纯css实现微笑眨眼效果-html代码-BFW代码库

纯css实现微笑眨眼效果

代码语言：html

代码描述：纯css实现微笑眨眼效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
:root {
  --main-part-color: black; /* Change this color to change the color of the face parts */
}
body{
	background-color: yellow; /* Change this color to change the color of the background */
}
.box{
	margin: auto;
	height: 500px;
	width: 500px;
	position: relative;
	display: block;
	margin-top: 5%;
}
.head{
	height: 500px;
    width: 500px;
    border-radius: 50%;
}
.lefteye{
	position: absolute;
	height: 100px;
	width: 100px;
	border: solid var(--main-part-color) 10px;
	border-color: var(--main-part-color) transparent transparent transparent;
	top: 35%;
	left: 20%;
	animation-name: lefteyewink;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
.righteye{
	position: absolute;
	height: 100px;
	width: 100px;
	border: solid var(--main-part-color) 10px;
	border-color: var(--main-part-color) transparent transparent transparent;
	top: 35%;
	left: 60%;
	animation-name: righteyewink;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
.mouth{
	position: absolute;
	height: 0px;
	width: 300px;
	border: solid var(--main-part-color) 10px;
    border-radius: 0 0 50% 50%;
	border-color: transparent transparent var(--main-part-color) transparent;
	top: 70%;
	left: 20%;
	animation-name: smile;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes lefteyewink {
	0% {
		height: 0px;
		width: 100px;
		border: solid var(--main-part-color) 10px;
	    border-color: var(--main-part-color) transparent transparent transparent;
		top: 35%;
		left: 20%;
	}
	33% {
		height: 100px;
		width: 50px;
		border: solid var(--main-part-color) 5px;
		background-color: var(--main-part-color);
		border-colo.........完整代码请登录后点击上方下载按钮下载查看