CSS、JS之动态登录表单

于 2024-08-28 15:22:54 发布
阅读量77 收藏 5
点赞数 2
分类专栏： JavaScript CSS 文章标签： css javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangliwen1101/article/details/141641681
版权

效果演示

图片

实现了一个登录表单的背景动画效果，包括一个渐变背景、一个输入框和一个登录按钮。背景动画由多个不同大小和颜色的正方形组成，它们在页面上以不同的速度和方向移动。当用户成功登录后，标题会向上移动，表单会消失。

Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态登录表单</title>
    <link rel="stylesheet" href="./12-动态登录表单.css">
</head>

<body>
    <div class="container">
        <h1>Welcome</h1>
        <div class="form">
            <input type="text" placeholder="您的账号">
            <input type="password" placeholder="您的密码">
            <button class="btn-login">登录</button>
        </div>
    </div>
    <ul class="bg-squares">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>
<script src="./12-动态登录表单.js"></script>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to top left, #ffe29f, #ffa99f, #ff719a);
    overflow: hidden;
}

.container {
    text-align: center;
    color: #fff;
}

.container h1 {
    font-size: 40px;
    font-weight: 100;
    letter-spacing: 2px;
    margin-bottom: 15px;
    transition: 1s ease-in-out;
}

.form {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.5s;
}

.form input {
    outline: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.2);
    width: 250px;
    padding: 10px 15px;
    border-radius: 3px;
    margin: 0 auto 10px auto;
    text-align: center;
    color: #fff;
    font-size: 15px;
    transition: 0.25s;
}

.form input::placeholder {
    color: #fff;
    font-size: 14px;
    font-weight: 300;
}

.form input:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

.form input:focus {
    background-color: #fff;
    width: 300px;
    color: #ff719a;
}

.btn-login {
    outline: none;
    background-color: #fff;
    color: #ff719a;
    border: none;
    width: 250px;
    padding: 10px 15px;
    border-radius: 3px;
    font-size: 15px;
    cursor: pointer;
    transition: 0.25s;
}

.btn-login:hover {
    background-color: #f5f7f9;
}

.bg-squares {
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bg-squares li {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.15);
    position: absolute;
    bottom: -160px;
    animation: square 20s linear infinite;
}

.bg-squares li:nth-child(1) {
    left: 10%;
}

.bg-squares li:nth-child(2) {
    left: 20%;
    width: 80px;
    height: 80px;
    animation-delay: 2s;
    animation-duration: 17s;
}

.bg-squares li:nth-child(3) {
    left: 25%;
    animation-delay: 4s;
}

.bg-squares li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.25);
    animation-duration: 22s;
}

.bg-squares li:nth-child(5) {
    left: 70%;
}

.bg-squares li:nth-child(6) {
    left: 80%;
    width: 120px;
    height: 120px;
    background-color: rgba(255, 255, 255, 0.2);
    animation-delay: 3s;
}

.bg-squares li:nth-child(7) {
    left: 32%;
    width: 160px;
    height: 160px;
    animation-delay: 7s;
}

.bg-squares li:nth-child(8) {
    left: 55%;
    width: 20px;
    height: 20px;
    animation-delay: 15s;
    animation-duration: 40s;
}

.bg-squares li:nth-child(9) {
    left: 25%;
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.3);
    animation-delay: 2s;
    animation-duration: 40s;
}

.bg-squares li:nth-child(10) {
    left: 90%;
    width: 160px;
    height: 160px;
    animation-delay: 11s;
}

.container.success h1 {
    transform: translateY(75px);
}

.container.success .form {
    opacity: 0;
    visibility: hidden;
}

@keyframes square {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-120vh) rotate(600deg);
    }
}

// 使用 `document.querySelector` 方法选择类名为 'container' 的第一个元素，并将其赋值给 `container` 变量。  
// 如果在页面上没有找到匹配的元素，`container` 将为 `null`。  
const container = document.querySelector('.container');  
  
// 使用 `document.querySelector` 方法选择类名为 'btn-login' 的第一个元素（通常是一个登录按钮），  
// 并将其赋值给 `btn_login` 变量。如果在页面上没有找到匹配的元素，`btn_login` 将为 `null`。  
const btn_login = document.querySelector('.btn-login');  
  
// 为 `btn_login` 元素添加一个 'click' 事件监听器。当用户点击这个按钮时，会执行提供的函数。  
btn_login.addEventListener('click', function () {  
    // 当按钮被点击时，向 `container` 元素的类列表中添加 'success' 类。  
    // 这通常用于通过CSS来改变 `container` 的样式，以显示操作成功（例如，登录成功）。  
    container.classList.add('success');  
})

实现思路拆分

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

这段代码设置了所有元素的外边距和内边距为0，并且使用了border-box盒模型。

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to top left, #ffe29f, #ffa99f, #ff719a);
  overflow: hidden;
}

这段代码设置了body元素的高度为100vh，使其占据整个视口。使用flex布局使其内容垂直和水平居中。设置了一个渐变背景。

.container {
  text-align: center;
  color: #fff;
}

这段代码设置了一个容器，其中包含了登录表单和一个标题。设置了文本居中和白色字体颜色。

.container h1 {
  font-size: 40px;
  font-weight: 100;
  letter-spacing: 2px;
  margin-bottom: 15px;
  transition: 1s ease-in-out;
}

这段代码设置了标题的样式，包括字体大小、字体粗细、字母间距和下边距。还设置了一个过渡效果。

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.5s;
}

这段代码设置了登录表单的样式，使用flex布局使其内容垂直居中。设置了相对定位和z-index属性，使其在渐变背景之上。还设置了一个过渡效果。

.form input {
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  width: 250px;
  padding: 10px 15px;
  border-radius: 3px;
  margin: 0 auto 10px auto;
  text-align: center;
  color: #fff;
  font-size: 15px;
  transition: 0.25s;
}

这段代码设置了输入框的样式，包括边框、背景颜色、宽度、内边距、边框半径、外边距、文本居中和字体颜色。还设置了一个过渡效果。

.form input::placeholder {
  color: #fff;
  font-size: 14px;
  font-weight: 300;
}

这段代码设置了输入框的占位符文本的样式，包括字体颜色、字体大小和字体粗细。

.form input:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

这段代码设置了当鼠标悬停在输入框上时，背景颜色变为半透明白色。

.form input:focus {
  background-color: #fff;
  width: 300px;
  color: #ff719a;
}

这段代码设置了当输入框获得焦点时，背景颜色变为白色，宽度变为300px，字体颜色变为粉色。

.btn-login {
  outline: none;
  background-color: #fff;
  color: #ff719a;
  border: none;
  width: 250px;
  padding: 10px 15px;
  border-radius: 3px;
  font-size: 15px;
  cursor: pointer;
  transition: 0.25s;
}

这段代码设置了登录按钮的样式，包括背景颜色、字体颜色、边框、宽度、内边距、边框半径、字体大小、光标样式和过渡效果。

.btn-login:hover {
  background-color: #f5f7f9;
}

这段代码设置了当鼠标悬停在登录按钮上时，背景颜色变为浅灰色。

.bg-squares {
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

这段代码设置了一个无序列表，其中包含了多个正方形。设置了绝对定位、宽度和高度为100%，使其占据整个视口。设置了z-index属性，使其在登录表单之下。

.bg-squares li {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  position: absolute;
  bottom: -160px;
  animation: square 20s linear infinite;
}

这段代码设置了正方形的样式，包括宽度、高度、背景颜色、绝对定位和动画效果。动画效果由square关键帧动画实现。

.bg-squares li:nth-child(1) {
  left: 10%;
}
.bg-squares li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  animation-delay: 2s;
  animation-duration: 17s;
}
.bg-squares li:nth-child(3) {
  left: 25%;
  animation-delay: 4s;
}
.bg-squares li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.25);
  animation-duration: 22s;
}
.bg-squares li:nth-child(5) {
  left: 70%;
}
.bg-squares li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  background-color: rgba(255, 255, 255, 0.2);
  animation-delay: 3s;
}
.bg-squares li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  animation-delay: 7s;
}
.bg-squares li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  animation-delay: 15s;
  animation-duration: 40s;
}
.bg-squares li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.3);
  animation-delay: 2s;
  animation-duration: 40s;
}
.bg-squares li:nth-child(10) {
  left: 90%;
  width: 160px;
  height: 160px;
  animation-delay: 11s;
}

这段代码设置了每个正方形的位置、大小、背景颜色、动画延迟和持续时间。

.container.success h1 {
  transform: translateY(75px);
}
.container.success .form {
  opacity: 0;
  visibility: hidden;
}

这段代码设置了当用户成功登录后，标题向上移动，登录表单消失的效果。

 

码农园区
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【HTML/CSS】简单登录注册表单制作
m0_49442965的博客
11-09 3958
Microsoft Edge这个浏览器就不显示（支持）background-size包含在background这个复合属性里面。上述这种写法是对的，我的HTML书本上还包含有background-size属性，我建议这个单独写，至于正则表达式，我还是喜欢在JS里面单独判定给出提示。
CSS3动态背景登录表单特效代码 带登录成功欢迎切换提示特效.zip
07-05
在本文中，我们将深入探讨如何使用CSS3来创建动态背景的登录表单特效，并结合JavaScript实现登录成功后的欢迎切换提示。这些技术对于提升网站用户体验至关重要，尤其在网页交互设计方面。 首先，CSS3（Cascading ...
炫酷CSS3动画登录表单js特效
ICode联盟
10-19 227
炫酷CSS3动画登录表单特效，基于CSS3属性实现的创意表单样式，动画效果登录注册表单样式代码。
使用 HTML 和 CSS 的玻璃态登录表单(含免费完整源码)
努力是为了站在万人之中，成为别人的光
09-17 1万+
直接跳到末尾 获取完整源码 在本文中，我将带着大家展示如何使用 HTML 和 CSS 代码创建 玻璃态登录表单。你可以将任何简单的设计转换为玻璃态设计。为此，只需要更改一点代码。首先使用 background-color semi-transparent 比如 rgba (255,255,255,0.13)。其次，我们需要使用backdrop-filter: blur (10px)来模糊背景。最后需要使用边框来增强其美感。 ❤️使用 HTML 和 CSS 的玻璃态登录表单❤️???? 在线演示地址??
简约风的html+css+js登录表单页面
calm_programmer的博客
10-18 664
从上面可以看出，页面采用的一个动态的登录背景，由动画属性完成。 输入框主要以背景色、长度的改变来达成交互效果。 以下是input对应的css样式，主要利用hover和foucs状态来改变input属性，来完成以上效果，大家可以参考学习一下： form input { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; ...
HTML+CSS+JS 实现登录注册界面
热门推荐
qq_43573663的博客
08-08 6万+
文章目录案例一 滑动样式 案例一 滑动样式 login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> <link rel="stylesheet" href="default.css"> </head> <body> <div class="
js+css3登录表单动画特效
04-06
这个登录表单结合了JavaScript（js）和CSS3的强大功能，以创建出一款既简洁又具有视觉吸引力的界面，同时具备了邮箱和密码验证的功能。 首先，让我们详细了解一下JavaScript（js）在这个过程中的作用。JavaScript是...
css3实现3D登录表单 css3实现3D登录表单网页特效.zip
11-17
本主题聚焦于"CSS3实现3D登录表单"，这是一种利用CSS3的3D变换特性来创建具有立体感的登录界面的方法。通过这个项目，我们可以学习到如何运用CSS3的技巧来提升用户体验，让登录表单不仅功能完备，而且视觉效果出众。...
CSS3动态背景的登录表单html模板_表单网页模板上传文件
12-04
"js"文件则可能包含JavaScript代码，用于处理表单验证、交互效果或其他动态功能。 总结来说，这个资源提供了一个使用CSS3动态背景和HTML5构建的登录表单模板，适用于开发者快速创建现代、交互性强的登录页面。通过...
CSS 实现 两栏布局、三栏布局，以及常见的水平居中的方法
最新发布
Eliaukoyx
08-27 695
前端开发中使用 CSS 完成常见的页面布局，两栏布局、三栏布局，常见的水平居中的方法
CSS文本样式（一）
qq_72013756的博客
08-21 1385
从零开始学前端
CSS 的文字平滑属性font-smooth
读心悦
08-23 386
此外，还有一些其他的方法可以间接地改善文字的平滑度和可读性，比如选择合适的字体、调整字体大小、使用字体加载策略（如Font Loading API）来优化字体文件的加载和渲染等。这样的属性，但可以通过一些间接的方法和属性来控制文字的平滑度和可读性。在实际应用中，应该根据具体需求和目标受众来选择合适的方法，并考虑到跨浏览器兼容性和性能优化的问题。是一个非标准的属性，它的支持可能因浏览器而异，并且在未来的浏览器版本中可能会被弃用或更改。属性，这是一个非标准的CSS属性，用于控制字体渲染的平滑度。
【CSS】border-image 样式不生效 - 和谷歌浏览器版本有关系 - 谷歌 80 版本边框图片样式失效问题
工作中遇到问题记录
08-27 131
【CSS】border-image 样式不生效 - 和谷歌浏览器版本有关系 - 谷歌 80 版本边框图片样式失效问题；谷歌浏览器 80 版本 border-image 样式失效问题解决
原神4.8版本抽到角色和重点培养数据表
lulei5153的博客
08-20 785
【代码】原神4.8版本抽到角色和重点培养数据表。
CSS 样式穿透
XYX8958的博客
08-23 419
一般情况下，是在项目中引入了第三方的 UI 库（例如：ElementUI）时，我们需要通过“样式穿透”来更改样式。
CSS学习【margin为负值】
zheshiyangyang的博客
08-24 998
不全是正值，则两者相加，得到的结果为最终移动距离。都为负值，则取绝对值最大的那个。全部为正值，取最大值。
【前端基础篇】CSS基础速通万字介绍（上篇）
Trouvaille ~的博客
08-22 1140
CSS(Cascading Style Sheet)，层叠样式表, ⽤于控制⻚⾯的样式.CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和结构分离.CSS 可以理解为"东⽅四⼤邪术" 之化妆术.对⻚⾯的展⽰进⾏"化妆"内部样式会出现⼤量的代码冗余, 不⽅便后期的维护，所以不常⽤.
css实现左右固定中间自适应三栏布局
liu62615的博客
08-24 338
在三栏布局中，如果使用固定定位，左右两栏会一直固定在视口的两侧，不会随着中间内容的滚动而调整位置，这可能会导致在页面较长时，左右栏与中间内容的关联性变得很弱，视觉上也可能会显得不协调。），然后将左右两栏设置为绝对定位，就可以使左右两栏相对于容器进行定位。在三栏布局中，中间自适应的部分可以根据内容的多少自动调整宽度，而左右两栏通过绝对定位可以固定在容器的两侧，不会受到中间内容宽度变化的影响。用绝对定位将左右两栏固定在两侧，中间栏通过设置左右边距来让出左右两栏的空间，实现自适应。
jQuery基础——DOM基础
m0_54066656的博客
08-27 506
JQ基础——DOM操作
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值