带有浮动占位符和灯光按钮的登录表单

带有浮动占位符和灯光按钮的登录表单

带有浮动占位符的登录表单 免费下载 和 HTML 和 CSS 中的灯光按钮

HTML：

 <div class="login-box">  
 <h2>登录</h2>  
 <form>  
 <div class="user-box">  
 <input type="text" name="" required="">  
 <label>用户名</label>  
 </div>  
 <div class="user-box">  
 <input type="password" name="" required="">  
 <label>密码</label>  
 </div>  
 <a href="#">  
 <span></span>  
 <span></span>  
 <span></span>  
 <span></span>  
 提交  
 </a>  
 </form>  
 </div>

CSS：

 html {  
 高度：100%；  
 }  
 身体 {  
 边距：0；  
 填充：0；  
 字体系列：无衬线；  
 背景：线性渐变（#141e30，#243b55）；  
 } .登录框{  
 位置：绝对；  
 最高：50%；  
 左：50%；  
 宽度：400px；  
 内边距：40px；  
 变换：翻译（-50%，-50%）；  
 背景：rgba(0,0,0,.5);  
 box-sizing：边框框；  
 盒子阴影：0 15px 25px rgba(0,0,0,.6);  
 边框半径：10px；  
 } . 登录框 h2 {  
 边距：0 0 30px；  
 填充：0；  
 颜色：#fff;  
 文本对齐：居中；  
 } .login-box .user-box {  
 位置：相对；  
 } .login-box .user-box 输入{  
 宽度：100%；  
 填充：10px 0；  
 字体大小：16px；  
 颜色：#fff;  
 边距底部：30px；  
 边框：无；  
 边框底部：1px 实心#fff；  
 大纲：无；  
 背景：透明；  
 }  
 .login-box .user-box 标签 {  
 位置：绝对；  
 顶部：0；  
 左：0；  
 填充：10px 0；  
 字体大小：16px；  
 颜色：#fff;  
 指针事件：无；  
 过渡：0.5s；  
 } .login-box .user-box 输入：焦点~标签，  
 .login-box .user-box 输入：有效~标签{  
 顶部：-20px；  
 左：0；  
 颜色：#03e9f4；  
 字体大小：12px；  
 } .login-box 形成一个 {  
 位置：相对；  
 显示：内联块；  
 填充：10px 20px；  
 颜色：#03e9f4；  
 字体大小：16px；  
 文字装饰：无；  
 文本转换：大写；  
 溢出：隐藏；  
 过渡：0.5s；  
 边距顶部：40px；  
 字母间距：4px  
 } .login-box a:hover {  
 背景：#03e9f4；  
 颜色：#fff;  
 边框半径：5px；  
 盒子阴影：0 0 5px #03e9f4，  
 0 0 25px #03e9f4,  
 0 0 50 像素 #03e9f4,  
 0 0 100像素#03e9f4;  
 } .login-box 一个 span {  
 位置：绝对；  
 显示：块；  
 } .login-box 一个 span:nth-child(1) {  
 顶部：0；  
 左：-100%；  
 宽度：100%；  
 高度：2px；  
 背景：线性渐变（90度，透明，#03e9f4）；  
 动画：btn-anim1 1s线性无限；  
 } @keyframes btn-anim1 {  
 0% {  
 左：-100%；  
 }  
 50%,100% {  
 左：100%；  
 }  
 } .login-box 一个 span:nth-child(2) {  
 最高：-100%；  
 右：0；  
 宽度：2px；  
 高度：100%；  
 背景：线性渐变（180度，透明，#03e9f4）；  
 动画：btn-anim2 1s 线性无限；  
 动画延迟：0.25s  
 } @keyframes btn-anim2 {  
 0% {  
 最高：-100%；  
 }  
 50%,100% {  
 最高：100%；  
 }  
 } .login-box 一个 span:nth-child(3) {  
 底部：0；  
 右：-100%；  
 宽度：100%；  
 高度：2px；  
 背景：线性渐变（270度，透明，#03e9f4）；  
 动画：btn-anim3 1s线性无限；  
 动画延迟：0.5s  
 } @keyframes btn-anim3 {  
 0% {  
 右：-100%；  
 }  
 50%,100% {  
 正确：100%；  
 }  
 } .login-box 一个 span:nth-child(4) {  
 底部：-100%；  
 左：0；  
 宽度：2px；  
 高度：100%；  
 背景：线性渐变（360度，透明，#03e9f4）；  
 动画：btn-anim4 1s线性无限；  
 动画延迟：0.75s  
 } @keyframes btn-anim4 {  
 0% {  
 底部：-100%；  
 }  
 50%,100% {  
 底部：100%；  
 }  
 }

HTML、CSS 和 JavaScript 代码片段开启， AllWebCodes.com

完毕！享受 带有浮动占位符和轻按钮的登录表单

现在下载

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/30248/02281208