欢迎来到“摸鱼神器”开发教程的第一章。在本系列教程中，我们将亲手打造通过 `moyu.html` 实现的办公室摸鱼打卡工具。
![01_setup.png](https://developer.qcloudimg.com/http-save/yehe-12010127/3ca1c109422bd59c81c1517ba791a31a.jpg)
本章我们将搭建项目的骨架，并为它赋予一个唯美、柔和且带有动态呼吸感的背景。

## 1. HTML 骨架搭建

首先，我们需要一个标准的 HTML5 模板。我们在 `<head>` 中引入了 jQuery 和微信 JS-SDK，为后续的功能做准备。

```html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>今天你摸鱼了么 - 每日打卡</title>
    <style>
      /* CSS 样式将写在这里 */
    </style>
    
    <script src="../script/jquery-2.2.4.min.js"></script>
    
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  </head>
  <body>
    
  </body>
</html>
```

## 2. 定义设计系统 (CSS 变量)

为了让设计保持一致且易于修改，我们使用 CSS 变量定义颜色主题。这里我们采用了一套深色主调搭配柔和背景的配色。

```css
:root {
  --primary-gradient: linear-gradient(135deg, #1f2937 0%, #4b5563 100%);
  --primary-color: #111827;
  --bg-color: #f3f4f6;
  --card-bg: #ffffff;
  --text-color: #111827;
  --text-muted: #6b7280;
  --card-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --card-border: rgba(229, 231, 235, 0.5);
}
```

## 3. 打造唯美背景

我们不仅仅设置一个背景色，还会添加两个漂浮的圆球（Orbs）来增加画面的层次感和流动感。

### 3.1 基础背景

Body 设置为全屏高度，并使用 flex 布局居中内容。背景本身使用了一个复合的 `radial-gradient`（径向渐变），营造出光晕效果。

```css
body {
  font-family:
    "Noto Sans SC",
    system-ui,
    -apple-system,
    sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 防止圆球溢出滚动条 */
  background-image:
    radial-gradient(at 0% 0%, rgba(255, 255, 255, 0.8) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(255, 255, 255, 0.8) 0px, transparent 50%);
}
```

### 3.2 动态呼吸圆球

我们在背景中放置两个大圆球，通过高斯模糊 (`filter: blur(80px)`) 使得它们看起来像团雾气。配合 `float` 动画，它们会缓慢地在屏幕上浮动，营造出舒适的“摸鱼”氛围。

**HTML 结构：**

```html
<div class="bg-orb bg-orb-1"></div>
<div class="bg-orb bg-orb-2"></div>
```

**CSS 样式与动画：**

```css
.bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px); /* 关键：创造柔和光晕 */
  z-index: -1;
  animation: float 25s infinite ease-in-out;
}

.bg-orb-1 {
  width: 40vw;
  height: 40vw;
  background: rgba(229, 231, 235, 0.8);
  top: -10%;
  left: 20%;
  animation-delay: 0s;
}

.bg-orb-2 {
  width: 50vw;
  height: 50vw;
  background: rgba(209, 213, 219, 0.6);
  bottom: -5%;
  right: 10%;
  animation-delay: -5s;
}

/* 浮动动画 */
@keyframes float {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(30px, -20px);
  }
}
```

## 4. 预览效果

完成上述步骤后，打开 HTML 文件，你应该能看到一个带有柔和光晕流动的浅灰色背景。这就是我们放置“摸鱼打卡器”的舒适空间。

## 在线体验

> **在线演示**：[https://www.ytecn.com/dev/tool/moyu.html](https://www.ytecn.com/dev/tool/moyu.html)  
> **开源代码**：[https://gitee.com/ytecnsong/web-dev-toolkit](https://gitee.com/ytecnsong/web-dev-toolkit)

下一章，我们将绘制应用的主界面卡片，并运用“毛玻璃”特效提升质感。

欢迎来到“摸鱼神器”开发教程的第一章。在本系列教程中，我们将亲手打造通过 moyu.html 实现的办公室摸鱼打卡工具。本章我们将搭建项目的骨架，并为它赋予一个唯美、柔和且带有动态呼吸感的背景。

【摸鱼工具开发】第一章：项目起步与唯美背景 (Project Setup & Background)

前端

客户端

本教程教你打造办公室摸鱼打卡工具，从HTML骨架搭建到CSS变量定义，再到动态呼吸圆球背景设计。采用jQuery和微信JS-SDK，创建柔和光晕流动的浅灰色背景，为摸鱼打卡器打造舒适空间。

jQuery

HTML5

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

【摸鱼工具开发】第一章：项目起步与唯美背景 (Project Setup & Background)-腾讯云开发者社区-腾讯云

【摸鱼工具开发】第一章：项目起步与唯美背景 (Project Setup & Background)

【摸鱼工具开发】第一章：项目起步与唯美背景 (Project Setup & Background)

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐