Form Input Wave animation | made by html css

Form Input Wave animation | make by Html css





Form Input Wave animation | made by html css


Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create form Input Wave animation. We use HTML & CSS and javascript for this Form Input Wave animation. Hope you enjoy our blog so let's start with a basic HTML structure for a form Input Wave animation.

HTML code for  Input Wave 

 <!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="UTF-8" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <link rel="stylesheet" href="style.css" />  
   <title>Form Input Wave</title>  
  </head>  
  <body>  
   <div class="container">  
    <h1>Please Login</h1>  
    <form>  
     <div class="form-control">  
      <input type="text" required>  
      <label>Email</label>  
         </div>  
     <div class="form-control">  
      <input type="password" required>  
      <label>Password</label>  
     </div>  
     <button class="btn">Login</button>  
     <p class="text">Don't have an account? <a href="#">Register</a> </p>  
    </form>  
   </div>  
   <script src="script.js"></script>  
  </body>  
 </html>  
There is all HTML code for the Form Input Wave animation. Now, you can see output without CSS, then we write CSS for our Form Input Wave animation.
output
Form Input Wave animation | made by html css

CSS for Wave animation

 @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');  
 * {  
  box-sizing: border-box;  
 }  
 body {  
  background-color: steelblue;  
  color: #fff;  
  font-family: 'Muli', sans-serif;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  height: 100vh;  
  overflow: hidden;  
  margin: 0;  
 }  
 .container {  
  background-color: rgba(0, 0, 0, 0.4);  
  padding: 20px 40px;  
  border-radius: 5px;  
 }  
 .container h1 {  
  text-align: center;  
  margin-bottom: 30px;  
 }  
 .container a {  
  text-decoration: none;  
  color: lightblue;  
 }  
 .btn {  
  cursor: pointer;  
  display: inline-block;  
  width: 100%;  
  background: lightblue;  
  padding: 15px;  
  font-family: inherit;  
  font-size: 16px;  
  border: 0;  
  border-radius: 5px;  
 }  
 .btn:focus {  
  outline: 0;  
 }  
 .btn:active {  
  transform: scale(0.98);  
 }  
 .text {  
  margin-top: 30px;  
 }  
 .form-control {  
  position: relative;  
  margin: 20px 0 40px;  
  width: 300px;  
 }  
 .form-control input {  
  background-color: transparent;  
  border: 0;  
  border-bottom: 2px #fff solid;  
  display: block;  
  width: 100%;  
  padding: 15px 0;  
  font-size: 18px;  
  color: #fff;  
 }  
 .form-control input:focus,  
 .form-control input:valid {  
  outline: 0;  
  border-bottom-color: lightblue;  
 }  
 .form-control label {  
  position: absolute;  
  top: 15px;  
  left: 0;  
  pointer-events: none;  
 }  
 .form-control label span {  
  display: inline-block;  
  font-size: 18px;  
  min-width: 5px;  
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);  
 }  
 .form-control input:focus + label span,  
 .form-control input:valid + label span {  
  color: lightblue;  
  transform: translateY(-30px);  
 }  

Javascript project ideas with complete source code 


Now we have completed our CSS section,  Here is our updated output CSS.

output
Form Input Wave animation | made by html css

Now add javascript for the letter animation!

Javascript for Input Wave animation

 const labels = document.querySelectorAll('.form-control label')  
 labels.forEach(label => {  
   label.innerHTML = label.innerText  
     .split('')  
     .map((letter, idx) => `<span style="transition-delay:${idx * 50}ms">${letter}</span>`)  
     .join('')  
 })  
Final output

Form Input Wave animation | made by html css

Check it more







Now we have completed our css section,  Here is our updated output with javascriptHope you like Form Input Wave animation, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a Form Input Wave animation using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

1 Comments

Post a Comment

Previous Post Next Post