From d18e17a68d8bc03a6cf6e2feb06d98528ed24595 Mon Sep 17 00:00:00 2001 From: wangyong <2058152148@qq.com> Date: Thu, 5 Dec 2024 20:18:44 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4loading?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/public/index.html | 133 +++++++++++++++--- frontend/public/loading/loading.css | 148 +++++++++++++++++++- frontend/public/loading/loading.html | 18 ++- frontend/public/loading/option2/loading.css | 36 ++++- 4 files changed, 312 insertions(+), 23 deletions(-) diff --git a/frontend/public/index.html b/frontend/public/index.html index fd87ff4..921c8ae 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -1,24 +1,117 @@ - - - - - - 在线考试系统 - - - - -
-
-
- -
-
+ + + + + + 在线考试系统 + + + + + + + +
+ +
+
+ + + + + +
- - +
+
+ + diff --git a/frontend/public/loading/loading.css b/frontend/public/loading/loading.css index a899eac..bcb29d2 100644 --- a/frontend/public/loading/loading.css +++ b/frontend/public/loading/loading.css @@ -1 +1,147 @@ -#preloadingAnimation{position:fixed;left:0;top:0;height:100%;width:100%;background:#ffffff;user-select:none;z-index: 9999;overflow: hidden}.lds-roller{display:inline-block;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:32px 32px;}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#13c2c2;margin:-3px 0 0 -3px;}.lds-roller div:nth-child(1){animation-delay:-0.036s;}.lds-roller div:nth-child(1):after{top:50px;left:50px;}.lds-roller div:nth-child(2){animation-delay:-0.072s;}.lds-roller div:nth-child(2):after{top:54px;left:45px;}.lds-roller div:nth-child(3){animation-delay:-0.108s;}.lds-roller div:nth-child(3):after{top:57px;left:39px;}.lds-roller div:nth-child(4){animation-delay:-0.144s;}.lds-roller div:nth-child(4):after{top:58px;left:32px;}.lds-roller div:nth-child(5){animation-delay:-0.18s;}.lds-roller div:nth-child(5):after{top:57px;left:25px;}.lds-roller div:nth-child(6){animation-delay:-0.216s;}.lds-roller div:nth-child(6):after{top:54px;left:19px;}.lds-roller div:nth-child(7){animation-delay:-0.252s;}.lds-roller div:nth-child(7):after{top:50px;left:14px;}.lds-roller div:nth-child(8){animation-delay:-0.288s;}.lds-roller div:nth-child(8):after{top:45px;left:10px;}#preloadingAnimation .load-tips{color: #13c2c2;font-size:2rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:80px;text-align:center;width:400px;height:64px;} @keyframes lds-roller{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}} \ No newline at end of file +/* 定义页面预加载动画的样式 */ +#preloadingAnimation{ + /* 设置预加载动画的定位方式和位置 */ + position:fixed; + left:0;top:0; + /* 设置预加载动画的高度和宽度 */ + height:100%; + width:100%; + /* 设置预加载动画的背景颜色 */ + background:#ffffff; + /* 禁止文本选择 */ + user-select:none; + /* 设置预加载动画的层级关系 */ + z-index: 9999; + /* 隐藏溢出的内容 */ + overflow: hidden +} + +/* 定义加载动画的样式 */ +.lds-roller{ + /* 设置加载动画的显示方式和定位方式 */ + display:inline-block; + position:relative; + /* 设置加载动画的位置 */ + left:50%; + top:50%; + /* 设置加载动画的尺寸 */ + width:64px; + height:64px; + /* 将加载动画居中显示 */ + transform:translate(-50%,-50%); +} + +/* 定义加载动画中每个部分的样式 */ +.lds-roller div{ + /* 设置加载动画的动画效果 */ + animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite; + /* 设置加载动画的变换原点 */ + transform-origin:32px 32px; +} + +/* 定义加载动画中每个部分的伪元素样式 */ +.lds-roller div:after{ + /* 设置伪元素的内容和显示方式 */ + content:" ";display:block; + /* 设置伪元素的定位方式 */ + position:absolute; + /* 设置伪元素的尺寸 */ + width:6px; + height:6px; + /* 设置伪元素的形状 */ + border-radius:50%; + /* 设置伪元素的背景颜色 */ + background:#13c2c2; + /* 设置伪元素的位置 */ + margin:-3px 0 0 -3px; +} + +/* 定义加载动画中每个部分的动画延迟时间 */ +.lds-roller div:nth-child(1){ + animation-delay:-0.036s; +} +.lds-roller div:nth-child(2){ + animation-delay:-0.072s; +} +.lds-roller div:nth-child(3){ + animation-delay:-0.108s; +} +.lds-roller div:nth-child(4){ + animation-delay:-0.144s; +} +.lds-roller div:nth-child(5){ + animation-delay:-0.18s; +} +.lds-roller div:nth-child(6){ + animation-delay:-0.216s; +} +.lds-roller div:nth-child(7){ + animation-delay:-0.252s; +} +.lds-roller div:nth-child(8){ + animation-delay:-0.288s; +} + +/* 定义加载动画中每个部分的伪元素的位置 */ +.lds-roller div:nth-child(1):after{ + top:50px; + left:50px; +} +.lds-roller div:nth-child(2):after{ + top:54px; + left:45px; +} +.lds-roller div:nth-child(3):after{ + top:57px; + left:39px; +} +.lds-roller div:nth-child(4):after{ + top:58px; + left:32px; +} +.lds-roller div:nth-child(5):after{ + top:57px; + left:25px; +} +.lds-roller div:nth-child(6):after{ + top:54px; + left:19px; +} +.lds-roller div:nth-child(7):after{ + top:50px; + left:14px; +} +.lds-roller div:nth-child(8):after{ + top:45px;left:10px; +} + +/* 定义预加载动画中的加载提示样式 */ +#preloadingAnimation .load-tips{ + /* 设置加载提示的颜色和字体大小 */ + color: #13c2c2;font-size:2rem; + /* 设置加载提示的定位方式 */ + position:absolute; + /* 设置加载提示的位置 */ + left:50%; + top:50%; + /* 将加载提示居中显示 */ + transform:translate(-50%,-50%); + /* 设置加载提示的外边距 */ + margin-top:80px; + /* 设置加载提示的文本对齐方式 */ + text-align:center; + /* 设置加载提示的宽度和高度 */ + width:400px; + height:64px; +} + +/* 定义加载动画的动画关键帧 */ +@keyframes lds-roller{ + /* 设置动画开始时的旋转角度 */ + 0%{transform:rotate(0deg); + } + /* 设置动画结束时的旋转角度 */ + 100%{ + transform:rotate(360deg); + } +} diff --git a/frontend/public/loading/loading.html b/frontend/public/loading/loading.html index 9b93196..43321c6 100644 --- a/frontend/public/loading/loading.html +++ b/frontend/public/loading/loading.html @@ -1 +1,17 @@ -
Loading
\ No newline at end of file + +
+ +
+ +
+
+
+
+
+
+
+
+
+ +
Loading
+
diff --git a/frontend/public/loading/option2/loading.css b/frontend/public/loading/option2/loading.css index c35cd73..cd146b7 100644 --- a/frontend/public/loading/option2/loading.css +++ b/frontend/public/loading/option2/loading.css @@ -1 +1,35 @@ -.preloading-animate{background:#ffffff;width:100%;height:100%;position:fixed;left:0;top:0;z-index:299;}.preloading-animate .preloading-wrapper{position:absolute;width:5rem;height:5rem;left:50%;top:50%;transform:translate(-50%,-50%);}.preloading-animate .preloading-wrapper .preloading-balls{font-size:5rem;} \ No newline at end of file +/* 定义预加载动画的样式 */ +.preloading-animate{ + /* 设置背景颜色为白色 */ + background:#ffffff; + /* 设置宽度和高度为100%，以覆盖整个视口 */ + width:100%; + height:100%; + /* 使用固定定位，以便页面滚动时保持位置不变 */ + position:fixed; + /* 设置左边和顶部位置为0，从屏幕左上角开始 */ + left:0; + top:0; + /* 设置z-index以确保预加载动画在大多数元素之上显示 */ + z-index:299; +} + +/* 定义预加载动画内部包装器的样式 */ +.preloading-animate .preloading-wrapper{ + /* 设置为绝对定位，以便相对于预加载动画元素定位 */ + position:absolute; + /* 设置宽度和高度为5rem，用于控制动画的大小 */ + width:5rem; + height:5rem; + /* 使用左50%和顶50%定位，然后通过变换将其中心点对齐到屏幕中心 */ + left:50%; + top:50%; + /* 使用translate变换将元素向左和向上移动自身宽度和高度的一半，实现居中 */ + transform:translate(-50%,-50%); +} + +/* 定义预加载动画内部小球的样式 */ +.preloading-animate .preloading-wrapper .preloading-balls{ + /* 设置字体大小为5rem，可能用于控制动画小球的大小 */ + font-size:5rem; +}