当前位置： 首页 > news >正文

炫酷HTML蜘蛛侠登录页面

news 2026/2/9 18:39:24

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

相关文章：

炫酷HTML蜘蛛侠登录页面

全篇使用HTML、CSS、JavaScript&#xff0c;建议有过基础的进行阅读。 一、预览图 二、HTML代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-w…...

编程日记 2024/9/16 22:06:09

算法里面的离散化

一、离散化&#xff08;discretization&#xff09;在算法和数据结构中指的是将连续的输入数据映射到离散的值或者范围&#xff0c;从而使得处理和计算变得更高效。通常用于处理大范围或者无限可能的输入&#xff0c;以便将其转化为有限的、可以有效处理的范围。 离散化的定义…...

编程日记 2024/9/16 22:05:08

Https AK--(ssl 安全感满满)

免责声明&#xff1a;本文仅做分享&#xff01; 目录 https探测 openssl Openssl连接服务器获取基本信息 连接命令&#xff1a; 指定算法连接: 测试弱协议连接是否可以连接: 得到的内容包括&#xff1a; sslscan 在线查询证书 https AK type 中间人AK sslsplit 工具…...

编程日记 2024/9/16 22:01:05

ERROR: Failed building wheel for cython_bbox | pip install cython_bbox 失败【解决方案】

&#x1f947; 版权: 本文由【墨理学AI】原创首发、各位读者大大、敬请查阅、感谢三连 &#x1f389; 声明: 作为全网 AI 领域 干货最多的博主之一&#xff0c;❤️ 不负光阴不负卿 ❤️ 文章目录 win11 系统 pip3 install cython_bbox 失败报错如下解决方法&#xff1a;1 下载…...

编程日记 2024/9/16 21:59:02

逻辑与位运算的双面舞者：、、|、||深度解析

深入解析&、&&、|、||&#xff1a;逻辑与位运算的奥秘之旅 在编程的世界里&#xff0c;&、&&、|、||这四种运算符扮演着至关重要的角色。它们不仅仅是简单的符号&#xff0c;更是连接程序逻辑、实现复杂功能的桥梁。本文旨在深入探讨这四者的区别与联…...

编程日记 2024/9/16 21:58:01

中断门+陷阱门

中断门&#xff1a; 中断描述符在IDT表里面 kd> dq idtr 80b95400 83e48e000008bfc0 83e48e000008c150 80b95410 0000850000580000 83e4ee000008c5c0 80b95420 83e4ee000008c748 83e48e000008c8a8 80b95430 83e48e000008ca1c 83e48e000008d018 80b95440 000085000050…...

编程日记 2024/9/16 21:57:00

RTMP直播播放器的几种选择

如何选择RTMP播放器&#xff1f; 在选择RTMP播放器时&#xff0c;需要综合考虑多个因素&#xff0c;以确保选择的播放器能够满足实际需求并提供良好的用户体验。以下是一些选择RTMP播放器的建议&#xff1a; 1. 功能需求 低延迟&#xff1a;对于直播场景&#xff0c;低延迟是…...

编程日记 2024/9/16 21:54:58

初识爬虫1

学习路线&#xff1a;爬虫基础知识-requests模块-数据提取-selenium-反爬与反反爬-MongoDB数据库-scrapy-appium。 对应视频链接(百度网盘)&#xff1a;正在整理中 爬虫基础知识&#xff1a; 1.爬虫的概念 总结&#xff1a;模拟浏览器&#xff0c;发送请求&#xff0c;获取…...

编程日记 2024/9/16 21:53:57

【趣学Python算法100例】兔子产子

问题描述 有一对兔子&#xff0c;从出生后的第3个月起每个月都生一对兔子。小兔子长到第3个月后每个月又生一对兔子&#xff0c;假设所有的兔子都不死&#xff0c;问30个月内每个月的兔子总对数为多少&#xff1f; 题目解析 兔子产子问题是一个有趣的古典数学问题&#xff0c…...

编程日记 2024/9/16 21:52:56

HTTP 四、HttpClient的使用

一、简单介绍 1、简介 HttpClient是Apache Jakarta Common下的子项目&#xff0c;用来提供高效的、最新的、功能丰富的支持HTTP协议的客户端编程工具包&#xff0c;并且它支持HTTP协议最新的版本和建议。HttpClient已经应用在很多的项目中&#xff0c;比如Apache Jakarta上很著…...

编程日记 2024/9/16 21:51:55

C语言：结构体变量

1. 结构体变量的引用方法 例如&#xff0c;若有数据定义&#xff1a; struct Student{char name[10];int age;struct Date birthday; }s1,s2,stu[10]; 则下面对结构体变量的引用都是正确的&#xff1a; s1.age20; scanf("%d",&s1.age); gets(stu[0].name); s…...

编程日记 2024/9/16 21:50:54

bibtex是什么

BibTeX 是一个用于处理和格式化参考文献的工具&#xff0c;常与 LaTeX 一起使用。它提供了一种方便的方式来管理和生成参考文献列表&#xff0c;特别适用于学术写作和科研论文中。以下是对 BibTeX 的详细介绍&#xff1a; 基本概念 BibTeX 是 LaTeX 的一个附加工具&#xff0…...

编程日记 2024/9/16 21:49:53

【大模型专栏—进阶篇】智能对话全总结

大模型专栏介绍 &#x1f60a;你好&#xff0c;我是小航&#xff0c;一个正在变秃、变强的文艺倾年。 &#x1f514;本文为大模型专栏子篇&#xff0c;大模型专栏将持续更新&#xff0c;主要讲解大模型从入门到实战打怪升级。如有兴趣&#xff0c;欢迎您的阅读。 &#x1f4…...

编程日记 2024/9/16 21:47:52

MVC应用单元测试以及请求参数的验证

SpringMVC支持对Controller单元测试 RunWith(SpringJUnit4ClassRunner.class) ContextConfiguration(locations {"classpath:mvc-dispatcher-servlet.xml", }) WebAppConfiguration public class ControllerJUnitBase{Resourceprivate RequestMappingHandlerMappin…...

编程日记 2024/9/16 21:45:50

算法：TopK问题

题目 有10亿个数字&#xff0c;需要找出其中的前k大个数字。 为了方便讲解&#xff0c;这里令k为5。 思路分析&#xff08;以找前k大个数字为例&#xff09; 很容易想到&#xff0c;进行排序&#xff0c;然后取前k个数字即可。 但是&#xff0c;难点在于&#xff0c;10亿个数…...

编程日记 2024/9/16 21:42:47

.json文件的C#解析，基于Newtonsoft.Json插件

目录 1. 前言 2. 正文 2.1 问题 2.2 解决办法 2.2.1 思路 2.2.2 代码实现 2.2.3 测试结果 3. 备注 1. 前言 天气晚来秋，这几天天气变凉了，各位同学注意好多穿衣服。回归正题 由于需要，需要将json的配置里面的调理解析出来，做成接口，以便于开发。 2. 正文 2.1 …...

编程日记 2024/9/16 21:41:46

四、（JS）JS中常见的加载事件

一、文档加载监听 &#xff08;1&#xff09;抛出疑惑&#xff0c;什么是文档加载监听&#xff1f;为什么要有这个东西&#xff1f; 老样子&#xff0c;我们先讲一个场景&#xff0c;带着大家熟悉为什么会有文档加载监听&#xff0c;是来解决什么问题来着的。 我们先看下这段…...

编程日记 2024/9/16 21:36:41

[网络]https的概念及加密过程

文章目录 一. HTTPS二. https加密过程 一. HTTPS https本质上就是http的基础上增加了一个加密层, 抛开加密之后, 剩下的就是个http是一样的 s > SSL HTTPS HTTP SSL 这个过程, 涉及到密码学的几个核心概念 明文 要传输的真正意思是啥 2)密文 加密之后得到的数据 这个密文…...

编程日记 2024/9/16 21:35:39

React 嵌套类名样式不生效

修改前 父级.blog样式生效&#xff0c;子级.circle样式不生效 // app/blog/page.js import styles from "./page.module.scss"export default function Blog () {return (<div className{styles.blog}><div classNamecircle><div /></div>…...

编程日记 2024/9/16 21:34:38

20Kg载重30分钟续航多旋翼无人机技术详解

一、机架与结构设计 1. 材料选择&#xff1a;为了确保无人机能够承载20Kg的负载&#xff0c;同时实现30分钟的续航&#xff0c;其机架材料需选用轻质高强度的材料&#xff0c;如碳纤维或铝合金。这些材料不仅具有良好的承重能力&#xff0c;还能有效减轻无人机的整体重量&…...

编程日记 2024/9/16 21:33:37

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2026/2/8 20:42:56

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2026/2/8 20:41:51

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2026/1/28 2:18:42

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2026/1/23 12:16:56

工程地质软件市场：发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/10/6 6:10:29

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2026/2/7 13:27:36

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2026/1/23 12:22:14

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

编程新知 2026/1/31 8:12:12

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

编程新知 2025/8/31 2:33:30

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

编程新知 2026/2/7 9:27:22