全篇使用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();
