原生js+css实现炫酷暗色在线网络速度网速检测器仪表盘代码
代码语言:html
所属分类:布局界面
代码描述:原生js+css实现炫酷暗色在线网络速度网速检测器仪表盘代码
代码标签: 原生 js css 炫酷 暗色 在线 网络 速度 网速 检测器 仪表盘 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>科技感网速测速仪表盘 - 酷黑模式</title> <!-- 引入科技感字体 --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet"> <style> /* --- 全局样式 --- */ * { margin: 0; padding: 0; box-sizing: border-box; } body { /* 酷黑模式背景:深邃的蓝黑渐变 */ font-family: 'Roboto', 'Arial', sans-serif; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; color: #e2e8f0; /* 默认文字颜色调整为浅灰色 */ } /* --- 主容器 --- */ .container { /* 暗色玻璃效果,增加边框和辉光 */ background: rgba(30, 41, 59, 0.5); /* 深蓝半透明 */ backdrop-filter: blur(12px); border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.1); padding: 40px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 25px rgba(14, 165, 233, 0.15); /* 黑色阴影 + 蓝色辉光 */ max-width: 600px; width: 100%; } /* --- 标题 --- */ h1 { text-align: center; color: white; margin-bottom: 30px; font-family: 'Orbitron', sans-serif; /* 使用科技感字体 */ font-size: 2em; text-shadow: 0 0 8px rgba(14, 165, 233, 0.7); /* 青色辉光效果 */ } /* --- 仪表盘 --- */ .speedometer { position: relative; width: 100%; max-width: 400px; margin: 0 auto 30px; aspect-ratio: 1; } .gauge-container { width: 100%; height: 100%; position: relative; } canvas { width: 100%; height: 100%; } .speed-display { position: absolute; top: 65%; left: 50%; transform: translateX(-50%); text-align: center; } .speed-value { font-family: 'Orbitron', sans-serif; /* 使用科技感字体 */ font-size: 3em; font-weight: 700; color: white; text-shadow: 0 0 15px rgba(14, 165, 233, 0.8); /* 增强辉光 */ } .speed-unit { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0