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

新增第110个小实例：百看不腻的旋转loading动画

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2022-02-13 16:39:23 +08:00
parent b57a1ca98d
commit a99d366753
3 changed files with 170 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -113,4 +113,5 @@
106. HTML5+CSS3小实例：2.5D立体文字效果
107. HTML5+CSS3小实例：3D导航栏
108. HTML5+CSS3+JS小实例：漂亮的导航栏动画效果
109. HTML5+CSS3小实例：灵动的文字loading加载特效
109. HTML5+CSS3小实例：灵动的文字loading加载特效
110. HTML5+CSS3小实例：百看不腻的旋转loading动画

119
code/110/110.css Normal file
View File

@ -0,0 +1,119 @@
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
height: 100vh;
/* 弹性布局 水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
}
.loader{
/* 相对定位 */
position: relative;
text-align: center;
}
.left-box{
/* 绝对定位 */
position: absolute;
top: 0;
left: 0;
/* 默认旋转0度 */
transform: rotate(0deg);
}
.right-box{
/* 绝对定位 */
position: absolute;
top: -29px;
left: -9px;
/* 默认旋转90度 */
transform: rotate(90deg);
}
.dots-top{
position: absolute;
top: -78px;
right: 196px;
transform: rotate(0deg);
}
.dots-bottom{
position: absolute;
top: 40px;
right: -216px;
transform: rotate(180deg);
}
.dot{
/* 绝对定位 */
position: absolute;
width: 240px;
height: 240px;
z-index: 5;
/* 默认旋转45度 */
transform: rotate(45deg);
/* 执行动画：动画名 时长 线性的 无限次播放 */
animation: spin 2s linear infinite;
}
/* 圆点 */
.dot::after{
content: "";
position: absolute;
width: 32px;
height: 32px;
background-color: #a08fd5;
border-radius: 50%;
}
/* 接下来为每一个圆点设置不同的层级、动画延迟时间、背景颜色、缩放 */
/* 第一个默认就好，不用改 */
/* 从第二个开始 */
.dot:nth-child(2){
z-index: 4;
animation-delay: 0.1s;
}
.dot:nth-child(2)::after{
background-color: #c0b1eb;
transform: scale(0.8);
}
.dot:nth-child(3){
z-index: 3;
animation-delay: 0.2s;
}
.dot:nth-child(3)::after{
background-color: #f5e866;
transform: scale(0.6);
}
.dot:nth-child(4){
z-index: 2;
animation-delay: 0.3s;
}
.dot:nth-child(4)::after{
background-color: #ffef3d;
transform: scale(0.4);
}
.dot:nth-child(5){
z-index: 1;
animation-delay: 0.4s;
}
.dot:nth-child(5)::after{
background-color: #ffea00;
transform: scale(0.2);
}
/* 定义动画 */
@keyframes spin {
0%{
transform: rotate(45deg);
}
5%{
transform: rotate(45deg);
animation-timing-function: ease-out;
}
70%{
transform: rotate(405deg);
animation-timing-function: ease-in;
}
100%{
transform: rotate(405deg);
}
}

49
code/110/110.html Normal file
View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>百看不腻的旋转loading动画</title>
<link rel="stylesheet" href="110.css">
</head>
<body>
<div class="loader">
<div class="left-box">
<div class="dots-top">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="dots-bottom">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="right-box">
<div class="dots-top">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="dots-bottom">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
</body>
</html>