当前位置: 首页 > news >正文

HTML+CSS+JS:花瓣登录组件

效果演示

41-花瓣登录组件.gif

实现了一个具有动态花朵背景和简洁登录框的登录页面效果。

Code

<section><img src="./img/background.jpeg" class="background"><div class="login"><h2>Sign In</h2><div class="inputBox"><input type="text" placeholder="Username"></div><div class="inputBox" id="pass"><input type="password" placeholder="Password"><i class="iconfont icon-see"></i><i class="iconfont icon-nosee"></i></div><div class="inputBox"><input type="submit" value="Login" id="btn"></div><div class="group"><a href="#">Forget Password</a><a href="#">Sign up</a></div></div><div class="flower"><img src="./img/flower.png"><img src="./img/flower.png"><img src="./img/flower.png"><img src="./img/flower.png"><img src="./img/flower.png"><img src="./img/flower.png"><img src="./img/flower.png"><img src="./img/flower.png"></div>
</section>
* {margin: 0; /* 设置所有元素的外边距为0 */padding: 0; /* 设置所有元素的内边距为0 */box-sizing: border-box; /* 设置盒模型为border-box,包括边框在内的尺寸都包含在内 */font-family: 'Poppins', sans-serif; /* 设置全局字体为Poppins和sans-serif备用字体 */
}section {position: relative; /* 设置section元素相对定位 */width: 100%; /* 设置宽度为100% */height: 100vh; /* 设置高度为视口高度 */display: flex; /* 设置为弹性布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */overflow-x: hidden; /* 水平溢出隐藏 */
}section .bg {position: absolute; /* 设置背景图片绝对定位 */top: 0; /* 顶部对齐 */left: 0; /* 左侧对齐 */width: 100%; /* 宽度100% */height: 100%; /* 高度100% */object-fit: cover; /* 图片填充整个容器 */
}/* 登录框样式 */
.login {position: relative; /* 设置登录框相对定位 */width: 500px; /* 宽度500px */min-height: 300px; /* 最小高度300px */padding: 60px; /* 内边距60px */border-radius: 20px; /* 边框圆角20px */background: rgba(255, 255, 255, 0.25); /* 背景颜色为白色透明度0.25 */backdrop-filter: blur(3px); /* 背景模糊效果 */display: flex; /* 设置为弹性布局 */flex-direction: column; /* 垂直方向排列 */gap: 20px; /* 元素之间的间距为20px */box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2); /* 设置阴影效果 */
}.login h2 {position: relative; /* 设置标题相对定位 */width: 100%; /* 宽度100% */text-align: center; /* 文本居中 */font-size: 2.5em; /* 字体大小2.5em */font-weight: 600; /* 字体粗细600 */color: #8f2c24; /* 字体颜色 */margin-bottom: 10px; /* 底部外边距10px */
}/* 输入框样式 */
.login .inputBox {position: relative; /* 设置输入框相对定位 */
}.login .inputBox input {position: relative; /* 设置输入框相对定位 */width: 100%; /* 宽度100% */padding: 15px 20px; /* 内边距 */outline: none; /* 去除默认轮廓 */font-size: 1.25em; /* 字体大小1.25em */color: #8f2c24; /* 字体颜色 */border-radius: 5px; /* 边框圆角5px */background: #fff; /* 背景颜色为白色 */border: none; /* 去除边框 */margin-bottom: 30px; /* 底部外边距30px */
}.login .inputBox ::placeholder {color: #8f2c24; /* 输入框占位符颜色 */
}.login .inputBox #btn {position: relative; /* 设置按钮相对定位 */border: none; /* 去除边框 */outline: none; /* 去除默认轮廓 */background: #8f2c24; /* 背景颜色 */color: #fff; /* 字体颜色 */cursor: pointer; /* 鼠标指针样式为手型 */font-size: 1.25em; /* 字体大小1.25em */font-weight: 500; /* 字体粗细500 */
}.login .group {display: flex; /* 设置为弹性布局 */justify-content: space-between; /* 两端对齐 */
}.login .group a {font-size: 1.25em; /* 字体大小1.25em */color: #8f2c24; /* 字体颜色 */font-weight: 500; /* 字体粗细500 */text-decoration: none; /* 去除下划线 */
}/* 花朵动画效果 */
.flower {position: absolute; /* 设置花朵绝对定位 */width: 100%; /* 宽度100% */height: 100vh; /* 高度100vh */overflow: hidden; /* 溢出隐藏 */z-index: 1; /* 设置层级 */pointer-events: none; /* 禁止鼠标事件 */
}.flower img {position: absolute; /* 设置花朵图片绝对定位 */
}/* 花朵动画关键帧 */
@keyframes animate {0% {opacity: 0;top: -10px;transform: translateX(20px) rotate(0deg);}/* 其他关键帧省略,实现花朵飘落效果 */
}/* 不同花朵的位置和动画速度 */
.flower img:nth-child(1) {left: 20%;animation: animate 20s linear infinite;
}/* 其他花朵样式设置类似 *//* 密码显示/隐藏图标样式 */
.login .inputBox i {position: absolute; /* 设置图标绝对定位 */right: 15px; /* 右侧定位 */top: 15px; /* 顶部定位 */font-size: 28px; /* 字体大小28px */color: #8f2c24; /* 图标颜色 */cursor: pointer; /* 鼠标指针样式为手型 */
}.login .inputBox .icon-see {display: block; /* 显示图标 */
}.login .inputBox .icon-nosee {display: none; /* 隐藏图标 */
}.login .inputBox.see .icon-see {display: none; /* 隐藏显示图标 */
}.login .inputBox.see .icon-nosee {display: block; /* 显示隐藏图标 */
}
const pass = document.querySelector('#pass')
const see = document.querySelector('.icon-see')
const noSee = document.querySelector('.icon-nosee')
const inp = document.querySelector('#pass input')see.addEventListener('click', function () {pass.classList.add('see')inp.type = 'text'
})noSee.addEventListener('click', function () {pass.classList.remove('see')inp.type = 'password'
})

实现思路拆分

  1. 页面整体样式设置,包括重置默认样式、设置字体、设置section样式等。
  2. 登录框的样式设置,包括背景、边框、阴影、输入框样式等。
  3. 登录框中包含一个标题(h2元素)、输入框(input元素)、登录按钮(button元素)、以及一个显示/隐藏密码的图标。
  4. 登录框中的输入框包含用户名和密码输入框,以及一个显示/隐藏密码的功能。
  5. 登录框下方有一个包含两个链接的组,用于忘记密码和注册新账号。
  6. 页面中还包含了花朵飘落的动画效果,通过keyframes实现花朵的飘落动画,每朵花的位置和动画速度略有不同。

相关文章:

HTML+CSS+JS:花瓣登录组件

效果演示 实现了一个具有动态花朵背景和简洁登录框的登录页面效果。 Code <section><img src"./img/background.jpeg" class"background"><div class"login"><h2>Sign In</h2><div class"inputBox"…...

Unity中URP下实现水体(水面反射)

文章目录 前言一、原理1、法一&#xff1a;使用立方体纹理 CubeMap&#xff0c;作为反射纹理使用2、法二&#xff1a;使用反射探针生成环境反射图&#xff0c;所谓反射的采样纹理 二、实现水面反射1、定义和申明CubeMap2、反射向量需要什么3、计算 N ⃗ \vec{N} N 4、计算 V ⃗…...

基于FastJson实现Json数据文件导入导出解析

哈喽&#xff0c;大家好&#xff0c;我是灰小猿&#xff0c;一个超会写bug的程序猿&#xff01; 今天来记录一个在项目实战中比较实用的方法&#xff0c;主要是针对一些需要存在简单数据文件导入导出的场景&#xff0c;如&#xff1a;数据文件的简单备份、软件升版前后配置导入…...

JVM内存分配与垃圾收集流程

3.8 实战&#xff1a;内存分配与回收策略 3.8.1 对象优先在Eden分配 大多数情况下&#xff0c;对象在新生代Eden区中分配。当Eden区没有足够空间进行分配时&#xff0c;虚拟机将发起一次Minor GC。 3.8.2 大对象直接进入老年代 HotSpot虚拟机提供了-XX&#xff1a;Prete…...

【python】yaml转成json

姊妹篇&#xff1a;【python】json转成成yaml yaml数据&#xff1a; address:city: 北京市postalCode: 100000street: 北京路123号 age: 30 cart: - product:name: 笔记本电脑price: 1199.99quantity: 2 - product:name: 智能手机price: 599.99quantity: 1 children: - age: …...

css5定位

css 一.定位1.概念&#xff08;定位定位模式边位移&#xff09;2.静态位移static&#xff08;不常用&#xff09;3.相对定位relative&#xff08;不脱标&#xff09;&#xff08;占位置&#xff09;4.绝对定位absolute&#xff08;脱标&#xff09;&#xff08;不占位置&#x…...

【解决】修改 UI界面渲染层级 的常见误区

开发平台&#xff1a;Unity 2021版本   问题描述 Unity 中管理 UI 上显示元素的前后层级关系大致为以下两种方式&#xff1a; 方式一&#xff1a;修改UI元素队列顺序与层级方式二&#xff1a;使用 Canvas 组件中的 Override Sort 属性配置 方式二 对应复杂的 UI 层级关系将常…...

蓝桥杯练习系统(算法训练)ALGO-995 24点

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述 24点游戏是一个非常有意思的游戏&#xff0c;很流行&#xff0c;玩法很简单&#xff1a;给你4张牌&#xff0c;每张牌上有数…...

汽车电子笔记:BootLoader升级过程疑难问题解决方式(Bootloader响应10 02 + 刷死拯救机制)

目录 1、概述 2、如何在BootLoader响应10 02 2.1、实现流程图 2.2、实现方式(代码思路) 3、刷死拯救机制(100%能救活,适配各类控制器...

高级RAG:揭秘PDF解析

原文地址&#xff1a;https://pub.towardsai.net/advanced-rag-02-unveiling-pdf-parsing-b84ae866344e 2024 年 2 月 3 日 附加内容&#xff1a;揭秘PDF解析&#xff1a;如何从科学pdf论文中提取公式 对于RAG&#xff0c;从文档中提取信息是一个不可避免的场景。确保从源头…...

Android之UI Automator框架源码分析(第九篇:UiDevice获取UiAutomation对象的过程分析)

前言 学习UiDevice对象&#xff0c;就需要看它的构造方法&#xff0c;构造方法中有UiDevice对象持有一些对象&#xff0c;每个对象都是我们分析程序的重点&#xff0c;毕竟UiDevice对象的功能&#xff0c;依赖这些组合的对象 备注&#xff1a;当前对象持有的对象&#xff0c;初…...

【C语言】指针初阶2.0版本

这篇博文我们来继续学习指针的其他内容 指针2.0 传值调用与传址调用传值调用传址调用 一维数组与指针理解数组名使用指针深入理解一维数组 二级指针指针数组二维数组与指针 传值调用与传址调用 在开始之前&#xff0c;我们需要先了解这个概念&#xff0c;后面才能够正常的学习…...

小红书关键词爬虫

标题 1 统计要收集的关键词&#xff0c;制作一个文件夹2 爬取每一页的内容3 爬取标题和内容4 如果内容可以被查看&#xff0c;爬取评论内容5 将结果进行汇总&#xff0c;并且每个帖子保存为一个json文件&#xff0c;具体内容6 总结 1 统计要收集的关键词&#xff0c;制作一个文…...

网络爬虫的危害,如何有效的防止非法利用

近年来&#xff0c;不法分子利用“爬虫”软件收集公民隐私数据案件屡见不鲜。2023年8月23日&#xff0c;北京市高级人民法院召开北京法院侵犯公民个人信息犯罪案件审判情况新闻通报会&#xff0c;通报侵犯公民个人隐私信息案件审判情况&#xff0c;并发布典型案例。在这些典型案…...

2024/2/29 备战蓝桥杯 6-1 二分

目录 查找 【深基13.例1】查找 - 洛谷 数对 A-B 数对 - 洛谷 砍树 [COCI 2011/2012 #5] EKO / 砍树 - 洛谷 参考连接&#xff1a;AcWing 789. 数的范围---二分法一次搞懂 - AcWing 1.程序中不要同时出现l mid, r mdi这两条语句。 2.如过程序中出现了l mid&#xff0…...

浅析ARMv8体系结构:原子操作

文章目录 概述LL/SC机制独占内存访问指令多字节独占内存访问指令 独占监视器经典自旋锁实现 LSE机制原子内存操作指令CAS指令交换指令 相关参考 概述 在编程中&#xff0c;当多个处理器或线程访问共享数据&#xff0c;并且至少有一个正在写入时&#xff0c;操作必须是原子的&a…...

综合练习(二)

目录 列出薪金比 SMITH 或 ALLEN 多的所有员工的编号、姓名、部门名称、领导姓名、部门人数&#xff0c;以及所在部门的平均工资、最高和最低工资 补充 spool Oracle从入门到总裁:https://blog.csdn.net/weixin_67859959/article/details/135209645 列出薪金比 SMITH 或 AL…...

sql-labs第46关(order by盲注脚本)

一、环境 网上有自己找 二、解释 order by 注入我们看他的true和false来进行注入出来 二、实操 让我们用sort 看看源码 最终我们的id是放到order by后面了 如果我们直接用列去排序 ?sortusername/password username&#xff1a; password&#xff1a; 可以看到顺序是不…...

13款可以轻松上手画图软件推荐

在当今的数字世界里&#xff0c;我们有各种各样的创作工具&#xff0c;尤其是画图软件。所以问题来了&#xff1a;我们应该如何选择许多免费的绘画软件&#xff1f;为了回答这个问题&#xff0c;我们将在本文中分享10个领先的画图软件。每一个都有其独特的特点和优势&#xff0…...

vue实现商品评分效果(通过插件实现)

Vue.js 实现了一个简单的商品评分功能。用户可以通过点击星星来修改商品的评分&#xff0c;并且评分显示了相应的星星数。 废话不多说&#xff0c;直接上代码 方法一&#xff1a; <template><div><avue-form :model"formData"><avue-form-it…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

flow_controllers

关键点&#xff1a; 流控制器类型&#xff1a; 同步&#xff08;Sync&#xff09;&#xff1a;发布操作会阻塞&#xff0c;直到数据被确认发送。异步&#xff08;Async&#xff09;&#xff1a;发布操作非阻塞&#xff0c;数据发送由后台线程处理。纯同步&#xff08;PureSync…...