From fc3e5f4e286232bf57231ffc3252f7b831e1438c Mon Sep 17 00:00:00 2001
From: PipTodDok <piptoddok@wb.com>
Date: Fri, 24 Mar 2023 05:50:27 +0000
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

上传代码
---
 css-眨眼睛动效.html | 165 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 165 insertions(+)
 create mode 100644 css-眨眼睛动效.html
diff --git a/css-眨眼睛动效.html b/css-眨眼睛动效.html
new file mode 100644
index 0000000..3d95d33
--- /dev/null
+++ b/css-眨眼睛动效.html
@@ -0,0 +1,165 @@
+<!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>
\ No newline at end of file
