css实现好看登陆界面

最新推荐文章于 2024-05-31 11:20:07 发布

Gwarrior

最新推荐文章于 2024-05-31 11:20:07 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签： css html5 jquery login

本文链接：https://blog.csdn.net/qq_46582026/article/details/120339911

版权

前端专栏收录该内容

5 篇文章 4 订阅

订阅专栏

在这里插入图片描述

动画方面使用了点JQuery的内容，都很简单。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2815799_wbova6arjq.css">
  <style>
    * {
      padding: 0;
      margin: 0;
    }
   
    .box {
      width: 600px;
      height: 300px;
      display: flex;
      flex-direction: column;
      margin: 200px auto;
      color: white;
    }
    .click {
      width: 100%;
      height: 20%;
      line-height: 60px;
      text-align: center;
      background-color: pink;
    }
    .input {
      height: 80%;
      border: 1px solid pink;
      position: relative;
    }
    input {
      display: block;
      width: 180px;
      margin: 40px auto;
      outline: none;
      border: 0px;
      background-color: transparent;
      border-bottom: 2px solid pink;
      font-size: 18px;
      z-index: 999;
    }
    span {
      width: 32px;
      height: 0px;
      position: absolute;
      display: block;
      left: 209px;
      top: 39px;
      color: #ccc;
    }
    #password {
      top: 103px;
    }
    button {
      position: relative;
      display: block;
      margin: auto;
      width: 75px;
      height: 35px;
      border: 0;
      transition: all 0.8s ease-in-out 0.3s;
      background-color: white;
    }
    button:hover {
      background-color: pink;
      color: white;
    }
    button::before,button::after {
      position: absolute;
      content: '';
      width: 13px;
      height: 13px;
      border: 2px solid pink;
      transition: width 0.2s ease-in-out 0.15s;
    }
    button::before {
      left: 0;
      top: 0;
      border-right: 0;
      border-bottom: 0;
    }
    button::after {
      right: 0;
      bottom: 0;
      border-top: 0;
      border-left: 0;
    }
    button:hover::before {
      width: 73px;
      height: 33px;
    }
    button:hover::after {
      width: 73px;
      height: 33px;
    }
    
    .icon-icon-4:before {
      content: "\e600";
      position: absolute;
      left: 439px;
      top: 266px;
      color: pink;
    }
    .icon-mima:before {
      content: "\e69e";
      position: absolute;
      left: 439px;
      top: 331px;
      color: pink;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="click">点击收起/下拉</div>
    <div class="input">
      <input type="text" name="" id="">
      <span>账号</span>
      <span id="password">密码</span>
      <input type="password" name="" id="">
      <button>确定</button>
    </div>

    <span class="iconfont icon-icon-4 login"></span>
    <span class="iconfont icon-mima password"></span>
    
  </div>

 
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    $(function() {
      // 字体颜色变为pink色
      $('.input input').eq(0).click(function() {
        $('span').eq(0).animate({top: '19px'},function() {
          $(this)[0].style.color = "pink";
        });
      });

      $('.input input').eq(1).click(function() {
        $('span').eq(1).animate({top: '83px'},function() {
          $(this)[0].style.color = "pink";
        });
      });

      var flag = true;
      $('.click').click(function() {
        $('.input').slideToggle();
        if(flag) {
          $('.box span').hide();
          flag = false;
        } else {
          $('.box span').show();
          flag = true;
        }
        
      });

    })
  </script>
</body>
</html>

Gwarrior

关注

1
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
css实现好看登陆界面

动画方面使用了点JQuery的内容，都很简单。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
复制链接

扫一扫