登录页面(附源码)

特色:

点击登录之后卡片翻转效果

话不多说,看展示。

 还在等什么,赶快白嫖起来吧

HTML文件


<div id="window" style="display: none">
  <div class="page page-front">
    <div class="page-content">
      <div class="input-row">
        <label class="label fadeIn">Username</label>
        <input class="input fadeIn delay1" id="username" type="text" data-fyll="pineapple"/>
      </div>
      <div class="input-row">
        <label class="label fadeIn delay2">Password</label>
        <input class="input fadeIn delay3" id="password" type="password" data-fyll="hackmeplease"/>
      </div>
      <div class="input-row perspective">
        <button class="button load-btn fadeIn delay4" id="submit"><span class="default"><i class="ion-arrow-right-b"></i>Login</span>
          <div class="load-state">
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
          </div>
        </button>
      </div>
    </div>
  </div>
  <div class="page page-back">
    <div class="page-content"><img class="avatar" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/avatar.jpg"/>
      <p class="welcome">Welcome back, Dog!</p>
      <div class="perspective">
        <button class="button inline trigger-anim-replay"><i class="ion-refresh"></i>Replay animation</button>
      </div>
    </div>
  </div>
</div>
<div class="browser-warning hidden">Glitchy or weird animation? Let it play through once, then press Replay.</div>

CSS文件

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,300,100);
html, body {
  height: 100%;
}

body {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9ImVsbGlwc2UiIGN5PSJjbG9zZXN0LXNpZGUiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNGUyYWYiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -moz-radial-gradient(ellipse closest-side, #ffffff, #d4e2af);
  background-image: -webkit-radial-gradient(ellipse closest-side, #ffffff, #d4e2af);
  background-image: radial-gradient(ellipse closest-side, #ffffff, #d4e2af);
  -moz-perspective: 1000px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  font-family: 'Open Sans';
  font-weight: 300;
}

*, *::after, *::before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#window {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 350px;
  width: 450px;
  color: #FFF;
  -webkit-animation: 1.5s window ease-in-out backwards;
  -moz-animation: 1.5s window ease-in-out backwards;
  animation: 1.5s window ease-in-out backwards;
  -moz-transform-style: preserve-3d;
  -webkit-transform-sty
### 设计美观的登录页面 对于Web应用程序的设计,存在两种基本方法[^1]。然而,在具体实现上,可以采用多种技术和框架来创建既美观又实用的登录界面。 下面是一个基于HTML、CSS和JavaScript构建的简单而优雅的登录页面示例: #### HTML结构 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login Page</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="login-container"> <h2>Sign In</h2> <form id="loginForm"> <input type="text" placeholder="Username" required><br> <input type="password" placeholder="Password" required><br> <button type="submit">Login</button> </form> </div> <script src="script.js"></script> </body> </html> ``` #### CSS样式 (styles.css) ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f4f4f9; display: flex; justify-content: center; align-items: center; height: 100vh; } .login-container { width: 300px; padding: 2rem; background: white; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-align: center; } h2 { color: #333; margin-bottom: 1rem; } input[type=text], input[type=password] { width: calc(100% - 20px); padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 3px; } button { width: 100%; padding: 10px; background-color: #5cb85c; color: white; border: none; cursor: pointer; border-radius: 3px; } ``` #### JavaScript交互逻辑 (script.js) ```javascript document.getElementById('loginForm').addEventListener('submit', function(event){ event.preventDefault(); alert('Logging in...'); }); ``` 此模板提供了清晰简洁的编码风格[^2],并遵循良好的实践原则,如可读性和易于维护性[^3]。通过这种方式,不仅能够提供视觉上的吸引力,同时也确保了技术层面的质量标准。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

悟解了

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值