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

今天来做一个结合登录表单实现的波浪动画效果，没错，你没听错，重点不是表单，是波浪。
先看效果：首先是平平无奇的波浪效果

然后当你点击输入框的时候：例如输入框里的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></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>

没什么特别重要的东西，主要就是页面几个重要部分的分块

然后再看css

* {box-sizing: border-box;
}body {background-color: steelblue;color: #fff;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的标题 */
.container h1{text-align: center;margin-bottom: 30px;
}/* 注册 */
.container a{text-decoration: none;color: lightblue;
}/* 表单控制 */
.form-control {position: relative;margin: 20px 0 40px;width: 300px;
}/* 登录按钮 */
.btn {cursor: pointer;display: inline-block;width: 100%;background: lightblue;padding: 15px;font-family: inherit;border: 0;border-radius: 5px;
}/* 按钮被点击的时候去掉边框线 */
.btn:focus {outline: 0;
}/* 按钮已经被点击缩小到0.98 */
.btn:active {transform: scale(0.95);
}/* 输入的内容距离底部框 */
.text {margin-top: 30px;
}/* 输入框 */
.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;
}/* valid就是如果输入框里面是合法的输入，那么会给他渲染 */
.form-control input:focus,
.form-control input:valid {/* 轮廓设置为0 */outline: 0;border-bottom-color: lightblue;
}/* Email和password移动到输入框内 */
.form-control label {position: absolute;top: 15px;left: 0;
}/*  */
.form-control label span{display: inline-block;font-size: 18px;min-width: 5px;/* 动画的弹跳效果，这里涉及到了一个cubic bezier贝塞尔曲线，css3里面的内容，大家可以去尝试一下 *//* https://www.runoob.com/cssref/func-cubic-bezier.html */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);
}

也没什么很难得东西，主要就是样式的书写，新颖一点的地方就是有一个贝塞尔曲线，这是css3里面的一个东西，用于做动画的，它就是今天用来实现单词弹跳效果的一个重要组成部分，感兴趣可以点击我注释里的网址去了解学习一下。

然后就是JavaScript部分：

const labels = document.querySelectorAll('.form-control label')labels.forEach(label=>{label.innerHTML = label.innerText// 放一个空字符串，作用是将一串字符串拆分成字符串数组.split('')// map会返回一个新数组，返回的新数组是原数组处理后的值，transition-delay是指等待多少时间后切换效果开始.map((letter, idx) => `<span style="transition-delay:${idx * 1000}ms">${letter}</span>` )// join是把数组中的所有元素转换成一个字符串.join('')
})

东西不多，做的主要就是将dom里面拿到的数据由字符串使用split转行成字符串数组，然后使用map返回一个新的原数组处理之后的数组，然后再用join将他们拼接起来。
其实功能就是让Email以及Password这两个单词的字母先一个个拆分然后再拼接，就是为了配合前面的动画效果，等价于：

<label><span style="transition-delay: 0ms">E</span><span style="transition-delay: 50ms">m</span><span style="transition-delay: 100ms">a</span><span style="transition-delay: 150ms">i</span><span style="transition-delay: 200ms">l</span>
</label>

说成这样大家大概就懂了它的意思和作了，如果有不懂的欢迎评论区留言。

今天的小demo就到此为止啦！明天继续，加油xdm，即使秋招不尽人意，也要继续努力！
戳我到项目gitee地址

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

618快到了送上自制前端小项目（html css js）
目录 ??.自定义播放器 ??.图片自动消失 .小轮播图 ??.旋转音乐盒前言:这些小项目全都是自创的. 如果需要应用,或则转发的话请与博主联系,感谢你们的理解, 1.自定义播放器在页面中放置2 ...
前端小项目（一）| 电影院座位预定（html，css，js）
前端小项目(一)| 电影院座位预定前言开始好好学习前端啦.学紫色爱心记录一波!! 初步学了html,css,js,在github上找了几个前端小项目模仿着练练手.第一个就是电影院座位预定页面,主要 ...
白天、暗夜双重模式+自作潜水俱乐部前端小项目+学习经验总结(一)
嗨,这里是X,今天带来最近写的一个前端小项目,还挺不错的,所以就在这里分享一下
前端学习（2017）vue之电商管理系统电商系统实现表单的预先认证
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
打地鼠小游戏（HTML5+CSS+JS）
打地鼠小游戏(HTML5+CSS+JS) 文章目录打地鼠小游戏(HTML5+CSS+JS) 预设有两个文件(htlm和css)加一个文件夹(放图片) 设置基本界面 (1)背景图 (2)开始按钮 (3 ...
前端案例：简易登录表单的制作，包括用户名、密码、随机验证码（代码完整，复制即用）
案例效果本案例基于 vue.js 和 Element UI 实现.随机验证码采用 DOM 操作和 canvas 绘制,可随机生成和刷新:后续程序逻辑直接填入方法即可. Element UI 下载安 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
前端资源文件（图片 css js）同步到阿里云OSS
前端资源文件(图片 css js)同步到阿里云OSS 需求: 为了实现自动化更新前端资源,前端资源已放到了阿里云OSS,实现自动上传. 思路: 1.因为使用的是php语言开发项目,自然会想到用php实 ...
傻瓜一键制作html,营销号生成器源码(纯HTML+CSS+JS)
营销号生成器源码(纯HTML+CSS+JS),最近很火的营销号生成器相信很多人都不陌生,它能帮您生成一段非常标准的小编文案,并且内容废话极多,一般用来调侃使用.本次带来营销号生成器源码资源下载,包含了 ...

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

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

最新文章

热门文章