记录--基于css3写出的流光登录(注释超详细!)

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

完整效果

对基本的表单样式进行设置

这里设置了基本的表单样式,外层用了div进行包裹,重点是运用了两个i元素在后期通过css样式勾画出一条线没在聚焦文本框的时候线会过度成一个对话框,掩盖掉原本的对话框的形式,很好的一个创意

<body><!-- 搭建基本结构 --><div class="box"><span class="borderLine"></span><!-- 用form提交 --><form><h2>Sign In</h2><div class="inputBox"><!-- required表示文本框必须输入内容,否则则在提交的时候默认提示 --><input type="text" required><!-- 用一个i元素勾画出来一条线,改变其高度形成一个输入框 --><span>User name</span><i></i></div><div class="inputBox"><input type="password" required><!-- 用一个i元素勾画出来一条线,改变其高度形成一个密码框 --><span>Password</span><i></i></div><div class="links"><!-- 用两个a标签写忘记密码和注册按钮 --><a href="#">Forget password</a><a href="#">Sing up</a></div><input type="submit" value="Login"></form></div>

进行基本的样式清除和设置

这里的对整个body进行了设置,并且清除了默认样式,设置了一些默认样式,将整个body设置为弹性盒并且居中显示,运用了minhight样式 设置 min-height: 100vh; 的元素的高度将至少为浏览器窗口的高度,对最外层的box样式进行了超出部分隐藏,用于后期宣传时候超出盒子部分的隐藏掉,从而显示出来线条流动的效果,同时也对form表单进行了进一步的设置,通过zindx涉及了垂直层叠的顺序显示,且通过弹性盒子的改变主轴方向为y轴

    * {/* 清除默认样式 */margin: 0;padding: 0;font-size: 黑体;/* 设置成ie盒 */box-sizing: border-box;}body {/* 对整整体进行设置 设置为弹性盒子,并且居中 */display: flex;justify-content: center;align-items: center;/* min-height 属性设置元素的最小高度为 100vh。vh 是视口高度的单位,1vh 等于浏览器窗口的高度的 1%。这意味着,设置 min-height: 100vh; 的元素的高度将至少为浏览器窗口的高度 底色设置为黑色*/min-height: 100vh;background: #222;}.box {/* 对整个盒子进行设置 超出部分隐藏用于最后的效果,并且相对定位相对于原本的位置进行定位,以便于子元素根据父元素的位置进行定位  子决父向 */overflow: hidden;position: relative;width: 380px;height: 420px;background: #1c1c1c;border-radius: 8px;}/* 对from进行样式设置 进行绝对定位,相对于上面的box进行定位, */.box form {position: absolute;inset: 4px;/*定位元素边框或内边距的简写属性 设置所有方向的边距为4px 没啥用 */background: #222;padding: 50px 40px;border-radius: 8px;z-index: 2; /* 用于控制元素在垂直层叠顺序中的显示级别 较大的值表示元素在堆叠顺序中更靠前,即位于上层;较小的值表示元素在堆叠顺序中更靠后,即位于下层。 */display: flex;flex-direction: column;/*flex换轴 容器内的元素将在垂直方向上从上至下排列,主轴方向为垂直方向。这意味着元素将在垂直方向上按照从上到下的顺序进行布局,而不是默认的水平方向。*/}

下面对表单里面的各个组件部分进行样式设置,以及聚焦样式

这里呢对表单的各个部件进行了样式的设置,添加了聚焦时候的动画效果,值得一提的是运用了letter-spacing: 0.1em;/* 制文本中字符之间的间距为0.1em 属性应用于

、 以及 元素*/ 同时对文本框进行了定位,设置了位置其中将input标签的背景颜色隐藏了起来是为了后面更好的通过html中i元素勾画出的那条线来撑起来形成文本框做准备,同时也设计了zindex优先级的问题,对login按钮添加了动画样式

.box form h2 {color: #fff;font-weight: 500;text-align: center;/*加粗文字居中 */letter-spacing: 0.1em;/* 制文本中字符之间的间距为0.1em 属性应用于 <p>、<h> 以及 <span> 元素*/}.box form .inputBox {/* 相对于form进行定位 */position: relative;width: 300px;margin-top: 35px;}.box form .inputBox input {/* 相对于.inputBox进行定位 */position: relative;width: 100%;padding: 20px 10px 10px;background: transparent; /*input文本框隐藏起来方便用li标签的那根线撑起来形成文本框仅仅只是展示效果,实际上任然是input文本框 */outline: none;border: none;box-shadow: none; /*阴影设置*/color: #23242a;font-size: 1em;letter-spacing: 0.05em;/* 制文本中字符之间的间距为0.1em 属性应用于 <p>、<h> 以及 <span> 元素*/z-index: 10; /*优先级设置 */transition: 0.3s;}.box form .inputBox span {position: absolute;left: 0;padding: 20px 0px 10px;pointer-events: none;color: #8f8f8f;font-size: 1em;letter-spacing: 0.05em;transition: 0.5s;/*动画过渡*/}.box form .inputBox input:valid~span,/*选择器将选择所有紧跟在有效输入字段后的 <span> 元素。*/.box form .inputBox input:focus~span/*用于选中处于焦点状态的输入字段之后的所有 <span> 元素。*/ {color: #fff;font-size: 0.75em;transform: translateY(-34px);  /*向上移动34个像素*/}

设置i标签的那条白线及其效果

这里呢,通过定位设置好i元素那条线的位置,后将这条白线在聚焦文本框的时候进行高度拉伸,形成效果上变成白色的对话框,要注意,并不是白线拉高变成了对话框,而是白线拉高盖住了原本的对话框,使得视觉上形成了白线变成了对话框,实际上仍然是原来的对话框,仅仅是效果而已

    .box form .inputBox i {position: absolute;  /*相对于inputBox定位,并且在最左和最下面 */left: 0;bottom: 0;width: 100%;height: 2px;background: #fff;border-radius: 5px;overflow: hidden;transition: 0.5s;pointer-events: none;}.box form .inputBox input:valid~i,.box form .inputBox input:focus~i {height: 42px;}

设置下面的忘记密码和注册和登录的的样式

这里针对按钮的样式进行了优化,并且设计了忘记密码这些鼠标样式,

    /* 设置flex a链接的样式 */.box form .links {display: flex;justify-content: space-between;/*容器内的 flex 项目在水平方向上均匀分布,项目之间的间距相等,并且最左侧和最右侧的项目紧贴容器的边界。*/}.box form .links a {margin: 10px 0;font-size: 0.75em;color: #8f8f8f;}/* 移动上去改变颜色 */.box form .links a:hover,.box form .links a:nth-child(2) {color: #fff;}/* 按钮样式 */.box form input[type='submit'] {padding: 9px 25px;background: #fff;cursor: pointer;  /*设置鼠标样式*/font-size: 0.9em;border-radius: 5px;font-weight: 600;width: 80%;margin-top: 10px;margin-left: 30px;}/* 登录按钮点击时透明度为80% */.box form input[type='submit']:active {opacity: 0.8;}

** 重点动画部分 *

定义了一个animate动画,利用从0到100%进行旋转从0到360度

     /* 添加流光动画 */.borderLine {position: absolute;top: 0;inset: 0;}@keyframes animate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}

接下来进行动画的插入 在box和borderlin前后插入伪元素,为动画做准备

因为在上面针对zindex的层级叠加以及外层box盒子超出的部分进行了隐藏,所以你可以看到如下的效果

    .box::before,.box::after,.borderLine::before,.borderLine::after{/* 对box和borderlin前后插入伪元素 为元素content必修有尽管它可以是空 */content: '';position: absolute;top: -50%;left: -50%;width: 380px;height: 420px;/* 使用线性渐变作为伪元素的背景样式。渐变采用了透明到非透明的过渡,具体颜色值会根据动画来变化。 */background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff, #45f3ff);z-index: 1;/*设置伪元素的层级为 1,使其位于正常文档流之上。位于其他大于一的效果之下从而辅助形成一条线的效果*/transform-origin: bottom right;/*控制元素的旋转、缩放和倾斜等变换效果的起始位置 从右下开始从而形成逆时针效果bottom right*/animation: animate 6s linear infinite; }
当我们把.box里面的overflow:hidden注释掉之后你会发现其本来的样子,实际上就是插入的元素形成了一个盒子,重合的部分形成了那种流光样式的色彩,超出的部分进行隐藏就会出现上述样式的情况

接下来加入剩下的渐变式的背景样式,形成如下效果

      .box::after {animation-delay: -3s;/*动画开始前延迟*/}.borderLine::before {/* 使用线性渐变作为伪元素的背景样式。渐变采用了透明到非透明的过渡,具体颜色值会根据动画来变化。 */background: linear-gradient(0deg, transparent, transparent, #ff2770, #ff2770, #ff2770);animation-delay: -1.5s; /*动画开始前延迟*/}.borderLine::after{/* 使用线性渐变作为伪元素的背景样式。渐变采用了透明到非透明的过渡,具体颜色值会根据动画来变化。 */background: linear-gradient(0deg, transparent, transparent, #ff2770, #ff2770, #ff2770);animation-delay: -4.5s;}

 当我们把.box超出部分隐藏给重新注释回来的时候

最终效果展示

代码已上传gitee

gitee.com/wu-canhua/s…

本文转载于:

https://juejin.cn/post/7259741942409363511

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/22974.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【雕爷学编程】MicroPython动手做(33)——物联网之天气预报2

天气&#xff08;自然现象&#xff09; 是指某一个地区距离地表较近的大气层在短时间内的具体状态。而天气现象则是指发生在大气中的各种自然现象&#xff0c;即某瞬时内大气中各种气象要素&#xff08;如气温、气压、湿度、风、云、雾、雨、闪、雪、霜、雷、雹、霾等&#xff…

使用快捷键在Unity中快速锁定和解锁Inspector右上角的锁功能

使用快捷键在Unity中快速锁定和解锁Inspector右上角的锁功能 在Unity中&#xff0c;Inspector窗口是一个非常重要的工具&#xff0c;它允许我们查看和编辑选定对象的属性。有时候&#xff0c;我们可能希望锁定Inspector窗口&#xff0c;以防止意外更改对象的属性。幸运的是&am…

Java语言 Iterator 如何装换成 List

迭代器如何逆向转换成List集合 在 Java 中&#xff0c;迭代器&#xff08;Iterator&#xff09;是一种用于遍历集合中元素的对象&#xff0c;它提供了一种简单而一致的方式来访问集合中的元素&#xff0c;而不需要暴露集合内部的结构。如果我们需要将一个迭代器逆向转换成 Lis…

MongoDB 6.0.8 安装配置

一、前言 MongoDB是一个基于分布式文件存储的数据库。由C语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。在高负载的情况下&#xff0c;添加更多的节点&#xff0c;可以保证服务器性能。 MongoDB 将数据存储为一个文档&#xff0c;数据结构由键值(key>value…

阿里云“通义千问”开源,可免费商用

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 阿里云成为国内首个加入大模型开源行列的大型科技企业。就在昨天&#xff0c;阿里云公开表态&#xff0c;把自家的通义千问大模型开源。 阿里云把通用70亿参数模型&#xff0c;包括Qwen-7B和对话模…

《Web安全基础》03. SQL 注入

web 1&#xff1a;简要 SQL 注入2&#xff1a;MySQL 注入2.1&#xff1a;信息获取2.2&#xff1a;跨库攻击2.3&#xff1a;文件读写2.4&#xff1a;常见防护 3&#xff1a;注入方法3.1&#xff1a;类型方法明确3.2&#xff1a;盲注3.3&#xff1a;编码3.4&#xff1a;二次注入3…

阿里云国际站账号OSS购买了资源包为什么还会欠费?

购买资源包后还会欠费的原因 1、资源包无法抵扣所有扣费项目 OSS的计费项包括存储费用、流量费用、请求费用、数据处理费用、对象标签费用、传输加速费用&#xff0c;而目前资源包只提供标准&#xff08;LRS&#xff09;存储包、低频&#xff08;LRS&#xff09;存储包、归档&a…

如何打造属于自己的个人IP?

在当今信息爆炸的时代&#xff0c;个人 IP 已经成为人们在网络世界中的独特标签。无论是在职场上、创业中&#xff0c;还是在社交生活中&#xff0c;拥有个人 IP 的人都能脱颖而出&#xff0c;吸引更多的关注和机会。那么&#xff0c;如何打造属于自己的个人 IP 呢&#xff1f;…

DSP 28335 学习笔记

对DSP进行开发时&#xff0c;需要对其底层的硬件及外设进行相应的配置&#xff0c;当配置完成后才可以将其相应模块激活&#xff0c;才可以在其内部进行程序编写及调试处理。下面对程序配置及操作进行简单的整理&#xff0c;仅供参考。 第一步&#xff1a;初始化系统控制&…

php 适配器模式

一&#xff0c;适配器模式&#xff0c;属于结构设计模式的一种&#xff0c;用于将一个类的接口转换成客户期望的接口。 1&#xff0c;目标接口&#xff08;Target Interface&#xff09;&#xff1a;是客户期望的接口&#xff0c;定义了客户要调用的方法。 2&#xff0c;适配器…

阿里云率先荣获容器集群稳定性先进级认证

7 月 25 日&#xff0c;由中国信通院发起的“2023 稳保体系”评估结果在可信云大会现场公布&#xff0c;阿里云容器服务 ACK 成为首批通过“云服务稳定运行能力-容器集群稳定性”评估的产品&#xff0c;并荣获“先进级”认证。 云原生技术正在激活应用构建新范式&#xff0c;构…

2023数字生态大会召开,长虹佳华再获3项大奖

近日&#xff0c;2023数字生态大会在北京隆重召开。长虹佳华勇夺“2023数字生态云计算服务卓越企业”、“2023数字生态元宇宙十强”和“数字生态增值分销商十强”三项大奖&#xff1b;还同时入选 “智慧教育十佳案例” 和 “智能制造十佳案例”。 长虹佳华是国企控股的香港上市…

Gcd 2023牛客暑期多校训练营6 G

登录—专业IT笔试面试备考平台_牛客网 题目大意&#xff1a;给出一个集合&#xff0c;集合中初始有2个数x,y(x!y)&#xff0c;每次操作可以将集合中任意两个不等的数的差放入集合或者将两个不等的数的gcd放入集合&#xff0c;给出一个数z&#xff0c;问z有没有可能出现在集合里…

FFmpeg解码详细流程

介绍 FFmpeg的 libavcodec 模块完成音视频多媒体的编解码模块。老版本的 FFmpeg 将avcodec_decode_video2()作为视频的解码函数 API&#xff0c;将avcodec_decode_audio4()作为音频的解码函数 API&#xff1b;从 3.4版本开始已经将二者标记为废弃过时 API&#xff08;attribut…

iTOP-RK3588开发板Ubuntu 系统交叉编译 Qt 工程-命令行交叉编译

使用源码 rk3588_linux/buildroot/output/rockchip_rk3588/host/bin/qmake 交叉编译 QT 工程。 最后烧写编译好的 buildroot 镜像&#xff0c;将编译好的 QT 工程可执行程序在 buildroot 系统上运行。 交叉编译 QT 工程如下所示&#xff0c;首先进入 QLed 的工程目录下。 然后…

【FAQ】EasyGBS平台通道显示在线,视频无法播放并报错400的排查

EasyGBS是基于国标GB28181协议的视频云服务平台&#xff0c;它可以支持国标协议的设备接入&#xff0c;在视频能力上能实现直播、录像存储、检索与回放、云台控制、告警上报、语音对讲、平台级联等功能&#xff0c;既能作为业务平台使用&#xff0c;也能作为能力层平台调用。 我…

《每天十分钟》-红宝书第4版-语言基础-数据类型(五)

接上篇再学个比较有用的 Symbol.isConcatSpreadable 这个符号作为一个属性表示“一个布尔值&#xff0c;如果是 true&#xff0c;则意味着对象应 该用 Array.prototype.concat()打平其数组元素”。ES6 中的 Array.prototype.concat()方法会 根 据 接 收 到 的 对 象 类 型 选 择…

CS 144 Lab Four -- the TCP connection

CS 144 Lab Four -- the TCP connection TCPConnection 简述TCP 状态图代码实现完整流程追踪 测试 对应课程视频: 【计算机网络】 斯坦福大学CS144课程 Lab Four 对应的PDF: Lab Checkpoint 4: down the stack (the network interface) TCPConnection 简述 TCPConnection 需要…

aardio:用 WebView 模仿 mdict 界面

aardio&#xff1a;用 WebView 模仿 mdict 界面 import win.ui; /*DSG{{*/ mainForm win.form(text"aardio2";right889;bottom467) mainForm.add( button{cls"button";text"go";left335;top22;right399;bottom41;z2}; button2{cls"button…

SpringBoot使用redis作为缓存的实例

目录 什么是缓存&#xff1f; 缓存的作用&#xff1f; 缓存的成本&#xff1f; 实际项目中的应用 代码展示 什么是缓存&#xff1f; 缓存就是数据交换的缓冲区&#xff08;称作Cache [ kʃ ] &#xff09;&#xff0c;是存贮数据的临时地方&#xff0c;一般读写性能较高。 缓…