五个拿来就能用的炫酷登录页面

于 2022-04-23 18:08:23 发布
阅读量705 收藏
点赞数
分类专栏： javascript 文章标签： javascript
原文链接：https://blog.csdn.net/weixin_45660485/article/details/124264181?spm=1001.2100.3001.7377&utm_medium=distribute.pc_feed_blog_category.none-task-blog-classify_tag-2.nonecase&depth_1-utm_source=distribute.pc_feed_blog_category.none-task-blog-classify_tag-2.no
版权
如花菇凉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一款非常炫酷登录注册页面
06-27
一个非常炫酷的的登录注册页面，登录注册切换由 jQuery 实现，原理简单易懂并且十几行代码就完成了，有兴趣的小伙伴拿来试试呗
前端50个精美登录注册模板
热门推荐
FZUMRWANG的博客
03-12 3万+
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table width="100%&quo
我为大家带来了15张超酷的登录界面！！！
txaz6的博客
09-23 6274
大家在评论区投出自己认为最好的一张，小T会完整的使用Flutter复刻出来，并分享源码 所有设计图来自搜狐西见于2020年6月发起的设计挑战：链接在这里 以下所有设计图均来自网络，如有侵权，请联系我删除，感谢各位分享~ 本人最喜欢的一张： 这张的配色使我很舒服 其他的十四张： 1.这张的色调也是很不错，很适合修改后用于社交app或者摄影app 2.这张的风格不用多说了吧，适合购物app或者偏向女性的app 3.这一款就的logo觉得适合影视app呀，妥妥的 4.这一款的波浪就非常合符音乐app，自己
拿来就能用的前端酷炫登录注册界面模板
08-09
拿来就能用的前端酷炫登录注册界面模板，Html、CSS、JS非常全
HTML和CSS实现炫酷的登录页面
qq_44204959的博客
04-09 7539
效果图： HTML   整个页面元素很简单就不细讲了，直接上代码吧： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...
炫酷登录页面
02-08
非常炫酷的登录页面 可以下载看一下123456789789789789
炫酷的登录页面 —— html
03-25
JS 编写的炫酷效果
炫酷的动态登录页面
03-12
一个炫酷的动态登录页面，里面包含javascript,css,jquery技术。
炫酷登录界面
05-30
基于bootstrap、jQuery制作的一个界面可以切换的，必须要验证才能通过的登录界面
酷炫登录界面
01-01
动态背景的登录界面，用jQuery+jsp写的，适合网页制作和前端设计
CSS3炫酷登录页
01-16
运用CSS3技术 写的一个简单而炫酷的登录页 希望大家喜欢
jquery 炫酷登录页面
11-12
在jquery炫酷登录页面的基础上进行改版，实现鼠标点击页面效果
炫酷登录页面——掌握属性动画
04-18
对应的博客地址：http://blog.csdn.net/qq_25193681/article/details/52005375
酷炫PC端登录页面模板
06-17
超级炫酷的登录界面，带有前端验证，用到了js，css和jquery，背景带有动画效果，随着鼠标的移动会有不同的效果
h5炫酷登录页面
07-04
炫酷的h5登录页面，不要积分就可免费下载，若有版权冲突请联系我
CSS+JS酷炫的登陆页面
11-21
非常酷炫的HTML+CSS+JS的登陆页面
炫酷的登录页
08-31
非常炫的登录界面，精美
炫酷登录界面效果
10-19
一个炫酷的登录界面，背景清爽、炫酷、不失逼格，你值得拥有！
用js、css、HTML编写一个炫酷的登录界面
最新发布
06-09
好的，下面我会给你提供一个简单的示例代码，实现一个炫酷的登录界面。 HTML代码： ```html <!DOCTYPE html> <html> <head> <title>炫酷的登录界面</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="login-box"> <h2>Login</h2> <form> <div class="user-box"> <input type="text" name="" required=""> <label>Username</label> </div> <div class="user-box"> <input type="password" name="" required=""> <label>Password</label> </div> <a href="#"> <span></span> <span></span> <span></span> <span></span> Submit </a> </form> </div> </body> </html> ``` CSS代码： ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #34495e; } .login-box { width: 500px; background: #191919; padding: 40px; border-radius: 10px; box-shadow: 0 0 20px #00000080; } .login-box h2 { color: #fff; text-align: center; margin-bottom: 30px; } .user-box { position: relative; } .user-box input { width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; } .user-box label { position: absolute; top: 0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; } .user-box input:focus ~ label, .user-box input:valid ~ label { top: -20px; left: 0; color: #03a9f4; font-size: 12px; } a { display: inline-block; background: #03a9f4; padding: 10px 40px; color: #fff; font-size: 16px; text-decoration: none; border-radius: 30px; position: relative; overflow: hidden; transition: .5s; } a:hover { background: #fff; color: #03a9f4; } a span { position: absolute; display: block; } a span:nth-child(1) { top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #03a9f4); animation: animate1 1s linear infinite; } @keyframes animate1 { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } a span:nth-child(2) { top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, #03a9f4); animation: animate2 1s linear infinite; animation-delay: .25s; } @keyframes animate2 { 0% { top: -100%; } 50% { top: 100%; } 100% { top: 100%; } } a span:nth-child(3) { bottom: 0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg, transparent, #03a9f4); animation: animate3 1s linear infinite; animation-delay: .5s; } @keyframes animate3 { 0% { right: -100%; } 50% { right: 100%; } 100% { right: 100%; } } a span:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg, transparent, #03a9f4); animation: animate4 1s linear infinite; animation-delay: .75s; } @keyframes animate4 { 0% { bottom: -100%; } 50% { bottom: 100%; } 100% { bottom: 100%; } } ``` 这个登录界面使用了CSS3的动画效果，通过伪元素和动画的组合实现了一个按钮的动态效果，非常炫酷。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值