念念不忘
必有回响

B站网页特效学习 — 登录页制作

看到B站讲的不错的网页特效视频,在GitHub也有分享的demo,顺便记录一下总结,需要引入的CDN资源

<!-- font-awesome --> <link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />

登录页一: demo

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Login</title> <style> * { font-family: 'montserrat', sans-serif; } body { margin: 0; padding: 0; background: #333; } .login-box { position: absolute; top: 0; left: -100%; width: 100%; height: 100vh; /* vh 视口高度 viewport height 百分比单位*/ background-image: linear-gradient( 45deg, #9fbaa8, #31354c ); /*设置颜色渐变 方向(0deg垂直向上) 起点颜色 终点颜色*/ transition: 0.4s; /*过度效果 property duration timing-function delay 默认属性:all 0 ease 0*/ } .login-form { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /*定义 2D 转换8 */ color: white; text-align: center; } .login-form h1 { font-weight: 400; margin-top: 0; } .txtb { display: block; box-sizing: border-box; width: 240px; background: #ffffff28; border: 1px solid white; padding: 10px 20px; color: white; outline: none; margin: 10px 0; border-radius: 6px; text-align: center; } .login-btn { width: 240px; background: #2c3e50; border: 0; color: white; padding: 10px; border-radius: 6px; cursor: pointer; } .hide-login-btn { color: #000; position: absolute; top: 40px; right: 40px; cursor: pointer; font-size: 30px; opacity: 0.7; transform: rotate(45deg); /*定义 2D 转换8 */ } .show-login-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; border: 2px solid; padding: 10px; cursor: pointer; } .showed { left: 0; } </style> </head> <body> <div class="show-login-btn"> -> Show Login Form </div> <div class="login-box"> <div class="hide-login-btn"> + </div> <form action="index.html" method="POST" class="login-form"> <h1>Welcome</h1> <input class="txtb" type="text" name="" placeholder="Username" /> <input class="txtb" type="password" name="" placeholder="Password" /> <input class="login-btn" type="submit" name="" value="Login" disabled /> </form> </div> <script type="text/javascript"> function hasClass(element, clssname) { return element.className.match(new RegExp('(\\s|^)' + clssname + '(\\s|$)')) } function addClass(element, clssname) { if (!this.hasClass(element, clssname)) element.className += ' ' + clssname } function removeClass(element, clssname) { if (hasClass(element, clssname)) { var reg = new RegExp('(\\s|^)' + clssname + '(\\s|$)') element.className = element.className.replace(reg, ' ') } } function toggleClass(element, clssname) { if (hasClass(element, clssname)) { removeClass(element, clssname) } else { addClass(element, clssname) } } var loginBox = document.getElementsByClassName('login-box') var showBtn = document.getElementsByClassName('show-login-btn') var hideBtn = document.getElementsByClassName('hide-login-btn') showBtn[0].addEventListener('click', function() { toggleClass(loginBox[0], 'showed') }) hideBtn[0].addEventListener('click', function() { toggleClass(loginBox[0], 'showed') }) </script> </body> </html>

登录页二:demo

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>登录页</title> <style> body { margin: 0; padding: 0; font-family: sans-serif; background: #34495e; } .box { width: 300px; padding: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #191919; text-align: center; } .box h1 { color: white; text-transform: uppercase; font-weight: 500; } .box input[type='text'], .box input[type='password'] { border: 0; background: none; display: block; margin: 20px auto; text-align: center; border: 2px solid #3498db; padding: 14px 10px; width: 200px; outline: none; color: white; border-radius: 24px; transition: 0.25s; } .box input[type='text']:focus, .box input[type='password']:focus { width: 280px; border-color: #2ecc71; } .submit { border: 0; background: none; margin: 20px auto; margin-top: 0; display: inline-block; text-align: center; border: 2px solid #3498db; padding: 10px 40px; outline: none; color: white; border-radius: 24px; transition: 0.25s; cursor: pointer; text-decoration: none; font-size: 12px; } .submit:hover { background: #2ecc71; border-color: #2ecc71; } </style> </head> <body> <div class="box"> <h1>Login</h1> <input type="text" placeholder="Username" /> <input type="password" placeholder="Password" /> <a class="submit" href="https://github.com/yyeexin/bilibili-html-demo">Login</a> </div> </body> </html>


登录页三:demo

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Login</title> <style> body { margin: 0; padding: 0; background: #fff; } .signup-form { width: 300px; padding: 20px; text-align: center; background: url('../images/bg.jpg'); background-size: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; } .signup-form h1 { margin-top: 100px; font-family: 'Permanent Marker', cursive; color: #fff; font-size: 40px; } .signup-form input { display: block; width: 100%; padding: 0 16px; height: 44px; text-align: center; box-sizing: border-box; outline: none; border: none; font-family: 'montserrat', sans-serif; } .txtb { margin: 20px 0; background: rgba(255, 255, 255, 0.5); border-radius: 6px; } .signup-btn { margin-top: 60px; margin-bottom: 20px; background: #487eb0; color: #fff; border-radius: 44px; cursor: pointer; transition: 0.8s; } .signup-btn:hover { transform: scale(0.96); } .signup-form a { text-decoration: none; color: #fff; font-family: 'montserrat', sans-serif; font-size: 14px; padding: 10px; transition: 0.8s; display: block; } .signup-form a:hover { background: rgba(0, 0, 0, 0.25); } </style> </head> <body> <div> <div class="signup-form"> <h1>Sign Up</h1> <input type="text" placeholder="Full Name" class="txtb" /> <input type="email" placeholder="Email" class="txtb" /> <input type="password" placeholder="Password" class="txtb" /> <input type="submit" value="Create Account" class="signup-btn" /> <a href="https://github.com/yyeexin/bilibili-html-demo">Already Have One ?</a> </div> </div> </body> </html>

 

赞(4) 打赏
未经允许不得转载:小蚁上树 » B站网页特效学习 — 登录页制作
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址