From 7b50a9674608e520ee63abaff1ebbd7f7ff688de Mon Sep 17 00:00:00 2001
From: "DESKTOP-BM6RJU5\\wyanh" <644244736@qq.com>
Date: Fri, 9 Aug 2024 17:10:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=AC=AC252=E4=B8=AA?=
=?UTF-8?q?=E5=B0=8F=E5=AE=9E=E4=BE=8B=EF=BC=9A=E4=B8=89=E8=89=B2=E5=B0=8F?=
=?UTF-8?q?=E7=90=83=E6=97=8B=E8=BD=AC=E5=8F=A0=E5=8A=A0loading=E5=8A=A8?=
=?UTF-8?q?=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 1 +
code/252/252.css | 66 +++++++++++++++++++++++++++++++++++++++++++++++
code/252/252.html | 16 ++++++++++++
3 files changed, 83 insertions(+)
create mode 100644 code/252/252.css
create mode 100644 code/252/252.html
diff --git a/README.md b/README.md
index 1b37c90..78dad5d 100644
--- a/README.md
+++ b/README.md
@@ -259,6 +259,7 @@
249. HTML5+CSS3小实例：纯CSS实现奥运五环
250. HTML5+CSS3小实例：叠方块loading加载动画
251. HTML5+CSS3小实例：立方体控件的登录表单
+252. HTML5+CSS3小实例：三色小球旋转叠加loading动画
#### 赞赏作者
diff --git a/code/252/252.css b/code/252/252.css
new file mode 100644
index 0000000..72c68b3
--- /dev/null
+++ b/code/252/252.css
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/code/252/252.html b/code/252/252.html
new file mode 100644
index 0000000..c7d0f6d
--- /dev/null
+++ b/code/252/252.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+ 三色小球旋转叠加loading动画
+
+
+
+
+
+
\ No newline at end of file