From 5971e3f8565bcbf419fcc9ca8aabd3331cb16606 Mon Sep 17 00:00:00 2001 From: Tara Rostami <132676256+TaraRostami@users.noreply.github.com> Date: Sat, 16 Dec 2023 21:29:08 +0330 Subject: [PATCH] Better Login Animation (#1384) * Update login.html * Update login.html * Update login.html * Update login.html --- web/html/login.html | 106 +++++++++++++++++++++++++++++++------------- 1 file changed, 76 insertions(+), 30 deletions(-) diff --git a/web/html/login.html b/web/html/login.html index 62be1478..8d377381 100644 --- a/web/html/login.html +++ b/web/html/login.html @@ -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; + } + } -
-
-
+
+
+ + + + + + + + + + +