50天50个前端小项目（纯html+css+js）第八天（形成波浪动画结合登录表单）

mzldustu

已于 2022-10-19 23:51:27 修改

阅读量2.7k

点赞数 2

分类专栏： 50Day50前端基础小项目(纯三件套) 文章标签： css html 前端 javascript

于 2022-10-19 23:32:08 首次发布

本文链接：https://blog.csdn.net/qq_45628733/article/details/127418108

版权

今天来做一个结合登录表单实现的波浪动画效果，没错，你没听错，重点不是表单，是波浪。
先看效果：首先是平平无奇的波浪效果
在这里插入图片描述
然后当你点击输入框的时候：例如输入框里的Email和Password是会一个单词一个单词弹上去的。

接下来看代码实现：首先是html

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