Rotating Border Login Page
https://youtube.com/shorts/Olh0kSqkQ6Q?si=lOnTcMx8oHNDGVqE
HTML Code:
<body> <div class="container"> <span></span> <span></span> <span></span> <div class="form"> <h2>LOG IN</h2> <form> <div> <input type="text" name="" placeholder="User Name"> </div> <div> <input type="password" name="" placeholder="Password"> </div> <div class="formbtn"> <button>REGISTER</button> </div> </form> </div> </div> </body> </html> |
CSS Code:
body{ margin: 0px; padding: 0px; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(112.1deg, rgb(32, 38, 57) 11.4%, rgb(63, 76, 119) 70.2%); } .container{ position: relative; width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; } .container span{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; border: 2px solid white; animation: animate 6s linear infinite; } @keyframes animate{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } .container span:nth-child(1){ border-radius: 46% 54% 69% 31% / 29% 30% 70% 71% ; } .container:hover span:nth-child(1){ box-shadow: inset 0 0 5px lightpink, 0 0 10px lightpink; } .container span:nth-child(2){ animation-direction: reverse; border-radius: 58% 42% 37% 63% / 56% 30% 70% 44% ; } .container:hover span:nth-child(2){ box-shadow: inset 0 0 5px cyan, 0 0 10px cyan; } .container span:nth-child(3){ animation-duration:3s; border-radius: 34% 66% 75% 25% / 56% 64% 36% 44% ; } .container:hover span:nth-child(3){ box-shadow: inset 0 0 5px lightgreen, 0 0 10px lightgreen; } .container .form{ text-align: center; z-index: 100; color: white; } .container .form input{ margin-bottom: 15px; background-color: transparent; color: white; border-radius: 20px; padding: 5px; } .formbtn button{ border: none; padding: 7px; width: 100px; border-radius: 20px; background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 51%, #ffecd2 100%); } |