animated login form with 2 rings - tried to make it as minimal as possible
A Pen by Kevin Marville on CodePen.
Created
June 15, 2024 11:09
-
-
Save Kvnbbg/713797daaa8e0023c649c439af3e47b4 to your computer and use it in GitHub Desktop.
Animated Form - CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Discount Check</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <!--ring div starts here--> | |
| <div class="ring"> | |
| <i style="--clr:#00ff0a;"></i> | |
| <i style="--clr:#ff0057;"></i> | |
| <i style="--clr:#fffd44;"></i> | |
| <div class="discount"> | |
| <h2>Check Discount Eligibility</h2> | |
| <form onsubmit="event.preventDefault(); checkDiscount();"> | |
| <div class="inputBx"> | |
| <label for="age">Enter your age:</label> | |
| <input type="number" id="age" name="age" required><br><br> | |
| </div> | |
| <div class="inputBx"> | |
| <label for="isStudent">Are you a student?</label> | |
| <input type="checkbox" id="isStudent" name="isStudent"><br><br> | |
| </div> | |
| <div class="inputBx"> | |
| <input type="submit" value="Check Discount Eligibility"> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!--ring div ends here--> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function checkDiscount() { | |
| let age = document.getElementById("age").value; | |
| let isStudent = document.getElementById("isStudent").checked; | |
| if (age < 18 || isStudent) { | |
| alert("You are eligible for a discount!"); | |
| } else { | |
| alert("You are not eligible for a discount."); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap"); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: "Quicksand", sans-serif; | |
| } | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background: #111; | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| .ring { | |
| position: relative; | |
| width: 500px; | |
| height: 500px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .ring i { | |
| position: absolute; | |
| inset: 0; | |
| border: 2px solid #fff; | |
| transition: 0.5s; | |
| } | |
| .ring i:nth-child(1) { | |
| border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; | |
| animation: animate 6s linear infinite; | |
| } | |
| .ring i:nth-child(2) { | |
| border-radius: 41% 44% 56% 59%/38% 62% 63% 37%; | |
| animation: animate 4s linear infinite; | |
| } | |
| .ring i:nth-child(3) { | |
| border-radius: 41% 44% 56% 59%/38% 62% 63% 37%; | |
| animation: animate2 10s linear infinite; | |
| } | |
| .ring:hover i { | |
| border: 6px solid var(--clr); | |
| filter: drop-shadow(0 0 20px var(--clr)); | |
| } | |
| @keyframes animate { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes animate2 { | |
| 0% { | |
| transform: rotate(360deg); | |
| } | |
| 100% { | |
| transform: rotate(0deg); | |
| } | |
| } | |
| .discount { | |
| position: absolute; | |
| width: 300px; | |
| height: 100%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .discount h2 { | |
| font-size: 2em; | |
| color: #fff; | |
| } | |
| .discount .inputBx { | |
| position: relative; | |
| width: 100%; | |
| } | |
| .discount .inputBx label { | |
| font-size: 1.2em; | |
| color: #fff; | |
| } | |
| .discount .inputBx input[type="number"], | |
| .discount .inputBx input[type="checkbox"], | |
| .discount .inputBx input[type="submit"] { | |
| position: relative; | |
| width: 100%; | |
| padding: 12px 20px; | |
| background: transparent; | |
| border: 2px solid #fff; | |
| border-radius: 40px; | |
| font-size: 1.2em; | |
| color: #fff; | |
| box-shadow: none; | |
| outline: none; | |
| } | |
| .discount .inputBx input[type="submit"] { | |
| background: #0078ff; | |
| background: linear-gradient(45deg, #ff357a, #fff172); | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .discount .inputBx input::placeholder { | |
| color: rgba(255, 255, 255, 0.75); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment