skong
/
html_css_demo
mirror of https://gitee.com/wyanhui02/html_css_demo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增第250个小实例：叠方块loading加载动画

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2024-06-09 18:01:32 +08:00
parent 2ffb711355
commit a5b477f66f
3 changed files with 84 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -257,6 +257,7 @@
247. HTML5+CSS3+JS小实例：图片九宫格
248. HTML5+CSS3小实例：响应式漫画网格布局
249. HTML5+CSS3小实例：纯CSS实现奥运五环
250. HTML5+CSS3小实例：叠方块loading加载动画
#### 赞赏作者
![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)

71
code/250/250.css Normal file
View File

@ -0,0 +1,71 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
background-color: #f6f6f6;
color: #222;
font-size: 20px;
display: flex;
}
.loader{
margin: auto;
position: relative;
width: 160px;
height: 160px;
}
.loader::before,.loader::after{
content: "";
background-color: currentColor;
width: 25%;
height: 25%;
position: absolute;
top: 75%;
left: 50%;
transform-origin: 100% 100%;
animation: ani-before 2.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.loader::after{
animation-name: ani-after;
}
@keyframes ani-before {
from{
transform: rotate(0) translate(-100%, -100%) rotate(-90deg);
}
20%{
transform: rotate(0) translate(-100%, -100%) rotate(90deg);
}
40%{
transform: rotate(0) translate(-300%, -100%) rotate(90deg);
}
60%{
transform: rotate(90deg) translate(-300%, -100%) rotate(-90deg);
}
80%{
transform: rotate(90deg) translate(-100%, -100%) rotate(-90deg);
}
to{
transform: rotate(90deg) translate(-100%, 100%) rotate(90deg);
}
}
@keyframes ani-after {
from, 20%{
transform: rotate(0) scale(1, 1);
}
40%{
transform: rotate(0) scale(3, 1);
}
60%{
transform: rotate(90deg) scale(3, 1);
}
80%{
transform: rotate(90deg) scale(1, 1);
}
to{
transform: rotate(90deg) scale(1, 1) translate(0, 200%);
}
}

12
code/250/250.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>叠方块loading加载动画</title>
<link rel="stylesheet" href="250.css">
</head>
<body>
<div class="loader"></div>
</body>
</html>