前端——好看的登录页面(二)_飞道的博客

前端——好看的登录页面(二)

2020-05-15 11:08 448人阅读评论(0)

UserLogin.html


   
    
     
      
     
     
      
       <!DOCTYPE html>
      
     
    
     
      
     
     
      
       <html lang="en">
      
     
    
     
      
     
     
      
       <head>
      
     
    
     
      
     
     
          
       <meta charset="UTF-8">
      
     
    
     
      
     
     
          
       <title>用户登录界面
       </title>
      
     
    
     
      
     
     
          
       <link rel="stylesheet" href="styleLogin.css"/>
      
     
    
     
      
     
     
      
       </head>
      
     
    
     
      
     
     
      
       <body>
      
     
    
     
      
     
     
          
       <div class="container">
      
     
    
     
      
     
     
              
       <div class="panel">
      
     
    
     
      
     
     
                  
       <div class="content">
      
     
    
     
      
     
     
                      
       <div class="switch">
      
     
    
     
      
     
     
                          
       <h1 id="login">登录
       </h1>
      
     
    
     
      
     
     
                      
       </div>
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
                      
       <form action="">
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
                          
       <div id="userName" class="input" aria-placeholder="用户名">
       <input type="text">
       </div>
      
     
    
     
      
     
     
                          
       <div id="password" class="input" aria-placeholder="密码">
       <input type="password">
       </div>
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
                          
       <p>
      
     
    
     
      
     
     
                              
       <a id="signUp" href="UserSignUp.html" class="input">跳转注册
       </a>
      
     
    
     
      
     
     
                              
       <span>|
       </span>
      
     
    
     
      
     
     
                              
       <a id="forget" href="UserRetrieve.html" class="input">忘记密码？
       </a>
      
     
    
     
      
     
     
                          
       </p>
      
     
    
     
      
     
     
                          
       <button class="button">登录
       </button>
      
     
    
     
      
     
     
                      
       </form>
      
     
    
     
      
     
     
                  
       </div>
      
     
    
     
      
     
     
              
       </div>
      
     
    
     
      
     
     
          
       </div>
      
     
    
     
      
     
     
      
       </body>
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.js">
       
       </script>
      
     
    
     
      
     
     
      
       <script>
       
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
           $(
       '.input input').on(
       'focus',
       function () {
      
     
    
     
      
     
     
      
               $(
       this).parent().addClass(
       'focus');
      
     
    
     
      
     
     
      
           })
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
           $(
       '.input input').on(
       'blur',
       function () {
      
     
    
     
      
     
     
              
       if($(
       this).val() === 
       '')
      
     
    
     
      
     
     
      
                   $(
       this).parent().removeClass(
       'focus');
      
     
    
     
      
     
     
      
           })
      
     
    
     
      
     
     
      
       </script>
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       </html>

styleLogin.css


   
    
     
      
     
     
      
       * {
      
     
    
     
      
     
     
          
       margin: 
       0;
      
     
    
     
      
     
     
          
       padding: 
       0;
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       body {
      
     
    
     
      
     
     
          
       height: 
       100vh;
      
     
    
     
      
     
     
          
       display: flex;
      
     
    
     
      
     
     
          
       align-items: center;
      
     
    
     
      
     
     
          
       justify-content: center;
      
     
    
     
      
     
     
          
       background: 
       url(
       "星空.jpg") no-repeat;
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       .container {
      
     
    
     
      
     
     
          
       position: relative;
      
     
    
     
      
     
     
          
       width: 
       24rem;
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       .panel {
      
     
    
     
      
     
     
          
       position: absolute;
      
     
    
     
      
     
     
          
       top: 
       50%;
      
     
    
     
      
     
     
          
       left: 
       50%;
      
     
    
     
      
     
     
          
       transform: 
       translate(-50%,-50%);
      
     
    
     
      
     
     
          
       background: 
       rgba(0,0,0,.8);
      
     
    
     
      
     
     
          
       display: flex;
      
     
    
     
      
     
     
          
       justify-content: center;
      
     
    
     
      
     
     
          
       width: 
       400px;
      
     
    
     
      
     
     
          
       padding: 
       40px;
      
     
    
     
      
     
     
          
       box-sizing: border-box;
      
     
    
     
      
     
     
          
       box-shadow: 
       0 
       15px 
       25px 
       rgba(0,0,0,.5);
      
     
    
     
      
     
     
          
       border-radius: 
       10px;
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       .switch 
       h1 {
      
     
    
     
      
     
     
          
       text-align: center;
      
     
    
     
      
     
     
          
       font-size: 
       1.4rem;
      
     
    
     
      
     
     
          
       color: 
       rgba(125, 116, 255,.8);
      
     
    
     
      
     
     
          
       border-bottom: 
       rgba(125, 116, 255,.8) solid 
       2px;
      
     
    
     
      
     
     
          
       cursor: default;
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       .input 
       input {
      
     
    
     
      
     
     
          
       outline: none;
      
     
    
     
      
     
     
          
       width: 
       100%;
      
     
    
     
      
     
     
          
       border: none;
      
     
    
     
      
     
     
          
       background: none;
      
     
    
     
      
     
     
          
       border-bottom: .
       1rem solid 
       #7d74ff;
      
     
    
     
      
     
     
          
       color: 
       rgba(37, 215, 202, 0.84);
      
     
    
     
      
     
     
          
       font-size: 
       1rem;
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       .input
       ::after {
      
     
    
     
      
     
     
          
       content: 
       attr(aria-placeholder);
      
     
    
     
      
     
     
          
       position: absolute;
      
     
    
     
      
     
     
          
       left: 
       0;
      
     
    
     
      
     
     
          
       top: -
       20%;
      
     
    
     
      
     
     
          
       font-size: 
       1.1rem;
      
     
    
     
      
     
     
          
       color: 
       rgba(125, 116, 255, 0.44);
      
     
    
     
      
     
     
          
       transition: .
       3s;
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       .input
       .focus
       ::after {
      
     
    
     
      
     
     
          
       top: -
       70%;
      
     
    
     
      
     
     
          
       font-size: 
       1rem;
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       .input
       #forget {
      
     
    
     
      
     
     
          
       color: 
       #7d74ff;
      
     
    
     
      
     
     
          
       font-size: 
       0.8rem;
      
     
    
     
      
     
     
          
       text-decoration: none;
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       .input
       #forget
       :hover {
      
     
    
     
      
     
     
          
       color: 
       rgba(138, 143, 255, 0.4);
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       .input
       #signUp {
      
     
    
     
      
     
     
          
       color: 
       #7d74ff;
      
     
    
     
      
     
     
          
       font-size: 
       0.8rem;
      
     
    
     
      
     
     
          
       text-decoration: none;
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       .input
       #signUp
       :hover {
      
     
    
     
      
     
     
          
       color: 
       rgba(138, 143, 255, 0.4);
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       form 
       p {
      
     
    
     
      
     
     
          
       text-align: center;
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       form 
       span {
      
     
    
     
      
     
     
          
       color: 
       #7d74ff;
      
     
    
     
      
     
     
          
       font-size: 
       0.8rem;
      
     
    
     
      
     
     
          
       cursor: default;
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       form {
      
     
    
     
      
     
     
          
       width: 
       12rem;
      
     
    
     
      
     
     
          
       margin: 
       1rem 
       0 
       0;
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       form 
       .input {
      
     
    
     
      
     
     
          
       position: relative;
      
     
    
     
      
     
     
          
       opacity: 
       1;
      
     
    
     
      
     
     
          
       width: 
       100%;
      
     
    
     
      
     
     
          
       margin: 
       2rem 
       0 
       0;
      
     
    
     
      
     
     
          
       height: 
       42px;
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       form 
       .input
       #userName {
      
     
    
     
      
     
     
          
       margin: 
       3rem 
       0 
       0;
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       form 
       .input
       #password {
      
     
    
     
      
     
     
          
       height: 
       1.6rem;
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       form 
       button {
      
     
    
     
      
     
     
          
       display: block;
      
     
    
     
      
     
     
          
       border: none;
      
     
    
     
      
     
     
          
       outline: none;
      
     
    
     
      
     
     
          
       margin: 
       2rem 
       61px 
       0;
      
     
    
     
      
     
     
          
       width: 
       56px;
      
     
    
     
      
     
     
          
       height: 
       56px;
      
     
    
     
      
     
     
          
       border-radius: 
       50%;
      
     
    
     
      
     
     
          
       background: 
       linear-gradient(90deg, #8a8fff, rgb(216, 174, 255));
      
     
    
     
      
     
     
          
       box-shadow: 
       0 
       0 
       8px 
       #8a8fff;
      
     
    
     
      
     
     
          
       cursor: pointer;
      
     
    
     
      
     
     
      
       }
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       form 
       button
       :hover {
      
     
    
     
      
     
     
          
       border: none;
      
     
    
     
      
     
     
          
       outline: none;
      
     
    
     
      
     
     
          
       margin: 
       2rem -
       7px 
       0;
      
     
    
     
      
     
     
          
       width: 
       100%;
      
     
    
     
      
     
     
          
       height: 
       3.5rem;
      
     
    
     
      
     
     
          
       border-radius: 
       3rem;
      
     
    
     
      
     
     
          
       background: 
       linear-gradient(90deg, rgba(138, 143, 255, 0.75), 
       rgba(216, 174, 255, 0.75));
      
     
    
     
      
     
     
          
       box-shadow: 
       0 
       0 
       8px 
       #8a8fff;
      
     
    
     
      
     
     
          
       cursor: pointer;
      
     
    
     
      
     
     
          
       color: 
       rgba(0,0,0,0.6);
      
     
    
     
      
     
     
          
       transition: .
       4s;
      
     
    
     
      
     
     
      
       }

参考：

https://www.bilibili.com/video/av61650993?t=42

转载：https://blog.csdn.net/hxxjxw/article/details/104926755

查看评论

飞道的博客

飞道的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章

前端——好看的登录页面(二)

* 以上用户言论只代表其个人观点，不代表本网站的观点或立场