css+html+js 仿制一个天猫的登陆界面

实现了两种登陆方式在同一页面不同条件下呈现
基本实现了天猫网页登陆页面的所有效果
账号密码登录
点击右上角的二维码位置可以切换到扫码登陆页面
扫码登陆界面将鼠标放在二维码上可以切换到扫码教程界面

扫码教程界面下载地址/download/piinkyang/12007615

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
好的,以下是一个简单的登陆界面HTMLCSS 和 JavaScript 代码: HTML 代码: ``` <!DOCTYPE html> <html> <head> <title>Login Page</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="login-box"> <h2>Login Here</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> <input type="submit" name="" value="Submit"> </a> </form> </div> </body> </html> ``` CSS 代码: ``` * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; background: #34495e; } .login-box { width: 280px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; } .login-box h2 { margin: 0 0 20px; padding: 0; font-size: 22px; text-align: center; } .login-box form { position: relative; } .login-box form input { width: 100%; margin-bottom: 20px; } .login-box form input[type="text"], .login-box form input[type="password"] { border: none; border-bottom: 1px solid #fff; background: transparent; outline: none; height: 40px; color: #fff; font-size: 16px; } .login-box form input[type="submit"] { border: none; outline: none; height: 40px; color: #fff; font-size: 16px; background: #3498db; cursor: pointer; border-radius: 20px; } .login-box form a { position: relative; display: inline-block; } .login-box form a input[type="submit"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; cursor: pointer; } .login-box form a span { position: absolute; display: block; height: 60px; width: 60px; border-radius: 50%; background: #3498db; opacity: 0.7; } .login-box form a span:nth-child(1) { top: -30px; left: -30px; animation: animate1 1s linear infinite; } .login-box form a span:nth-child(2) { top: -30px; right: -30px; animation: animate2 1s linear infinite; } .login-box form a span:nth-child(3) { bottom: -30px; right: -30px; animation: animate3 1s linear infinite; } .login-box form a span:nth-child(4) { bottom: -30px; left: -30px; animation: animate4 1s linear infinite; } @keyframes animate1 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @keyframes animate2 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @keyframes animate3 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @keyframes animate4 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } ``` JavaScript 代码: ``` // 暂无 JavaScript 代码 ``` 希望这个代码能够帮助到你!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Pink3Y

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值