Css3眨眼睛动画

最新推荐文章于 2023-06-07 17:05:41 发布

前端阿皓

最新推荐文章于 2023-06-07 17:05:41 发布

阅读量1k

点赞数 4

分类专栏： CSS3动画特效文章标签： css3 动画 css

本文链接：https://blog.csdn.net/tanhao8/article/details/121846260

版权

CSS3动画特效专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、预览效果🚀

在这里插入图片描述

二、全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				width: 100%;
				height: 100%;
				background-color: #000;
			}
			.box{
				background:black;
				width:100%;
				height:100%;
				display:flex;
				align-items:center;
				justify-content:center;
			}
			.e {
			  width: 20vw;
			  height: 20vw;
			  position: relative;
			  border-radius: 50%;
			  background-color: #fff;
			  animation: eye 3.5s infinite;
			}
			.e:after {
			  content: "";
			  width: 65%;
			  height: 65%;
			  position: absolute;
			  left: 50%;
			  top: 50%;
			  transform: translate3d(-50%, -50%, 0);
			  border-radius: 50%;
			  background: #000;
			  animation: eyeglobe 17.5s infinite;
			}
			.e-c {
			  width: 45vw;
			  display: flex;
			  display: -webkit-box;
			  display: -webkit-flex;
			  justify-content: space-between;
			  -webkit-justify-content: space-between;
			  -moz-justify-content: space-between;
			  position: absolute;
			  left: 50%;
			  top: 50%;
			  transform: translate3d(-50%, -50%, 0);
			  -webkit-transform: translate3d(-50%, -50%, 0);
			  -moz-transform: translate3d(-50%, -50%, 0);
			}
			@-moz-keyframes eye {
			  0%, 5%, 30%, 37%, 100% {
			    height: 20vw;
			    transform: translate3d(0, 0, 0);
			  }
			  3%, 33% {
			    height: 0;
			    transform: translate3d(0, -50%, 0);
			  }
			}
			@-webkit-keyframes eye {
			  0%, 5%, 30%, 37%, 100% {
			    height: 20vw;
			    transform: translate3d(0, 0, 0);
			  }
			  3%, 33% {
			    height: 0;
			    transform: translate3d(0, -50%, 0);
			  }
			}
			@-o-keyframes eye {
			  0%, 5%, 30%, 37%, 100% {
			    height: 20vw;
			    transform: translate3d(0, 0, 0);
			  }
			  3%, 33% {
			    height: 0;
			    transform: translate3d(0, -50%, 0);
			  }
			}
			@keyframes eye {
			  0%, 5%, 30%, 37%, 100% {
			    height: 20vw;
			    transform: translate3d(0, 0, 0);
			  }
			  3%, 33% {
			    height: 0;
			    transform: translate3d(0, -50%, 0);
			  }
			}
			@-moz-keyframes eyeglobe {
			  0%, 20% {
			    transform: translate3d(-100%, -50%, 0);
			  }
			  21%, 40%, 81%, 100% {
			    transform: translate3d(-50%, -50%, 0);
			  }
			  41%, 60% {
			    transform: translate3d(0%, -50%, 0);
			  }
			  61%, 80% {
			    transform: translate3d(-50%, 0%, 0);
			  }
			}
			@-webkit-keyframes eyeglobe {
			  0%, 20% {
			    transform: translate3d(-100%, -50%, 0);
			  }
			  21%, 40%, 81%, 100% {
			    transform: translate3d(-50%, -50%, 0);
			  }
			  41%, 60% {
			    transform: translate3d(0%, -50%, 0);
			  }
			  61%, 80% {
			    transform: translate3d(-50%, 0%, 0);
			  }
			}
			@-o-keyframes eyeglobe {
			  0%, 20% {
			    transform: translate3d(-100%, -50%, 0);
			  }
			  21%, 40%, 81%, 100% {
			    transform: translate3d(-50%, -50%, 0);
			  }
			  41%, 60% {
			    transform: translate3d(0%, -50%, 0);
			  }
			  61%, 80% {
			    transform: translate3d(-50%, 0%, 0);
			  }
			}
			@keyframes eyeglobe {
			  0%, 20% {
			    transform: translate3d(-100%, -50%, 0);
			  }
			  21%, 40%, 81%, 100% {
			    transform: translate3d(-50%, -50%, 0);
			  }
			  41%, 60% {
			    transform: translate3d(0%, -50%, 0);
			  }
			  61%, 80% {
			    transform: translate3d(-50%, 0%, 0);
			  }
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="e-c">
			  <div class="e"></div>
			  <div class="e"></div>
			</div>
		</div>
	</body>
</html>