MHSanaei/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2025-03-01 01:20:49 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Better Login Animation (#1384)

Browse Source 
* Update login.html

* Update login.html

* Update login.html

* Update login.html
This commit is contained in:
Tara Rostami 2023-12-16 21:29:08 +03:30 committed by GitHub
parent 647b72e4fa
commit 5971e3f856
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 76 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
web/html/login.html
View File

@ -56,35 +56,12 @@
opacity: 1;
}
}
.wave {
opacity: 0.6;
position: absolute;
top: 80%;
left: 60%;
width: 6000px;
height: 6000px;
background-color: rgba(0, 135, 113, 0.08);
margin-left: -3000px;
transform-origin: 50% 50%;
pointer-events: none;
rotate: 115deg;
}
.wave2 {
opacity: 0.4;
rotate: 105deg;
}
.wave3 {
opacity: 0.2;
rotate: 62deg;
}
.under {
background-color: #dbf5ed;
}
.dark .wave {
background: rgb(10 117 87 / 20%);
background-color: #c7ebe2;
z-index: 0;
}
.dark .under {
background-color: #101828;
background-color: #0f2d32;
}
.dark #login {
background-color: #151f31;
@ -95,7 +72,6 @@
.ant-form-item {
margin-bottom: 16px;
}
.ant-btn-primary-login {
width: 100%;
}
@ -206,14 +182,84 @@
background-position-x: 0;
box-shadow: none;
}
.waves-header {
position: fixed;
width: 100%;
text-align: center;
background-color: #dbf5ed;
color: white;
z-index: -1;
}
.dark .waves-header {
background-color: #101828;
}
.waves-inner-header {
height: 50vh;
width: 100%;
margin: 0;
padding: 0;
}
.waves {
position: relative;
width: 100%;
height: 15vh;
margin-bottom: -5px; /*Fix for safari gap*/
min-height: 100px;
max-height: 150px;
}
.parallax > use {
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.dark .parallax > use {
fill: rgb(10 117 87 / 20%);
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
opacity: 0.2;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
opacity: 0.4;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
opacity: 0.6;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
}
@media (max-width: 768px) {
.waves {
height: 40px;
min-height: 40px;
}
}
</style>
<body>
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
<transition name="list" appear>
<a-layout-content class="under" style="min-height: 0;">
<div class='wave'></div>
<div class='wave wave2'></div>
<div class='wave wave3'></div>
<div class="waves-header">
<div class="waves-inner-header"></div>
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(0, 135, 113, 0.08)" />
</g>
</svg>
</div>
<a-row type="flex" justify="center" align="middle" style="height: 100%; overflow: auto;">
<a-col :xs="22" :sm="20" :md="14" :lg="10" :xl="8" :xxl="6" id="login" style="margin: 3rem 0;">
<a-row type="flex" justify="center">