写一个光线粒子充满科技感的前端登陆界面

好的，让我来为您展示一个充满科技感的前端登陆界面吧。

首先，我们需要一个背景，可以选择一个科技感十足的图片或者视频作为背景。这里我选择了一个动态的背景视频。可以通过CSS实现：

body {
  background: #000;
}

.video-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.video-bg video {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

然后，我们需要一个登陆框。这里我选择了一个简单的表单，并添加了一些动画效果和光线粒子效果。可以通过CSS和JavaScript实现：

<div class="login-container">
  <form>
    <h1>Login</h1>
    <div class="input-box">
      <input type="text" placeholder="Username" required>
      <span></span>
    </div>
    <div class="input-box">
      <input type="password" placeholder="Password" required>
      <span></span>
    </div>
    <button type="submit">Login</button>
  </form>
  <div class="particles-container"></div>
</div>

.login-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  padding: 50px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
  animation: login-form 1s ease-in-out forwards;
}

@keyframes login-form {
  from {
    opacity: 0;
    transform: translate(-50%, -150%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

form {
  display: flex;
  flex-direction: column;
}

form h1 {
  color: #fff;
  margin-bottom: 30px;
  text-align: center;
}

.input-box {
  position: relative;
  margin-bottom: 20px;
}

input {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}

input:focus,
input:valid {
  border-bottom-color: #fff;
}

input:focus + span:before,
input:valid + span:before {
  transform: scaleX(1);
}

input:focus + span:after,
input:valid + span:after {
  transform: scaleX(1);
}

span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #00c6ff, #0072ff);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease-in-out;
}

span:before,
span:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 2px;
  background-color: #fff;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

span:before {
  left: -10px;
  transform-origin: bottom left;
}

span:after {
  right: -10px;
  transform-origin: bottom right;
}

button {
  background: linear-gradient(to right, #00c6ff, #0072ff);
  border: none;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

button:hover {
  background: linear-gradient(to right, #0072ff, #00c6ff);
}

const particlesContainer = document.querySelector(".particles-container");

for (let i = 0; i < 50; i++) {
  const particle = document.createElement("div");
  particle.classList.add("particle");
  particlesContainer.appendChild(particle);
}

document.addEventListener("mousemove", function (event) {
  const particles = document.querySelectorAll(".particle");
  for (let i = 0; i < particles.length; i++) {
    const particle = particles[i];
    const dx = event.clientX - particle.offsetLeft - particle.clientWidth / 2;
    const dy = event.clientY - particle.offsetTop - particle.clientHeight / 2;
    const angle = Math.atan2(dy, dx);
    const distance = Math.sqrt(dx * dx + dy * dy);
    const maxDistance = 200;
    const strength = (maxDistance - distance) / maxDistance;
    const x = Math.cos(angle) * strength * 20;
    const y = Math.sin(angle) * strength * 20;
    particle.style.transform = `translate(${x}px, ${y}px)`;
  }
});

最后，将背景视频和登陆框放在一个容器中即可：

<div class="container">
  <div class="video-bg">
    <video src="background.mp4" autoplay loop muted></video>
  </div>
  <div class="login-container">
    <!-- 登陆框代码 -->
  </div>
</div>

通过这些 CSS 和 JavaScript 效果的组合，我们可以创建一个充满科技感的前端登录界面，让用户有一种置身未来世界的感觉。