HTML和CSS实现炫酷的登录页面

效果图：

HTML

  整个页面元素很简单就不细讲了，直接上代码吧：

  
  
  
  
  
  


  

    

      
Login
      

        

          
          
        
        

          
          
        
      
      Login
    
  

  上面两个link一个是引用css文件，一个是引用一个图标库font-awesome，大家可以去百度搜一下，然后直接下载，在项目中引用就能用了。

CSS

我们要解决这几件事：

• 半透明框体
• 框体居中且里面的文字等元素也居中
• 背景图全屏铺满
• 输入框的边框只有下边框
• 按钮的圆角与渐变色

代码如下：

body{
  background: url('../img/img03.jpg');
  background-repeat: no-repeat;
  background-size: 100% auto;
}

#login-box{
  width: 30%;
  height: auto;
  margin: 0 auto;
  margin-top: 15%;
  text-align: center;
  background: #00000090;
  padding: 20px 50px;
}

#login-box h1{
  color: #fff;
}

#login-box .form .item{
  margin-top: 15px;
}

#login-box .form .item i{
  font-size: 18px;
  color: #fff;
}

#login-box .form .item input{
  width: 180px;
  font-size: 18px;
  border: 0;
  border-bottom: 2px solid #fff;
  padding: 5px 10px;
  background: #ffffff00;
  color: #fff;
}
#login-box button{
  margin-top: 15px;
  width: 180px;
  height: 30px;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  border: 0;
  border-radius: 15px;
  /* background: #1abc9c; */
  /* background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%); */
  background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);
}

渐变色是从网站webgradients.com直接复制的（你也可以自己手动改）