Form Input Wave animation CSS – codewithrandom

by

Form Input Wave animation | HTML CSS



Welcome🎉 to Code With Random blog. In this blog, we learn how to create Form Input CSS 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 CSS Wave Animation

 <!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
 @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

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

Check it more




Now we have completed our CSS section,  Here is our updated output with javascript. Hope you like Form Input Wave animation, you can see the 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 

Share on:

0 thoughts on “Form Input Wave animation CSS – codewithrandom”

Leave a Comment