记录--基于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
本文转载于:
https://juejin.cn/post/7259741942409363511
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
记录--基于css3写出的流光登录（注释超详细！）的更多相关文章
- css3写出飘雪花特效
大冬天的,飘雪花的特效,你可能要用上了吧.通常情况下用jQuery写飘雪花的特效,但用css3写,其实特别简单,新手一看就懂,那就告别jQuery,用css3轻松搞定飘雪花特效吧! 点击查看特效演示 ...
- 一步一步写出java swing登录界面，以及输入的参数获取
经过好几天的学习,研究,接下来说说java swing,以及内嵌浏览器的方法. 一.swing是一个用于java应用程序用户界面的的开发工具包. 例如:接下来我们做个登录界面,简要说明 做之前的构想图 ...
- css3写出0.5px的边框
一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代 ...
- 用css3写出的倒三角形
<!DOCTYPE html><html><head><meta charset="gb2312" /><title>无 ...
- Linux下实现普通用户免密码登录【超详细】
现有需求,需要把所有服务器的root和密码登录都禁用,只开放普通用户登录,这时需要给普通用户配置秘钥文件,实现无密码登录 如果普通用户需要root权限,在root用户下执行命令:visudo [roo ...
- MVC设计模式实现权限管理登录，超详细
功能实现:在页面输入给定的用户名之一,可以显示当前用户的权限,也可以在页面更改该用户的权限,更新之后保存.像下面这样. 填写用户名提交: 显示用户AAA的权限: 修改权限(增加article3): 点 ...
- 基于CSS3动态背景登录框代码
基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- 一款基于css3和jquery实现的动画弹出层
今天给大家分享一款基于css3和jquery实现的动画弹出层.这款弹出层初页面面一个显示弹出层按钮.单击该按钮时,弹出层以非常炫的动画形式出现.弹出层有关闭按钮,单击半闭按钮,弹出层关闭.效果图如下: ...
- 利用css3特性写出三角形（兼容IE浏览器）
利用CSS写出三角形的效果 效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...
- 基于css3实现手风琴效果
终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...
随机推荐
- 好书推荐之JAVA并发编程扛鼎之作：《Java并发编程实战》、《Java并发编程的艺术》
(pdf文档下载见文末) 大佬推荐 <Java 并发编程实战>,是一本完美的 Java 并发参考手册. 书中从并发性和线程安全性的基本概念出发,介绍了如何使用类库提供的基本并发构建块,用于 ...
- JOISC 2023 纪录
记录一下 JOISC 2023 的做题记录 Day1 T1 Two Currencies 给定一棵树,在边上有总计 \(m\) 个检查站,经过一个检查站需要叫 \(1\) 枚金币或者若干枚银币.\(Q ...
- 看似简单的input框输入竟然异常卡顿，记一个日常性能问题的排查思路
壹 ❀ 引 我们公司产品主要提供企业项目管理服务,那么自然有配套的desk工单管理系统,用于搜集客户bug以及相关问题反馈.有一天我在测试功能时碰巧发现了一个bug,所以就想着提一个工单记录下方便日后 ...
- NC19429 红球进黑洞
题目链接 题目 题目描述 在心理疏导室中有一种奇特的疏导工具,叫做红球.红球被提前分为了许多正方形小方格. 每当有人来找ATB做心理疏导时,ATB就会让他去先玩红球,然后通过红球小格方的高度来判断一个 ...
- python 学习随笔1121
Python 数据处理几个好用又简单的库: json re string pandas 与系统交互: subprocess os
- Vue实现简单图书管理例子
以下内容整理自网络. 说明 本例主要涵盖以下知识点: 数据绑定 条件与循环 计算属性 监听器 过滤器 常见数组和对象操作 vue生命周期 示例演示 代码 <!DOCTYPE html> & ...
- win32-StretchDIBits - PrintDlg
使用StretchDIBits将位图数据传输到printer的dc中 #include <Windows.h> #include <algorithm> int main() ...
- Docker实践之07-数据管理
目录 一.数据卷概述 二.创建数据卷 三.查看数据卷 四.挂载数据卷 五.删除数据卷 六.挂载主机目录或文件 七.挂载数据卷与主机目录/文件的比较 一.数据卷概述 数据卷是一个可供一个或多个容器使用的 ...
- SSH 客户端
简介 OpenSSH 的客户端是二进制程序 ssh.它在 Linux/Unix 系统的位置是/usr/local/bin/ssh. Linux 系统一般都自带 ssh,如果没有就需要安装. # Ubu ...
- 【C# .Net】List循环add，出现数据相同现象? 引发对引用类型和值类型的底层逻辑的思考。
赶项目时发现了一个问题,定义一个引用对象,如果在循环外定义对象,在循环内list.add(object).最后的结果却是所有的对象值都是一样的,即每add一次,都会把之前的数据覆盖. 解决方法:把对象 ...