代码收藏家技术教程 2023-07-06
设计精美的登录页面 – login.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Page</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: #000;
    }

    #canvas-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    #login-form {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      background-color: rgba(255, 255, 255, 0.5);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

      /* 科技感样式 */
      border: none;
      outline: none;
      font-size: 16px;
      color: #fff;
      text-align: center;
      background: none;
      resize: none;
    }

    #login-form input,
    #login-form button {
      display: block;
      width: 100%;
      margin-bottom: 10px;
      padding: 10px;
      border: none;
      outline: none;
      font-size: 16px;
      color: #fff;
      background-color: rgba(255, 255, 255, 0.2);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    #login-form button {
      background-color: #4CAF50;
      cursor: pointer;
    }

    #login-form button:hover {
      background-color: #45a049;
    }


    /*后添加*/
    #login-form input:focus {
  transform: translateX(-50%) translateY(-120%) scale(0.8);
}

#canvas-container::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.5s;
}

#canvas-container::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.5s;
}
  </style>
</head>

<body>
<div id="canvas-container"></div>

<form id="login-form">
  <h1>Login</h1>
  <input type="text" placeholder="Username">
  <input type="password" placeholder="Password">
  <button type="submit">Login</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
  // 创建粒子
  particlesJS("canvas-container", {
    particles: {
      number: {
        value: 500,
        density: {
          enable: true,
          value_area: 1000
        }
      },
      shape: {
        type: "circle",
        stroke: {
          width: 1,
          color: "#808080"
        },
        image: {
          src: "star.png",
          width: 2,
          height: 2
        }
      },
      opacity: {
        value: 0.5,
        random: true,
        anim: {
          enable: true,
          speed: 1,
          opacity_min: 0.1,
          sync: false
        }
      },
      size: {
        value: 4,
        random: true,
        anim: {
          enable: false,
          speed: 40,
          size_min: 0.1,
          sync: false
        }
      },
      line_linked: {
        enable: false,
      },
      move: {
        enable: true,
        speed: 1,
        direction: "none",
        random: true,
        straight: false,
        out_mode: "out",
        bounce: false
      }
    },
    interactivity: {
      detect_on: "canvas",
      events: {
        onhover: {
          enable: false,
          mode: "repulse"
        },
        onclick: {
          enable: false,
          mode: "push"
        },
        resize: true
      }
    },
    retina_detect: true
  });

  // 创建3D场景
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 5;

  const renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.getElementById("canvas-container").appendChild(renderer.domElement);

  const loader = new THREE.GLTFLoader();
  loader.load(
          'model.gltf',
          function (gltf) {
            scene.add(gltf.scene);
          },
          undefined,
          function (error) {
            console.error(error);
          }
  );

  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  animate();
  // 创建星空背景
  const starGeometry = new THREE.SphereGeometry(100, 64, 64);
  const starMaterial = new THREE.MeshBasicMaterial({
      map: new THREE.TextureLoader().load('star_background.jpg'),
      side: THREE.BackSide
  });
  const starBackground = new THREE.Mesh(starGeometry, starMaterial);
  scene.add(starBackground);

  // 鼠标滑动有流星拖尾效果
  const canvasContainer = document.getElementById("canvas-container");
  const particles = [];

  canvasContainer.addEventListener("mousemove", function (event) {
      const canvasBounding = canvasContainer.getBoundingClientRect();
      const mouseX = ((event.clientX - canvasBounding.left) / canvasBounding.width) * 2 - 1;
      const mouseY = -((event.clientY - canvasBounding.top) / canvasBounding.height) * 2 + 1;

      const particle = new THREE.Mesh(
          new THREE.SphereGeometry(0.1),
          new THREE.MeshBasicMaterial({ color: 0xffffff })
      );
      particle.position.set(mouseX, mouseY, -10);
      scene.add(particle);
      particles.push(particle);

      if (particles.length > 30) {
          const oldParticle = particles.shift();
          scene.remove(oldParticle);
      }
  });

  function animate() {
      requestAnimationFrame(animate);

      particles.forEach(function (particle) {
          particle.translateZ(0.1);
          particle.scale.multiplyScalar(0.95);
      });

      renderer.render(scene, camera);
  }
  animate();
</script>
</body>
</html>