htmlcss水流动基于css3写出的流光登录注释超具体

<body>  <div class="box"> <span class="borderLine"></span>  <form> <h2>Sign In</h2> <div class="inputBox">  <input type="text" required>  <span>User name</span><i></i> </div> <div class="inputBox"> <input type="password" required>  <span>Password</span><i></i> </div> <div class="links">  <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轴

htmlcss水流动基于css3写出的流光登录注释超具体 GraphQL

{ / 打消默认样式 / 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超出部分隐蔽给重新注释回来的时候

终极效果展示

总结

基于这样的一个css效果的实现，要把稳在html元素中，加入required可以使得文本框必须填内容，否则则报错出默认的样式提醒，同时，通过用i标签形成一条白线，并且将这条白线撑高从而代替原来的文本框的样式，是一个值得借鉴的行为min-height元素的利用使得整体高度为浏览器窗口的高度，同时z-index样式的利用使得有更好的堆叠顺序，使得展示优先级得到进一步的表示，值得我们深入的研究样式的堆叠顺序展示优先级此外，弹性布局方面的研究也更值得我们好好学习，基本的弹性盒模型和样式要节制，换轴，居中等末了，动画的设置也值得我们借鉴，上述代码中颜色样式等都可以根据自身喜好进行修正用以达到自身的哀求，同时，该只属于css部分，干系js功能并没有实现，须要的大家可以自行添加js，css。