• 炫酷HTML蜘蛛侠登录页面

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

    一、预览图

    二、HTML代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>蜘蛛侠登录界面title>
    7.     <link rel="stylesheet" href="styles.css">
    8. head>
    9. <body>
    10.     <div class="center-container">
    11.         <div class="login-container">
    12.             <div class="spiderman-logo">
    13.                 <img src="logo.png" alt="Spider-Man Logo">
    14.             div>
    15.             <h2>欢迎回家h2>
    16.             <form class="login-form">
    17.                 <div class="input-group">
    18.                     <label for="username">用户名label>
    19.                     <input type="text" id="username" placeholder="输入你的用户名">
    20.                 div>
    21.                 <div class="input-group">
    22.                     <label for="password">密码label>
    23.                     <input type="password" id="password" placeholder="输入你的密码">
    24.                 div>
    25.                 <button type="submit">登录button>
    26.             form>
    27.         div>
    28.     div>
    29.  
    30.     <canvas id="spider-web">canvas>
    31.  
    32.     <script src="script.js">script>
    33. body>
    34. html>

    三、CSS代码

    1. * {
    2.     margin: 0;
    3.     padding: 0;
    4.     box-sizing: border-box;
    5. }
    6.  
    7. body {
    8.     font-family: Arial, sans-serif;
    9.     background-color: #0A0A2A;
    10.     display: flex;
    11.     justify-content: center;
    12.     align-items: center;
    13.     height: 100vh;
    14.     overflow: hidden;
    15.     position: relative;
    16.     color: white;
    17. }
    18.  
    19. .center-container {
    20.     display: flex;
    21.     justify-content: center;
    22.     align-items: center;
    23.     z-index: 2;
    24.     position: relative;
    25. }
    26.  
    27. .login-container {
    28.     background: linear-gradient(145deg, #c8102e, #0a0a2a);
    29.     padding: 40px;
    30.     border-radius: 15px;
    31.     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    32.     text-align: center;
    33.     width: 300px;
    34.     z-index: 2;
    35. }
    36.  
    37. .spiderman-logo img {
    38.     width: 50px;
    39.     height: 60px;
    40.     margin-bottom: 5px;
    41. }
    42.  
    43. /* Form styles */
    44. .login-form {
    45.     display: flex;
    46.     flex-direction: column;
    47. }
    48.  
    49. .input-group {
    50.     margin-bottom: 20px;
    51. }
    52.  
    53. .input-group label {
    54.     margin-bottom: 8px;
    55.     font-size: 14px;
    56.     float: left;
    57. }
    58.  
    59. .input-group input {
    60.     width: 100%;
    61.     padding: 10px;
    62.     border: none;
    63.     border-radius: 5px;
    64.     background-color: #ffffff;
    65.     color: black;
    66.     font-size: 16px;
    67. }
    68.  
    69. button {
    70.     padding: 10px 20px;
    71.     border: none;
    72.     background-color: #ff4c4c;
    73.     color: white;
    74.     font-size: 18px;
    75.     border-radius: 5px;
    76.     cursor: pointer;
    77.     transition: background-color 0.3s ease;
    78. }
    79.  
    80. button:hover {
    81.     background-color: #ff1c1c;
    82. }
    83.  
    84. #spider-web {
    85.     position: absolute;
    86.     top: 50%;
    87.     left: 50%;
    88.     transform: translate(-50%, -50%);
    89.     z-index: 1;
    90.     width: 100vw;
    91.     height: 100vh;
    92. }

    四、JavaScript代码

    1. const canvas = document.getElementById('spider-web');
    2. const ctx = canvas.getContext('2d');
    3.  
    4. canvas.width = window.innerWidth;
    5. canvas.height = window.innerHeight;
    6.  
    7. function drawWeb() {
    8.     const centerX = canvas.width / 2;
    9.     const centerY = canvas.height / 2;
    10.     const radiusStep = 30;
    11.     const radialStep = 10;
    12.     const rings = 10;
    13.     const lines = 12;
    14.  
    15.     for (let i = 1; i <= rings; i++) {
    16.         ctx.beginPath();
    17.         ctx.arc(centerX, centerY, radiusStep * i, 0, Math.PI * 2);
    18.         ctx.strokeStyle = 'white';
    19.         ctx.lineWidth = 1;
    20.         ctx.stroke();
    21.     }
    22.  
    23.     for (let i = 0; i < lines; i++) {
    24.         const angle = (i / lines) * Math.PI * 2;
    25.         const x = centerX + Math.cos(angle) * radiusStep * rings;
    26.         const y = centerY + Math.sin(angle) * radiusStep * rings;
    27.         ctx.beginPath();
    28.         ctx.moveTo(centerX, centerY);
    29.         ctx.lineTo(x, y);
    30.         ctx.strokeStyle = 'white';
    31.         ctx.lineWidth = 1;
    32.         ctx.stroke();
    33.     }
    34.  
    35.     for (let i = 1; i < rings; i++) {
    36.         for (let j = 0; j < lines; j++) {
    37.             const angle1 = (j / lines) * Math.PI * 2;
    38.             const angle2 = ((j + 1) / lines) * Math.PI * 2;
    39.             const x1 = centerX + Math.cos(angle1) * radiusStep * i;
    40.             const y1 = centerY + Math.sin(angle1) * radiusStep * i;
    41.             const x2 = centerX + Math.cos(angle2) * radiusStep * i;
    42.             const y2 = centerY + Math.sin(angle2) * radiusStep * i;
    43.  
    44.             ctx.beginPath();
    45.             ctx.moveTo(x1, y1);
    46.             ctx.lineTo(x2, y2);
    47.             ctx.strokeStyle = 'white';
    48.             ctx.lineWidth = 1;
    49.             ctx.stroke();
    50.         }
    51.     }
    52. }
    53.  
    54. drawWeb();

  • 相关阅读:
    CrownCAD 2023发布的背后，国产软件如何破局突围？
    TypeScript接口与泛型的使用
    电脑如何查看是否支持虚拟化及如何开启虚拟化
    欧拉角(Euler Angle)
    PP洗气瓶：耐用、安全、高效 —— 您的气体采样理想伙伴
    flutter 应用 抓包
    【c++】信号处理--signal、raise、sigaction的介绍
    尚硅谷Vue
    tomcat出现中文乱码原因和解决办法（简单快捷易懂）
    java 工程管理系统源码+项目说明+功能描述+前后端分离 + 二次开发
  • 原文地址：https://blog.csdn.net/bjjgff/article/details/142255345