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

新增第252个小实例：三色小球旋转叠加loading动画

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2024-08-09 17:10:43 +08:00
parent 63d19f05ab
commit 7b50a96746
3 changed files with 83 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -259,6 +259,7 @@
249. HTML5+CSS3小实例：纯CSS实现奥运五环
250. HTML5+CSS3小实例：叠方块loading加载动画
251. HTML5+CSS3小实例：立方体控件的登录表单
252. 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)

66
code/252/252.css Normal file
View File

@ -0,0 +1,66 @@
/* 采用弹性布局确保加载动画居中显示 */
body{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: #222;
}
/* 定义加载动画容器，相对定位 */
.loader{
width: 130px;
height: 130px;
position: relative;
/* 应用旋转动画，动画时长2.5秒，延迟0.5秒开始，无限循环 */
animation: spin 2.5s ease-in-out 0.5s forwards infinite;
}
/* 定义小球，绝对定位，设置为中心对齐 */
.circle{
width: 50px;
height: 50px;
border-radius: 50px;
position: absolute;
top: 50%;
transform: translateY(-50%);
/* 混合模式设为颜色叠加 */
mix-blend-mode: plus-lighter;
}
/* 设置橙色小球的位置和背景颜色 */
.circle.orange{
background-color: #f58004;
left: 0;
}
/* 设置绿色小球的位置和背景颜色 */
.circle.green{
background-color: #4be053;
left: 50%;
transform: translate(-50%,-50%);
}
/* 设置蓝色小球的位置和背景颜色 */
.circle.blue{
background-color: #44bcf4;
right: 0;
}
/* 定义旋转动画，通过改变宽度和旋转角度实现加载效果 */
@keyframes spin {
0%{
width: 130px;
}
25%{
width: 130px;
transform: rotate(0deg);
}
50%{
width: 50px;
transform: rotate(360deg);
}
75%{
width: 50px;
transform: rotate(0deg);
}
100%{
width: 130px;
}
}

16
code/252/252.html Normal file
View File

@ -0,0 +1,16 @@
<!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="252.css">
</head>
<body>
<div class="loader">
<div class="circle orange"></div>
<div class="circle green"></div>
<div class="circle blue"></div>
</div>
</body>
</html>