由 code 
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
style.css
body{
margin: 0;
padding: 0;
background: #344;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 60px;
height: 60px;
}
.box{
position: absolute;
width: 30px;
height: 30px;
background: #e74c3c;
}
.box:nth-child(1){
animation: a1 2s infinite linear;
}
.box:nth-child(2){
animation: a2 2s infinite linear;
}
@keyframes a1 {
0%{
top: 0;
left: 0;
width: 30px;
height: 30px;
}
12.5%{
top: 0;
left: 0;
width: 60px;
height: 30px;
}
25%{
top: 0;
left: 0;
width: 60px;
height: 30px;
}
37.5%{
top: 0;
left: 30px;
width: 30px;
height: 30px;
}
50%{
top: 0;
left: 30px;
width: 30px;
height: 30px;
}
62.5%{
top: 0;
left: 30px;
width: 30px;
height: 60px;
}
75%{
top: 0;
left: 30px;
width: 30px;
height: 60px;
}
87.5%{
top: 30px;
left: 30px;
width: 30px;
height: 30px;
}
100%{
top: 30px;
left: 30px;
width: 30px;
height: 30px;
}
}
@keyframes a2 {
0%{
right: 0;
bottom: 0;
width: 30px;
height: 30px;
}
12.5%{
right: 0;
bottom: 0;
width: 30px;
height: 30px;
}
25%{
right: 0;
bottom: 0;
width: 60px;
height: 30px;
}
37.5%{
right: 0;
bottom: 0;
width: 60px;
height: 30px;
}
50%{
right: 30px;
bottom: 0;
width: 30px;
height: 30px;
}
62.5%{
right: 30px;
bottom: 0;
width: 30px;
height: 30px;
}
75%{
right: 30px;
bottom: 0;
width: 30px;
height: 60px;
}
87.5%{
right: 30px;
bottom: 0;
width: 30px;
height: 60px;
}
100%{
right: 30px;
bottom: 30px;
width: 30px;
height: 30px;
}
}
获取源码: Loading 1
下载数:45人次, 文件大小: 94 B, 上传日期: 2020年-11 月-25日
公众号回复:gcode 获取解压密码
1,642 人查阅
