上传代码 

上传代码
This commit is contained in:
PipTodDok 2023-03-24 05:50:27 +00:00
parent 814b5a2748
commit fc3e5f4e28
1 changed files with 165 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
css-眨眼睛动效.html Normal file
View File

@ -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>