动/静态网页登录现成代码

原创已于 2024-07-02 22:26:12 修改 · 610 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#html #css3 #css #前端

于 2024-07-02 20:38:06 首次发布

静态页面代码

<!DOCTYPE html>

<html>

<head>

<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>

<p class="desc">WELCOME LOGIN</p>

</p>

</form>

</div>

<g transform="

rotate(0 960 540)

translate(-0 -0)

scale(1)

<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>

<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>

<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>

</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>