登录页面 输入框左侧加图标 炫酷透明效果 bootstrap css fontawesome联合打造

先上图吧，应该有不少人喜欢这种效果的~~

知识点：1.bootstrap 输入框组 实现输入框左侧加图标的功能

               2.border属性 

               3.opacity属性

上代码：(第一次使用代码片)

.input-group{
    border:1px #ccc solid;
    border-spacing:1px;
    border-radius:4px;
}
.inputLogin{
    opacity: 0.4;
    transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -webkit-box-shadow:0 0 0px 1000px #ffffff inset;
    height:34px;
    width:326px;
    padding:6px 12px;
    border:none;
}
.input-group-addon{
    color:white;
    background-color:RGBA(255,255,255,0.4);

}
.btn-default{
    width:374px;
    background-color:rgba(255,255,255,0.4);
}

.loginForm{
    padding:15px;
    width:400px;
    height: 300px;
    margin-left:auto;
    margin-right:auto;
    vertical-align: middle;
}

需要引用bootstrap 和font awesome文件，当然啦，你也可以自己画input和button。

几个小时的成果，如果转载请注明出处。

    <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">

    <link type="text/css" rel="stylesheet" href="css/login.css"/>

昨天忘记贴input和button了，今天补上：

 
   
   

                    
    
    

                        
     
     

                            
      
      
                            
      
      
                        
     
     
                    
    
    
                    
    
    

                        
     
     

                            
      
      
                            
      
      
                        
     
     
                    
    
    
                    
    
    登 录