HTML5制作可验证登陆界面

 

使用效果：阴影、渐变、按钮上下翻转、长按按钮播放动画

兼容：Firefox  Google  不兼容IE

 

 

 

代码：

<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3/org/TR/xhtml1/dtd/XHTML1-TRANSITION.DTD">->
<html lang="">
 <head>
     <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>登陆界面</title>
<!--js css-->
<style type="text/css">
body{background:#cfd7eb;font-family:"微软雅黑"}
.login{
       height:320px;
       width:300px;
       background:#38569d;
       margin:50px auto;
       border-radius:5px;
       box-shadow:0px 0px 10px rgba(0,0,0,0.4);
       background:-webkit-radial-gradient(center,ellipse cover,#3bb4ff 0%,#009bd5 100%);
       position:relative;
       padding:100px 30px 0px 30px;
       }
.login:before{
      content:"会员登录";
      font-size:18px;
      font-style:normal;
      font-weight:bold;
      color:#F90;
      background:url(images/arr.png) no-repeat;
      padding-left:30px;
      position:absolute;top:10px;left:10px;
      }
.login-form input[type="email"],.login-form input[type="password"]{
    width:260px;
    border:1px solid #96a4c7;
    padding:15px 20px;
    cursor:pointer;
    }
.login-form input[type="email"]{
    border-radius:4px 4px 0 0;
    box-shadow:0px 1px 2px rgba(0,0,0,0.4) inset;
    }
.login-form input[type="password"]{
    border-radius: 0 0 4px 4px;
    box-shadow:0px -1px 2px rgba(0,0,0,0.4) inset;
    }
.login-form input[type="submit"]{
    width:300px;
    border-radius:3px;
    padding:8px 0px;
    border:0px;
    text-shadow:0px 1px 1px rgba(255,255,255,0.5);
    font-size:18px;
    color:#697584;
    font-weight:bold;
    cursor:pointer;
    box-shadow:0px 1px 2px rgba(255,255,255,0.4) inset;
    background:-webkit-linear-gradient(top,#f2f2f2 0%,#cfcfcf 100%);
    margin-top:20px;
    }
.login-form input[type="submit"]:hover{
    background:-webkit-linear-gradient(top,#cfcfcf 0%,#f2f2f2 100%);
    -webkit-animation:login 1500ms infinite alternate ease-in-out;
    }
@-webkit-keyframes login{
    %0{box-shadow:0px 1px 2px rgba(255,255,255,0.8)}
    100%{box-shadow:0px 1px 30px rgba(0,0,0,1)}
    }
.login-form input[type="submit"]:active{
    background:#ddd;padding-top:9px;padding-bottom:7px;
    }
.login p{
    text-align:center;
    margin-top:40px;
    }
.login p a{
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    }
</style>
</head>
 <body>
 
  <div class="login">
      <form id="login" name="login" class="login-form">
          <input type="email" name="email" placeholder="邮箱" required>
          <input type="password" name="password" placeholder="密码" required>
          <input type="submit" value="登陆">
      </form>
      <p><a href="#">忘记密码</a></p>
      
  </div>
 </body>
</html>

 

posted @ 2017-02-27 21:07  邓蜗牛  阅读(845)  评论(0)  编辑  收藏  举报