酷炫登录页面

原创

已于 2025-04-22 20:56:14 修改 · 794 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

于 2025-04-22 20:55:27 首次发布

以下是一个结合了动态背景、粒子效果和动画的酷炫登录页面，使用HTML5+CSS3+JavaScript实现：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>赛博空间入口</title>
    <style>
        * {
     
     
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
     
     
            min-height: 100vh;
            background: #0a0a0a;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
        }

        .cyber-container {
     
     
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: radial-gradient(circle at center, 
                rgba(0, 255, 255, 0.1),
                rgba(0, 0, 0, 0.8));
        }

        .cyber-card {
     
     
            position: relative;
            width: 380px;
            padding: 40px;
            background: rgba(0, 0, 0, 0.8);
            border: 2px solid #0ff;
            border-radius: 10px;
            box-shadow: 0 0 30px #0ff;
            transform-style: preserve-3d;
            transition: 0.5s;
        }

        .cyber-card:hover {
     
     
            transform: rotateX(5deg) rotateY(5deg) translateZ(20px);
        }

        .glowing-text {
     
     
            text-align: center;
            color: #0ff;
            font-size: 2.5em;
            text-shadow: 0 0 10px #0ff;
            margin-bottom: 30px;
        }

        .input-box {
     
     
            position: relative;
            margin-bottom