test/HuLa
1
0
Fork 0
mirror of https://gitee.com/HuLaSpark/HuLa.git synced 2024-12-02 03:37:53 +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 { .login-box {
background: linear-gradient(-65deg, rgba(24, 159, 87, 0.8), #cbe2d6, #d8eee2, rgba(24, 159, 87, 0.8)); background-color: rgb(216, 238, 226);
animation: gradient 12s ease infinite; background-image:
background-size: 400% 400%; 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 { @keyframes movement {
0% { 0%, 100% {
background-position: 0 50%; 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% { 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% { 75% {
background-position: 0 50%; background-size:
90vmax 90vmax,
90vmax 90vmax,
100vmax 100vmax,
90vmax 90vmax,
70vmax 70vmax;
background-position:
-50vmax -40vmax,
50vmax -30vmax,
20vmax 0vmax,
-10vmax 10vmax,
40vmax 60vmax;
} }
} }