炫酷HTML蜘蛛侠登录页面

小那同学

已于 2024-09-14 12:37:54 修改

阅读量323

点赞数 1

分类专栏：前端文章标签： html 前端 css javascript

于 2024-09-14 12:37:34 首次发布

本文链接：https://blog.csdn.net/bjjgff/article/details/142255345

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

全篇使用HTML、CSS、JavaScript，建议有过基础的进行阅读。

一、预览图

二、HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蜘蛛侠登录界面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="center-container">
        <div class="login-container">
            <div class="spiderman-logo">
                <img src="logo.png" alt="Spider-Man Logo">
            </div>
            <h2>欢迎回家</h2>
            <form class="login-form">
                <div class="input-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" placeholder="输入你的用户名">
                </div>
                <div class="input-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" placeholder="输入你的密码">
                </div>
                <button type="submit">登录</button>
            </form>
        </div>
    </div>

    <canvas id="spider-web"></canvas>

    <script src="script.js"></script>
</body>
</html>

三、CSS代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #0A0A2A;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    position: relative;
    color: white;
}

.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    position: relative;
}

.login-container {
    background: linear-gradient(145deg, #c8102e, #0a0a2a);
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    text-align: center;
    width: 300px;
    z-index: 2;
}

.spiderman-logo img {
    width: 50px;
    height: 60px;
    margin-bottom: 5px;
}

/* Form styles */
.login-form {
    display: flex;
    flex-direction: column;
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    margin-bottom: 8px;
    font-size: 14px;
    float: left;
}

.input-group input {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #ffffff;
    color: black;
    font-size: 16px;
}

button {
    padding: 10px 20px;
    border: none;
    background-color: #ff4c4c;
    color: white;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #ff1c1c;
}

#spider-web {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100vw;
    height: 100vh;
}

四、JavaScript代码

const canvas = document.getElementById('spider-web');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function drawWeb() {
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radiusStep = 30;
    const radialStep = 10;
    const rings = 10;
    const lines = 12;

    for (let i = 1; i <= rings; i++) {
        ctx.beginPath();
        ctx.arc(centerX, centerY, radiusStep * i, 0, Math.PI * 2);
        ctx.strokeStyle = 'white';
        ctx.lineWidth = 1;
        ctx.stroke();
    }

    for (let i = 0; i < lines; i++) {
        const angle = (i / lines) * Math.PI * 2;
        const x = centerX + Math.cos(angle) * radiusStep * rings;
        const y = centerY + Math.sin(angle) * radiusStep * rings;
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(x, y);
        ctx.strokeStyle = 'white';
        ctx.lineWidth = 1;
        ctx.stroke();
    }

    for (let i = 1; i < rings; i++) {
        for (let j = 0; j < lines; j++) {
            const angle1 = (j / lines) * Math.PI * 2;
            const angle2 = ((j + 1) / lines) * Math.PI * 2;
            const x1 = centerX + Math.cos(angle1) * radiusStep * i;
            const y1 = centerY + Math.sin(angle1) * radiusStep * i;
            const x2 = centerX + Math.cos(angle2) * radiusStep * i;
            const y2 = centerY + Math.sin(angle2) * radiusStep * i;

            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.strokeStyle = 'white';
            ctx.lineWidth = 1;
            ctx.stroke();
        }
    }
}

drawWeb();