简单的登录页分享

最新推荐文章于 2024-09-25 16:29:08 发布

技术造

最新推荐文章于 2024-09-25 16:29:08 发布

阅读量243

点赞数 9

文章标签： css css3 html

本文链接：https://blog.csdn.net/xuzhentao520/article/details/138964298

版权

通常情况下做一个登陆页面或者注册页面，背景也是重要的一部分，一个好看的背景能大幅度提升页面的颜值，本文记录几种常用的页面背景，附带登录表单源码，你可以一键复制去使用。

以下是静态页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        height: 100vh;
      }

      .Box {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 550px;
        height: 330px;
        display: flex;
      }


      form {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);
        width: 80%;
        text-align: center;
      }

      h3 {
        font-size: 28px;
        margin-bottom: 20px;
        letter-spacing: 5px;
        color: #fff;
      }

      input {
        width: 100%;
        height: 38px;
        border: 2px solid #ffffff;
        background-color: transparent;
        padding-left: 10px;
        font-size: 12px;
        color: #ffffff;
        margin-bottom: 15px;
        outline: none;
      }

      input::placeholder {
        color: #fff;
      }

      .desc {
        margin: 0px 20px 30px;
        text-align: center;
        font-size: 12px;
        color: #d6d6d6;
      }

      .loginBtn {
        cursor: pointer;
        width: 100%;
        line-height: 36px;
        text-align: center;
        font-size: 15px;
        color: #000000;
        background: rgb(255, 255, 255);
        outline: none;
        border: none;
        margin-top: 10px;
        transition: all 0.1s;
      }

      .loginBtn:hover {
        border: #000000 1px solid;
        font-weight: 550;
        letter-spacing: 6px;
      }

      .no {
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        text-align: center;
        font-size: 12px;
        color: #c6c6c6;
      }
    </style>
  </head>
  <body>
    <div class="Box">
      <form action="">
        <h3>欢迎登录</h3>
        <p class="desc">WELCOME LOGIN</p>
        <input type="text" placeholder="请输入账号" required>
        <input type="password" placeholder="请输入密码" required>
        <input type="submit" class="loginBtn" value="立即登录"></button>
        <p class="no">
          <span>忘记密码</span>
          <span>没有账号？立即注册</span>
        </p>
      </form>
    </div>


    <!-- 静态svg背景 -->
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
      <g transform="
              rotate(0 960 540)
              translate(-0 -0)
              scale(1)
            ">
        <rect width="1920" height="1080" fill="rgb(145, 145, 145)"></rect>
        <g transform="translate(0, 0)">
          <path fill="rgb(97, 97, 97)" fill-opacity="1"
            d="M0,352.943L45.714,350.075C91.429,347.207,182.857,341.471,274.286,340.581C365.714,339.692,457.143,343.65,548.571,344.095C640,344.54,731.429,341.472,822.857,303.183C914.286,264.894,1005.714,191.383,1097.143,185.175C1188.571,178.967,1280,240.06,1371.429,221.336C1462.857,202.612,1554.286,104.069,1645.714,98.48C1737.143,92.892,1828.571,180.258,1874.286,223.941L1920,267.624L1920,1080L1874.286,1080C1828.571,1080,1737.143,1080,1645.714,1080C1554.286,1080,1462.857,1080,1371.429,1080C1280,1080,1188.571,1080,1097.143,1080C1005.714,1080,914.286,1080,822.857,1080C731.429,1080,640,1080,548.571,1080C457.143,1080,365.714,1080,274.286,1080C182.857,1080,91.429,1080,45.714,1080L0,1080Z">
          </path>
        </g>
        <g transform="translate(0, 360)">
          <path fill="rgb(48, 48, 48)" fill-opacity="1"
            d="M0,136.093L45.714,117.434C91.429,98.774,182.857,61.455,274.286,80.719C365.714,99.983,457.143,175.829,548.571,189.505C640,203.181,731.429,154.687,822.857,130.414C914.286,106.141,1005.714,106.09,1097.143,141.274C1188.571,176.458,1280,246.877,1371.429,284.697C1462.857,322.517,1554.286,327.739,1645.714,284.675C1737.143,241.611,1828.571,150.263,1874.286,104.589L1920,58.914L1920,720L1874.286,720C1828.571,720,1737.143,720,1645.714,720C1554.286,720,1462.857,720,1371.429,720C1280,720,1188.571,720,1097.143,720C1005.714,720,914.286,720,822.857,720C731.429,720,640,720,548.571,720C457.143,720,365.714,720,274.286,720C182.857,720,91.429,720,45.714,720L0,720Z">
          </path>
        </g>
        <g transform="translate(0, 720)">
          <path fill="rgb(0, 0, 0)" fill-opacity="1"
            d="M0,107.121L45.714,134.307C91.429,161.493,182.857,215.866,274.286,254.33C365.714,292.794,457.143,315.35,548.571,300.514C640,285.679,731.429,233.452,822.857,180.313C914.286,127.174,1005.714,73.123,1097.143,43.365C1188.571,13.606,1280,8.141,1371.429,41.079C1462.857,74.017,1554.286,145.358,1645.714,167.782C1737.143,190.206,1828.571,163.713,1874.286,150.467L1920,137.221L1920,360L1874.286,360C1828.571,360,1737.143,360,1645.714,360C1554.286,360,1462.857,360,1371.429,360C1280,360,1188.571,360,1097.143,360C1005.714,360,914.286,360,822.857,360C731.429,360,640,360,548.571,360C457.143,360,365.714,360,274.286,360C182.857,360,91.429,360,45.714,360L0,360Z">
          </path>
        </g>
      </g>
    </svg>
  </body>
</html>

这种背景可以拖动一键生成，颜色可以自己修改，你也可以用在网站其他页面，点击访问

动态背景

页面源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/bubbly-bg@0.2.3/dist/bubbly-bg.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        height: 100vh;
      }

      .Box {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 550px;
        height: 330px;
        display: flex;
      }


      form {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);
        width: 80%;
        text-align: center;
      }

      h3 {
        font-size: 28px;
        margin-bottom: 20px;
        letter-spacing: 5px;
        color: #fff;
      }

      input {
        width: 100%;
        height: 38px;
        border: 2px solid #ffffff;
        background-color: transparent;
        padding-left: 10px;
        font-size: 12px;
        color: #ffffff;
        margin-bottom: 15px;
        outline: none;
      }

      input::placeholder {
        color: #fff;
      }

      .desc {
        margin: 0px 20px 30px;
        text-align: center;
        font-size: 12px;
        color: #d6d6d6;
      }

      .loginBtn {
        cursor: pointer;
        width: 100%;
        line-height: 36px;
        text-align: center;
        font-size: 15px;
        color: #000000;
        background: rgb(255, 255, 255);
        outline: none;
        border: none;
        margin-top: 10px;
        transition: all 0.1s;
      }

      .loginBtn:hover {
        border: #000000 1px solid;
        font-weight: 550;
        letter-spacing: 6px;
      }

      .no {
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        text-align: center;
        font-size: 12px;
        color: #c6c6c6;
      }
    </style>
  </head>
  <body>
    <div class="Box">
      <form action="">
        <h3>欢迎登录</h3>
        <p class="desc">WELCOME LOGIN</p>
        <input type="text" placeholder="请输入账号" required>
        <input type="password" placeholder="请输入密码" required>
        <input type="submit" class="loginBtn" value="立即登录"></button>
        <p class="no">
          <span>忘记密码</span>
          <span>没有账号？立即注册</span>
        </p>
      </form>
    </div>
  </body>
</html>

<script>
  // 动态背景
  
  // 蓝色
  bubbly();

  // 紫色
  // bubbly({
  // colorStart: "#4c004c",
  // colorStop: "#1a001a",
  // bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`
  // });

  // Black/red
  // bubbly({
  // colorStart: "#111",
  // colorStop: "#422",
  // bubbleFunc: () => `hsla(0, 100%, 50%, ${Math.random() * 0.25})`
  // });
</script>

这个背景也是使用了一个库文件bubbly-bg，代码中的js部分有注释，气泡的颜色也可以自己调整更换，其他背景可以去bubbly-bg网站看下，点击访问