test/HuLa
1
0
Fork 0
mirror of https://gitee.com/HuLaSpark/HuLa.git synced 2024-11-29 18:28:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🌻 update(custom): 更新登录界面样式

Browse Source
This commit is contained in:
nongyehong 2024-03-07 17:54:14 +08:00
parent e8dc44134d
commit 2394aa27b8
1 changed files with 75 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/styles/scss/global/login-bg.scss
View File

@ -1,17 +1,83 @@
/*! 可以根据自己的喜好搭配渐变，网址：https://webgradients.com/ */
.login-box {
background: linear-gradient(-65deg, rgba(24, 159, 87, 0.8), #cbe2d6, #d8eee2, rgba(24, 159, 87, 0.8));
animation: gradient 12s ease infinite;
background-size: 400% 400%;
background-color: rgb(216, 238, 226);
background-image:
radial-gradient(closest-side, #30cfd0, rgba(235, 105, 78, 0)),
radial-gradient(closest-side, rgb(82, 174, 163), rgba(243, 11, 164, 0)),
radial-gradient(closest-side, #fff1eb, rgba(254, 234, 131, 0)),
radial-gradient(closest-side, #fed6e3, rgba(170, 142, 245, 0)),
radial-gradient(closest-side, #a8edea, rgba(248, 192, 147, 0));
background-size:
130vmax 130vmax,
80vmax 80vmax,
90vmax 90vmax,
110vmax 110vmax,
90vmax 90vmax;
background-position:
-80vmax -80vmax,
60vmax -30vmax,
10vmax 10vmax,
-30vmax -10vmax,
50vmax 50vmax;
background-repeat: no-repeat;
animation: 8s movement linear infinite;
}
@keyframes gradient {
0% {
background-position: 0 50%;
@keyframes movement {
0%, 100% {
background-size:
130vmax 130vmax,
80vmax 80vmax,
90vmax 90vmax,
110vmax 110vmax,
90vmax 90vmax;
background-position:
-80vmax -80vmax,
60vmax -30vmax,
10vmax 10vmax,
-30vmax -10vmax,
50vmax 50vmax;
}
25% {
background-size:
100vmax 100vmax,
90vmax 90vmax,
100vmax 100vmax,
90vmax 90vmax,
60vmax 60vmax;
background-position:
-60vmax -90vmax,
50vmax -40vmax,
0vmax -20vmax,
-40vmax -20vmax,
40vmax 60vmax;
}
50% {
background-position: 100% 50%;
background-size:
80vmax 80vmax,
110vmax 110vmax,
80vmax 80vmax,
60vmax 60vmax,
80vmax 80vmax;
background-position:
-50vmax -70vmax,
40vmax -30vmax,
10vmax 0vmax,
20vmax 10vmax,
30vmax 70vmax;
}
100% {
background-position: 0 50%;
75% {
background-size:
90vmax 90vmax,
90vmax 90vmax,
100vmax 100vmax,
90vmax 90vmax,
70vmax 70vmax;
background-position:
-50vmax -40vmax,
50vmax -30vmax,
20vmax 0vmax,
-10vmax 10vmax,
40vmax 60vmax;
}
}