AI 助理
备案控制台
开发者社区 云计算 文章 正文

重磅！高颜值好看的登录页面(附源码)

2024-08-22 24
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 重磅！高颜值好看的登录页面(附源码)

1


 传统的后台管理系统界面，可以轻松解锁呀


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>登录</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<img class="bgone" src="https://cdn.nlark.com/yuque/0/2024/jpeg/314488/1718354704713-c94708ba-d149-475a-aa70-fb55246f167b.jpeg" />
<img class="pic" src="https://cdn.nlark.com/yuque/0/2024/png/314488/1718354709316-96ca7b43-ca8c-48f1-9ed3-31d5ad41d71d.png" />
<div class="table">
  <div class="wel">某某 后台登录</div>
  <div class="wel1">MOU MOU XI TONG HUO TAI DENG LU</div>
  <div class="user">
    <div id="yonghu" style=""></div>
    <input type="text" name="" placeholder="用户名" />
  </div>      
  <div class="password">
    <div id="yonghu"></div>
    <input type="password" name="密码" placeholder="●●●●●●"/>
  </div>
  <input class="btn" type="button" name="登录" value="登录" />
</div>
</body>
</html>



*{
    font-family: "微软雅黑";
    font-size: 16px;
    border: 0;
    padding: 0;
    margin: 0;
    color: #666;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.bgone{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;right: 0;left: 0;bottom: 0;margin: auto;
}
.pic{
  width: 492px;
  height: auto;
  position: absolute;
  top:173px;right: 453px;left: 0;bottom: 0;margin: auto;
  z-index: 99999;
}
.table{
  background-color: #FFFFFF;
  width: 960px;
  height: 465px;
  position: absolute;
  top:20%;right: 0;left: 0;bottom: 0;margin: auto;
}
.password{
     position: absolute;
     top: 12.8rem;
     right: 4rem;
     display: flex;
}
.btn{
    position: absolute;
    top: 18.5rem;
    right: 3.9rem;
    border: none;
    color: #fff;
    width: 373px;
    text-align: center;
    background-color: #1592ef;
    text-indent: 0rem;
    border-radius: 10px;
    text-shadow:2px 2px 1px rgba(0, 0, 0, 0.2);
    box-shadow:2px 2px 1px rgba(0, 0, 0, 0.2);
    font-size:20px ;
    height: 50px;
}
.wel{
  width: 960px;
  height: 35px;
  color: #fff;
    font-size: 30px;
    position: absolute;
    top: -7rem;
    text-align: center;
   
    
}.wel1{
  width: 960px;
  height: 35px;
  color: #fff;
    font-size: 12.38px;
    position: absolute;
    top: -4rem;
    text-align: center;
   
}
input{
     height: 55px;
     width: 373px;
     text-indent: 55px;
     outline:none;
     background: #eef6fd;
     border-bottom:2px #d6e7fa solid ;
}
.password input{
  border: 0;
}
.user{
   position: absolute;
     top: 7.8rem;
     right:4rem;
     display: flex;
}
#yonghu img{
  height: 30px;
  position: absolute;
  left: 10px;
  top: 13px;
}

2



<!DOCTYPE html>
<html>
<!-- Head -->
<head>
  <title>登录表单</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
  <style>
    
  </style>
</head>
<body>
  <h1>登录表单</h1>
  <div class="container w3layouts agileits">
    <div class="login w3layouts agileits">
      <h2>登 录</h2>
      <form action="#" method="post">
        <input type="text" Name="Userame" placeholder="用户名" required>
        <input type="password" Name="Password" placeholder="密码" required>
      </form>
      <ul class="tick w3layouts agileits">
        <li>
          <input type="checkbox" id="brand1" value>
          <label for="brand1"><span></span>记住我</label>
        </li>
      </ul>
      <div class="send-button w3layouts agileits">
        <form>
          <input type="submit" value="登 录">
        </form>
      </div>
      <a href="#">记住密码?</a>
      <div class="social-icons w3layouts agileits">
        <p>- 其他方式登录 -</p>
        <ul>
          <li class="qq"><a href="#">
              <span class="icons w3layouts agileits"></span>
              <span class="text w3layouts agileits">QQ</span></a></li>
          <li class="weixin w3ls"><a href="#">
              <span class="icons w3layouts"></span>
              <span class="text w3layouts agileits">微信</span></a></li>
          <li class="weibo aits"><a href="#">
              <span class="icons agileits"></span>
              <span class="text w3layouts agileits">微博</span></a></li>
          <div class="clear"> </div>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
    <div class="register w3layouts agileits">
      <h2>注 册</h2>
      <form action="#" method="post">
        <input type="text" Name="Name" placeholder="用户名" required>
        <input type="text" Name="Email" placeholder="邮箱" required>
        <input type="password" Name="Password" placeholder="密码" required>
        <input type="text" Name="Phone Number" placeholder="手机号码" required>
      </form>
      <div class="send-button w3layouts agileits">
        <form>
          <input type="submit" value="免费注册">
        </form>
      </div>
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
  </div>
</body>
<!-- //Body -->
</html>


***  ：这里是部分源码，源码太长了

ul.tick {
    float: left;
    list-style: none;
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
}
ul.tick li input[type="checkbox"] {
    display: none;
}
ul.tick li input[type="checkbox"]+label {
    position: relative;
    padding-left: 30px;
    border: #F0F8FF;
    display: inline-block;
    font-size: 13px;
    color: #EEE;
}
ul.tick li input[type="checkbox"]+label span:first-child {
    width: 17px;
    height: 17px;
    display: inline-block;
    border: 1px solid #EEE;
    position: absolute;
    top: -3px;
    left: 0;
    bottom: 4px;
}
ul.tick li input[type="checkbox"]:checked+label span:first-child:before {
    content: "";
    background: url(../images/tick.png)no-repeat;
    position: absolute;
    left: 3px;
    top: 3px;
    font-size: 10px;
    width: 10px;
    height: 10px;
}
.social-icons {
    margin-top: 20px;
    text-align: center;
}
.social-icons p {
    color: #CCC;
    margin-bottom: 15px;
}
.social-icons ul li {
    float: left;
    width: 32.9%;
}
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
li.twt {
    margin: 0 2px;
}
.social-icons ul li a {
    display:block;
}
.social-icons ul li a span {
    vertical-align: middle;
    color: #fff;
    font-size: 15px;
}
.social-icons ul li span.icons {
    background: url("../images/i1.png") no-repeat center;
    width: 30px;
    height: 30px;
    display: inline-block;
}
.social-icons ul li.weixin span.icons {
    background: url("../images/weixin.png") no-repeat;
    background-size: 100%;
}
.social-icons ul li.qq span.icons {
    background: url("../images/QQ.png") no-repeat;
    background-size: 100%;
}
.social-icons ul li.weibo span.icons {
    /*--w3layouts--*/
    /*--agileits--*/
    background: url("../images/weibo.png") no-repeat;
    background-size: 100%;
}
.social-icons ul li a:hover span.icons {
    transform: rotatey(360deg);
    -webkit-transform: rotatey(360deg);
    -o-transform: rotatey(360deg);
    -moz-transform: rotatey(360deg);
    -ms-transform: rotatey(360deg);
    transition: .5s all;
}
input[type="text"], input[type="password"] {
    width: 93.4%;
    margin-bottom: 20px;
    padding: 10px;
    float: left;
    background-color: transparent;
    border: none;
    font-size: 15px;
    border-bottom: 1px solid rgba(238, 238, 238, 0.41);
    outline: none;
    color: #FFF;
}
.send-button {
    margin-bottom: 20px;
}
.send-button input[type="submit"] {
    width: 60%;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 100;
    background-color: transparent;
    color: #CCC;
    border: 1px solid rgba(238, 238, 238, 0.41);
    border-width: thin;
    cursor: pointer;
    outline: none;
    transition:0.5s all;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    -o-transition:0.5s all;
    -ms-transition:0.5s all;
    text-decoration: none;
}

3


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
    <style>
        /* 清除浏览器默认边距，
使边框和内边距的值包含在元素的width和height内 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 使用flex布局，让内容垂直和水平居中 */
section {
    /* 相对定位 */
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}
/* 背景颜色 */
section .color {
    /* 绝对定位 */
    position: absolute;
    /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
    filter: blur(200px);
}
/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */
section .color:nth-child(1) {
    top: -350px;
    width: 600px;
    height: 600px;
    background: #ff359b;
}
section .color:nth-child(2) {
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: #fffd87;
}
section .color:nth-child(3) {
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background: #00d2ff;
}
.box {
    position: relative;
}
/* 背景圆样式 */
.box .circle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    /* backdrop-filter属性为一个元素后面区域添加模糊效果 */
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    /* 使用filter(滤镜) 属性，改变颜色。
    hue-rotate(deg) 给图像应用色相旋转
    calc() 函数用于动态计算长度值
    var() 函数调用自定义的CSS属性值x*/
    filter: hue-rotate(calc(var(--x) * 70deg));
    /* 调用动画animate，需要10s完成动画，
    linear表示动画从头到尾的速度是相同的，
    infinite指定动画应该循环播放无限次*/
    animation: animate 10s linear infinite;
    /* 动态计算动画延迟几秒播放 */
    animation-delay: calc(var(--x) * -1s);
}
/* 背景圆动画 */
@keyframes animate {
    0%, 100%, {
        transform: translateY(-50px);
    }
    50% {
        transform: translateY(50px);
    }
}
.box .circle:nth-child(1) {
    top: -50px;
    right: -60px;
    width: 100px;
    height: 100px;
}
.box .circle:nth-child(2) {
    top: 150px;
    left: -100px;
    width: 120px;
    height: 120px;
    z-index: 2;
}
.box .circle:nth-child(3) {
    bottom: 50px;
    right: -60px;
    width: 80px;
    height: 80px;
    z-index: 2;
}
.box .circle:nth-child(4) {
    bottom: -80px;
    left: 100px;
    width: 60px;
    height: 60px;
}
.box .circle:nth-child(5) {
    top: -80px;
    left: 140px;
    width: 60px;
    height: 60px;
}
/* 登录框样式 */
.conMain {
    position: relative;
    width: 400px;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.form {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px;
}
/* 登录标题样式 */
.form h2 {
    position: relative;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
    cursor: pointer;
}
/* 登录标题的下划线样式 */
.form h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0px;
    height: 3px;
    background: #fff;
    transition: 0.5s;
}
.form h2:hover:before {
    width: 53px;
}
.form .inputBox {
    width: 100%;
    margin-top: 20px;
}
/* 输入框样式 */
.form .inputBox input {
    width: 100%;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    border: none;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.form .inputBox input::placeholder {
    color: #fff;
}
/* 登录按钮样式 */
.form .inputBox input[type="submit"] {
    background: #fff;
    color: #666;
    max-width: 100px;
    margin-bottom: 20px;
    font-weight: 600;
    cursor: pointer;
}
.forget {
    margin-top: 6px;
    color: #fff;
    letter-spacing: 1px;
}
.forget a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
    </style>
    <title> </title>
</head>
<body>
    <section>
        <!-- 背景颜色 -->
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <div class="box">
            <!-- 背景圆 -->
            <div class="circle" style="--x:0"></div>
            <div class="circle" style="--x:1"></div>
            <div class="circle" style="--x:2"></div>
            <div class="circle" style="--x:3"></div>
            <div class="circle" style="--x:4"></div>
            <!-- 登录框 -->
            <div class="conMain">
                <div class="form">
                    <h2>登录</h2>
                    <form>
                        <div class="inputBox">
                            <input type="text" placeholder="姓名">
                        </div>
                        <div class="inputBox">
                            <input type="password" placeholder="密码">
                        </div>
                        <div class="inputBox">
                            <input type="submit" value="登录">
                        </div>
                        <p class="forget">忘记密码?<a href="#">
                                点击这里
                            </a></p>
                        <p class="forget">没有账户?<a href="#">
                                注册
                            </a></p>
                    </form>
                </div>
            </div>
        </div>
    </section>
</body>
</html>


4



<!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>登陆页面</title>
    <style>
        body {
          padding: 0;
          margin: 0;
          height: 100vh;
          display: flex;
          justify-content: center;
          background-image: linear-gradient(#a18cd1 0%, #fbc2eb 100%);
          background-size: cover;
          flex: 1;
          align-items: center;
        }
        .login {
          text-align: center;
          margin: 0 auto;
          width: 600px;
          height: 520px;
          background-color: rgba(87, 86, 86, 0.2);
          border-radius: 25px;
          box-shadow: 5px 2px 35px -7px #ff9a9e;
        }
        .login h2 {
          margin-top: 40px;
          color: aliceblue;
          font-weight: 100;
        }
        .login_form {
          padding: 20px;
        }
        .login_form span {
          color: rgb(131, 220, 255);
          font-size: 18px;
          font-weight: 100;
        }
        .login_form input {
          background-color: transparent;
          width: 320px;
          padding: 2px;
          text-indent: 2px;
          color: white;
          font-size: 20px;
          height: 45px;
          margin: 30px 30px 30px 5px;
          outline: none;
          border: 0;
          border-bottom: 1px solid rgb(131, 220, 255);
        }
        input::placeholder {
          color: #fbc2eb;
          font-weight: 100;
          font-size: 18px;
          font-style: italic;
        }
        .login_btn {
          background-color: rgba(255, 255, 255, 0.582);
          border: 1px solid rgb(190, 225, 255);
          padding: 10px;
          width: 240px;
          height: 60px;
          border-radius: 30px;
          font-size: 30px;
          color: rgb(100, 183, 255);
          font-weight: 100;
          margin-top: 15px;
        }
        .login_btn:hover {
          box-shadow: 2px 2px 15px 2px rgb(190, 225, 255);
          background-color: transparent;
          color: white; /* 选择动画 */
          animation: login_mation 0.5s;
        } /* 定义动画 */
        @keyframes login_mation {
          from {
            background-color: rgba(255, 255, 255, 0.582);
            box-shadow: 0px 0px 15px 2px rgb(190, 225, 255);
          }
          to {
            background-color: transparent;
            color: white;
            box-shadow: 2px 2px 15px 2px rgb(190, 225, 255);
          }
        }
      </style>
    
  </head>
  <body>
    <div class="login">
      <h2>登陆\注册</h2>
      <div class="login_form">
        <span>账号：</span>
        <input type="text" placeholder="请输入账号" />
        <br />
        <span>密码：</span>
        <input type="password" placeholder="请输入密码" />
      </div>
      <div class="btn">
        <button class="login_btn" onclick="login()">
          登 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录
        </button>
      </div>
    </div>
  </body>
  <script>
    function login() {
      console.log("登录按钮点击了");
    }
  </script>
  
</html>
游客fz577umxdejsg
目录
相关文章
游客pjff74zls2kpw
|
域名解析 小程序 Linux
朋友圈超火的盲盒交友小程序，完整搭建教程及源码分享~（多图）
朋友圈超火的盲盒交友小程序，完整搭建教程及源码分享~（多图）
游客pjff74zls2kpw
893 0
朋友圈超火的盲盒交友小程序，完整搭建教程及源码分享~（多图）
游客fz577umxdejsg
|
27天前
|
前端开发
七夕特效惊艳全场！HTML+CSS带你DIY酷炫表白神器
七夕特效惊艳全场！HTML+CSS带你DIY酷炫表白神器
游客fz577umxdejsg
26 2
游客fz577umxdejsg
|
27天前
|
前端开发 UED
登录页也酷炫：CSS动画效果，打造非凡第一印象！
登录页也酷炫：CSS动画效果，打造非凡第一印象！
游客fz577umxdejsg
24 0
祈澈菇凉
|
10月前
|
程序员
技术文章精美配图模板网站推荐-创客贴
技术文章精美配图模板网站推荐-创客贴
祈澈菇凉
42 0
游客7ak5wlcievars
|
前端开发 JavaScript
3D魔方小游戏（附源码）
一说到魔方 想必大家都熟悉的不能再熟悉了 自己或者曾今自己的朋友非常喜欢玩的一款游戏 言归正卷 那么实用前端的技术怎么实现3D的魔方制作呢 从以下几个方面就不难发现 前端实现3D魔方都得需要用上这些技术栈
游客7ak5wlcievars
269 0
3D魔方小游戏（附源码）
q4qlc6vqsegx4
|
前端开发
仿王者荣耀网页-前端网页技术设计完整精美源码HTML+CSS+JS
仿王者荣耀网页-前端网页技术设计完整精美源码HTML+CSS+JS
q4qlc6vqsegx4
387 0
仿王者荣耀网页-前端网页技术设计完整精美源码HTML+CSS+JS
q4qlc6vqsegx4
|
移动开发 前端开发
动漫网站-前端网页技术精美网站源码HTML+CSS+JS
动漫网站-前端网页技术精美网站源码HTML+CSS+JS
q4qlc6vqsegx4
233 0
动漫网站-前端网页技术精美网站源码HTML+CSS+JS
aliyun6399491274
|
移动开发 前端开发 安全
制作超美的个人网页（附源码带音乐
制作超美的个人网页（附源码带音乐
aliyun6399491274
182 0
制作超美的个人网页（附源码带音乐
默海笑
|
JavaScript 前端开发
仿网易云项目笔记
仿网易云项目笔记
默海笑
145 0
村雨遥
|
Java
新鲜出炉的点菜系统（附源码）
新鲜出炉的点菜系统（附源码）
村雨遥
230 0
新鲜出炉的点菜系统（附源码）

热门文章

最新文章

  • 1
    不做会死！互联网时代的企业必定都要实现中台
  • 2
    R沟通｜Rmarkdown教程（2）
  • 3
    网络视频直播平台用户调查该从哪几个方面入手
  • 4
    救灾轻装上阵！Qwake AR头显告诉你什么叫科技强兵
  • 5
    iptables
  • 6
    VTP与ACL
  • 7
    怎样防止IE中毒-你的IE还在裸奔吗
  • 8
    eclipse下清除项目的svn信息
  • 9
    世界黑客大师赛在京开战 中日美俄等十国战队角逐冠军
  • 10
    tomcat的realm域
  • 1
    Android经典面试题之Kotlin的==和===有什么区别？
    149
  • 2
    aliyun开博第一篇20240917
    145
  • 3
    Python 练习实例58
    139
  • 4
    Python 练习实例57
    135
  • 5
    Python 练习实例56
    133
  • 6
    使用Python实现深度学习模型：智能家电控制与优化
    37
  • 7
    阿里云SSL证书收费版和免费版SSL有什么区别？全方位对比
    32
  • 8
    常用的运维工具：基本的命令行工具详解（grep, awk, sed）
    26
  • 9
    JSONP 教程
    19
  • 10
    jQuery - noConflict() 方法
    20

    • 相关课程

    更多
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • 相册服务中的故事生成算法介绍
  • 智能创作赛（复赛）：相册应用中的视频故事生成算法介绍
  • 智能创作赛（初赛）：相册应用中的故事生成算法介绍
  • 场景实践- 新手玩转云计算-创建炫酷的简历网页
  • 云上建站快速入门-博客、论坛、CMS、电子商务网站统统搞定

    • 相关电子书

    更多
  • IOS开发者必读资讯
  • 《 IOS开发者必读资讯》
  • 优酷质保秘籍

    • 相关实验场景

    更多
  • 奥运时刻！零代码生成奥运风格AI写真。
  • 搭建微信小程序
  • 在PAI ArtLab一键实现欧洲杯粉丝专属贴纸制作
  • 函数计算部署AI艺术字应用，生成新春文字头像
  • 2048小游戏
  • 收银台的场景化界面实践
    • 下一篇
    基于LNMP搭建WordPress