流星雨背景登录页面展示

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
  <style>
    body {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: "Anton", sans-serif;
  justify-content: center;
  align-items: center;
}

.night {
  position: relative;
  width: 100%;
  height: 200%;
  transform: rotateZ(139deg);
}

.shooting_star {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2px;
  background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
  border-radius: 999px;
  filter: drop-shadow(0 0 6px #699bff);
  -webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
  animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}

.shooting_star::before {
  content: "";
  position: absolute;
  top: calc(50% - 1px * 2);
  right: 0;
  height: 2px;
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
  transform: translateX(50%) rotateZ(45deg);
  border-radius: 100%;
  -webkit-animation: shining 3000ms ease-in-out infinite;
  animation: shining 3000ms ease-in-out infinite;
}

.shooting_star::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px * 2);
  right: 0;
  height: 2px;
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
  transform: translateX(50%) rotateZ(45deg);
  border-radius: 100%;
  -webkit-animation: shining 3000ms ease-in-out infinite;
  animation: shining 3000ms ease-in-out infinite;
  transform: translateX(50%) rotateZ(-45deg);
}

.shooting_star:nth-child(1) {
  top: calc(50% - -4px * 2);
  left: calc(50% - 248px);
  -webkit-animation-delay: 3060ms;
  animation-delay: 3060ms;
}

.shooting_star:nth-child(1)::before,
.shooting_star:nth-child(1)::after {
  -webkit-animation-delay: 3060ms;
  animation-delay: 3060ms;
}

.shooting_star:nth-child(2) {
  top: calc(50% - 180px * 2);
  left: calc(50% - 166px);
  -webkit-animation-delay: 4693ms;
  animation-delay: 4693ms;
}

.shooting_star:nth-child(2)::before,
.shooting_star:nth-child(2)::after {
  -webkit-animation-delay: 4693ms;
  animation-delay: 4693ms;
}

.shooting_star:nth-child(3) {
  top: calc(50% - -88px * 2);
  left: calc(50% - 136px);
  -webkit-animation-delay: 1178ms;
  animation-delay: 1178ms;
}

.shooting_star:nth-child(3)::before,
.shooting_star:nth-child(3)::after {
  -webkit-animation-delay: 1178ms;
  animation-delay: 1178ms;
}

.shooting_star:nth-child(4) {
  top: calc(50% - 92px * 2);
  left: calc(50% - 92px);
  -webkit-animation-delay: 9285ms;
  animation-delay: 9285ms;
}

.shooting_star:nth-child(4)::before,
.shooting_star:nth-child(4)::after {
  -webkit-animation-delay: 9285ms;
  animation-delay: 9285ms;
}

.shooting_star:nth-child(5) {
  top: calc(50% - 89px * 2);
  left: calc(50% - 92px);
  -webkit-animation-delay: 5475ms;
  animation-delay: 5475ms;
}

.shooting_star:nth-child(5)::before,
.shooting_star:nth-child(5)::after {
  -webkit-animation-delay: 5475ms;
  animation-delay: 5475ms;
}

.shooting_star:nth-child(6) {
  top: calc(50% - -164px * 2);
  left: calc(50% - 27px);
  -webkit-animation-delay: 9220ms;
  animation-delay: 9220ms;
}

.shooting_star:nth-child(6)::before,
.shooting_star:nth-child(6)::after {
  -webkit-animation-delay: 9220ms;
  animation-delay: 9220ms;
}

.shooting_star:nth-child(7) {
  top: calc(50% - -136px * 2);
  left: calc(50% - 243px);
  -webkit-animation-delay: 7942ms;
  animation-delay: 7942ms;
}

.shooting_star:nth-child(7)::before,
.shooting_star:nth-child(7)::after {
  -webkit-animation-delay: 7942ms;
  animation-delay: 7942ms;
}

.shooting_star:nth-child(8) {
  top: calc(50% - 174px * 2);
  left: calc(50% - 75px);
  -webkit-animation-delay: 8312ms;
  animation-delay: 8312ms;
}

.shooting_star:nth-child(8)::before,
.shooting_star:nth-child(8)::after {
  -webkit-animation-delay: 8312ms;
  animation-delay: 8312ms;
}

.shooting_star:nth-child(9) {
  top: calc(50% - 138px * 2);
  left: calc(50% - 281px);
  -webkit-animation-delay: 6475ms;
  animation-delay: 6475ms;
}

.shooting_star:nth-child(9)::before,
.shooting_star:nth-child(9)::after {
  -webkit-animation-delay: 6475ms;
  animation-delay: 6475ms;
}

.shooting_star:nth-child(10) {
  top: calc(50% - 25px * 2);
  left: calc(50% - 25px);
  -webkit-animation-delay: 7118ms;
  animation-delay: 7118ms;
}

.shooting_star:nth-child(10)::before,
.shooting_star:nth-child(10)::after {
  -webkit-animation-delay: 7118ms;
  animation-delay: 7118ms;
}

.shooting_star:nth-child(11) {
  top: calc(50% - 184px * 2);
  left: calc(50% - 198px);
  -webkit-animation-delay: 8570ms;
  animation-delay: 8570ms;
}

.shooting_star:nth-child(11)::before,
.shooting_star:nth-child(11)::after {
  -webkit-animation-delay: 8570ms;
  animation-delay: 8570ms;
}

.shooting_star:nth-child(12) {
  top: calc(50% - -194px * 2);
  left: calc(50% - 283px);
  -webkit-animation-delay: 1026ms;
  animation-delay: 1026ms;
}

.shooting_star:nth-child(12)::before,
.shooting_star:nth-child(12)::after {
  -webkit-animation-delay: 1026ms;
  animation-delay: 1026ms;
}

.shooting_star:nth-child(13) {
  top: calc(50% - 169px * 2);
  left: calc(50% - 42px);
  -webkit-animation-delay: 4957ms;
  animation-delay: 4957ms;
}

.shooting_star:nth-child(13)::before,
.shooting_star:nth-child(13)::after {
  -webkit-animation-delay: 4957ms;
  animation-delay: 4957ms;
}

.shooting_star:nth-child(14) {
  top: calc(50% - -114px * 2);
  left: calc(50% - 139px);
  -webkit-animation-delay: 5748ms;
  animation-delay: 5748ms;
}

.shooting_star:nth-child(14)::before,
.shooting_star:nth-child(14)::after {
  -webkit-animation-delay: 5748ms;
  animation-delay: 5748ms;
}

.shooting_star:nth-child(15) {
  top: calc(50% - 140px * 2);
  left: calc(50% - 283px);
  -webkit-animation-delay: 2809ms;
  animation-delay: 2809ms;
}

.shooting_star:nth-child(15)::before,
.shooting_star:nth-child(15)::after {
  -webkit-animation-delay: 2809ms;
  animation-delay: 2809ms;
}

.shooting_star:nth-child(16) {
  top: calc(50% - 72px * 2);
  left: calc(50% - 88px);
  -webkit-animation-delay: 8661ms;
  animation-delay: 8661ms;
}

.shooting_star:nth-child(16)::before,
.shooting_star:nth-child(16)::after {
  -webkit-animation-delay: 8661ms;
  animation-delay: 8661ms;
}

.shooting_star:nth-child(17) {
  top: calc(50% - 40px * 2);
  left: calc(50% - 273px);
  -webkit-animation-delay: 8037ms;
  animation-delay: 8037ms;
}

.shooting_star:nth-child(17)::before,
.shooting_star:nth-child(17)::after {
  -webkit-animation-delay: 8037ms;
  animation-delay: 8037ms;
}

.shooting_star:nth-child(18) {
  top: calc(50% - 176px * 2);
  left: calc(50% - 27px);
  -webkit-animation-delay: 826ms;
  animation-delay: 826ms;
}

.shooting_star:nth-child(18)::before,
.shooting_star:nth-child(18)::after {
  -webkit-animation-delay: 826ms;
  animation-delay: 826ms;
}

.shooting_star:nth-child(19) {
  top: calc(50% - -164px * 2);
  left: calc(50% - 229px);
  -webkit-animation-delay: 1822ms;
  animation-delay: 1822ms;
}

.shooting_star:nth-child(19)::before,
.shooting_star:nth-child(19)::after {
  -webkit-animation-delay: 1822ms;
  animation-delay: 1822ms;
}

.shooting_star:nth-child(20) {
  top: calc(50% - 85px * 2);
  left: calc(50% - 161px);
  -webkit-animation-delay: 5305ms;
  animation-delay: 5305ms;
}

.shooting_star:nth-child(20)::before,
.shooting_star:nth-child(20)::after {
  -webkit-animation-delay: 5305ms;
  animation-delay: 5305ms;
}

.shooting_star:nth-child(21) {
  top: calc(50% - 100px * 2);
  left: calc(50% - 300px);
  -webkit-animation-delay: 4305ms;
  animation-delay: 4305ms;
}

.shooting_star:nth-child(21)::before,
.shooting_star:nth-child(21)::after {
  -webkit-animation-delay: 4305ms;
  animation-delay: 4305ms;
}

@-webkit-keyframes tail {
  0% {
    width: 0;
  }

  30% {
    width: 100px;
  }

  100% {
    width: 0;
  }
}

@keyframes tail {
  0% {
    width: 0;
  }

  30% {
    width: 100px;
  }

  100% {
    width: 0;
  }
}

@-webkit-keyframes shining {
  0% {
    width: 0;
  }

  50% {
    width: 30px;
  }

  100% {
    width: 0;
  }
}

@keyframes shining {
  0% {
    width: 0;
  }

  50% {
    width: 30px;
  }

  100% {
    width: 0;
  }
}

@-webkit-keyframes shooting {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(300px);
  }
}

@keyframes shooting {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(300px);
  }
}

@-webkit-keyframes sky {
  0% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(405deg);
  }
}

@keyframes sky {
  0% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(405deg);
  }
}
.night{
  position: absolute;
  z-index: -1;
}


/* 登录板块 */
html {
  height: 100%;
}



.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  padding: 40px;
  /* 登录框居中 */
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .8);
  /* css3新特性，任何内外边距和边框都将在已设定的宽度和高度内进行绘制 */
  box-sizing: border-box;
  /* 添加阴影 */
  box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
  /* 边框圆角 */
  border-radius: 10px;
}

.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}

.login-box .user-box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  /* 元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素 */
  pointer-events: none;
  transition: .5s;
}

.login-box .user-box input:focus~label,
.login-box .user-box input:valid~label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

/* .login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #2cacb1;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px
} */
.login-box a:nth-of-type(1){
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #2cacb1;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px
}

.login-box a:nth-of-type(2){
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #2cacb1;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  margin-left: 200px;
  letter-spacing: 4px
}

.login-box a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 20px #03e9f4;
}

/* 按钮特效 -Start */
.login-box a span {
  position: absolute;
  display: block;
}

.login-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
      left: -100%;
  }

  50%,
  100% {
      left: 100%;
  }
}

.login-box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
      top: -100%;
  }

  50%,
  100% {
      top: 100%;
  }
}

.login-box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
      right: -100%;
  }

  50%,
  100% {
      right: 100%;
  }
}

.login-box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}


@keyframes btn-anim4 {
  0% {
      bottom: -100%;
  }

  50%,
  100% {
      bottom: 100%;
  }
}

/* 按钮特效End */
  </style>
</head>

<body translate="no">
  <div class="night">
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
    <div class="shooting_star"></div>
  </div>
  <div class="login-box" >
    <h2>用户登录</h2>
    <form>
        <div class="user-box">
            <input type="text" name="" required="">
            <label>账号</label>
        </div>
        <div class="user-box">
            <input type="password" name="" required="">
            <label>密码</label>
        </div>
        <a href="#">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            登录
        </a>
        <a href="#">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          立即注册
      </a>
    </form>
</div>
</body>

</html>
posted @ 2022-10-25 22:55  是小刘同学呀  阅读(68)  评论(0)    收藏  举报