简单的做一个网页入口

这篇文章为原创文章 | 封面画师：mocha@新刊委託中

前言

纯前端无第三方依赖实现网站入口页面的实现，可以用来装饰你的网站，毕竟谁不会对一个好看的网站入口页面心动呢！代码已拆分成三个部分，使用时记得导入使用！

HTML部分

保存为后缀为".html"文件即可CTRL + S

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!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="stylesheet" href="style.css">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✨</text></svg>">
</head>
<body>
    <!-- 星空画布 -->
    <div id="starfield"></div>

    <!-- 欢迎内容 -->
    <div class="content">
        <div class="header">
            <h1 class="title">星空漫游</h1>
            <p class="subtitle">每一颗划过的流星，都是思想的轨迹<br>欢迎来到我的数字宇宙，这里记录着探索、思考与创造的点滴</p>
        </div>

        <div class="actions">
            <a href="#" class="enter-btn" id="enterBlog">进入博客</a>
            <div class="hint">点击按钮或按空格键探索</div>
        </div>

        <div class="stats">
            <div class="stat-item">
                <span class="stat-number" id="starCount">0</span>
                <span class="stat-label">颗星星</span>
            </div>
            <div class="stat-item">
                <span class="stat-number" id="meteorCount">0</span>
                <span class="stat-label">颗流星</span>
            </div>
        </div>
    </div>

    <!-- 加载提示（初始化完成后消失） -->
    <div class="loading" id="loading">
        <div class="loading-spinner"></div>
        <div class="loading-text">初始化星空...</div>
    </div>

    <!-- 音频元素（背景音乐） -->
    <audio id="bgm" loop preload="metadata">
        <!-- 这里可以添加背景音乐文件 -->
        <!-- <source src="bgm.mp3" type="audio/mpeg"> -->
    </audio>

    <!-- 音量控制 -->
    <div class="volume-control" id="volumeControl">
        <button class="volume-btn" id="volumeToggle">
            <span class="volume-icon">🔈</span>
        </button>
        <input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.1" value="0.5">
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS部分

保存为后缀为".css"文件即可CTRL + S

Javascript部分

保存为后缀为".js"文件即可CTRL + S

结尾

✨ 核心功能说明

动态星空生成
根据屏幕尺寸自动调整星星数量（桌面端约300颗，移动端约150颗）
星星具有随机的大小、亮度、位置和闪烁频率智能流星系统
流星随机从不同位置和角度划过
控制同时存在的流星数量（最多3颗）
流星消失后自动清理DOM元素，优化性能
交互体验
鼠标视差效果：移动鼠标时，星星会有轻微的跟随效果，增强沉浸感
响应式设计：针对不同屏幕优化了字体大小、星星密度和流星长度
平滑动画：欢迎文字和按钮有渐入动画，按钮有悬停效果
视觉设计
使用了多层径向渐变背景，营造深邃的太空感
流星带有光晕和渐变透明效果，更加真实
整体色调以深蓝和紫色为主，符合星空主题

🛠️ 如何个性化定制

修改网站链接：在JS代码末尾附近找到 enterBtn.href = ‘/blog’;，将其中的’/blog’替换为你博客的实际地址。
调整视觉效果
修改config.stars.count数值可调整星星数量
修改config.shootingStars.maxCount可调整同时出现的流星数
在CSS的background属性中调整颜色渐变值可改变夜空色调
适配你的博客风格
在.title和.subtitle类中修改字体、颜色和文字内容
调整.enter-btn类的样式以匹配你的博客按钮风格