写一个完整的前端登录界面

好的，我可以回答这个问题。前端登录界面通常包括用户名和密码输入框、登录按钮、注册按钮、忘记密码链接等元素。可以使用 HTML、CSS 和 JavaScript 技术来实现。具体实现方式可以根据需求和设计来确定。

相关问题

用vue写一个前端登陆界面

以下是一个简单的前端登录界面，使用Vue框架：

<template>
  <div class="login">
    <h1>Login</h1>
    <form>
      <input type="text" placeholder="Username" v-model="username">
      <input type="password" placeholder="Password" v-model="password">
      <button type="submit" @click.prevent="handleLogin">Login</button>
    </form>
    <p v-if="error" class="error">{{ error }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      error: ''
    }
  },
  methods: {
    handleLogin() {
      if (this.username === 'admin' && this.password === 'password') {
        // 登录成功
        this.$router.push('/dashboard')
      } else {
        // 登录失败
        this.error = 'Invalid username or password'
      }
    }
  }
}
</script>

<style>
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

h1 {
  font-size: 2rem;
  margin-bottom: 2rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

input[type="text"],
input[type="password"] {
  padding: 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid gray;
}

button[type="submit"] {
  padding: 0.5rem;
  border-radius: 0.25rem;
  border: none;
  background-color: blue;
  color: white;
  cursor: pointer;
}

.error {
  color: red;
}
</style>

在上面的代码中，我们定义了一个组件，包含一个登录表单。表单中有用户名和密码的输入框，以及一个提交按钮。在点击提交按钮时，我们调用handleLogin方法。如果用户名和密码正确，我们使用Vue Router将用户重定向到仪表板页面。如果用户名或密码不正确，我们设置一个错误消息，告诉用户登陆失败。

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

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

首先，我们需要一个背景，可以选择一个科技感十足的图片或者视频作为背景。这里我选择了一个动态的背景视频。可以通过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 效果的组合，我们可以创建一个充满科技感的前端登录界面，让用户有一种置身未来世界的感觉。