如何制作一个好玩的 “壁纸” 网页

如何制作一个像‘壁纸’的网页

前言

首先，制作这个网页的想法是在 Wallpaper Engine 上看到一个壁纸，很喜欢，所以就试着在网页中把他复刻出来

Wallpaper Engine 壁纸地址：https://steamcommunity.com/sharedfiles/filedetails/?id=2915168638
演示地址：https://elise0713.neocities.org/
那么废话不多说，接下来来看代码吧

HTML 部分

首先我们新建一个文件夹，文件夹名字随意，并在文件夹里新建一个名为index.html文件，并填入以下内容：

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
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Yuru Camp</title>
    <link rel="stylesheet" href="./assets/css/style.css">
    <link rel="icon" href="https://elise0713.neocities.org/icon.jpeg" type="image/x-icon">
</head>

<body>
    <script type="text/javascript" src="./assets/script/snow.js"></script>
    <script type="text/javascript" src="./assets/script/script.js"></script>
    <div class='top'></div>
    <section>
        <img src="https://elise0713.neocities.org/assets/img/BG.png" data-speed='2' class="layer">
        <div id="div1" data-speed='2.5' class="layer"></div>
    </section>
    <div class='end'></div>
    <!-- <audio id="vd" controls="controls" autoplay="autoplay" hidden="hidden">
        <source src="./assets/mp3/コンセプトが必要だ.mp3" type="audio/mpeg">
        <source src="./assets/mp3/夏の夜空に大輪咲いて.mp3" type="audio/mpeg">
    </audio> -->
</body>

</html>

CSS 部分

然后我们依次新建一个名为 assets 的文件夹，然后在asset文件夹内在新建一个CSS的文件夹并新建一个名字为 style.css 的文件，并填入一下内容：

注意！！！ CSS 文件夹须在 assets 文件夹内

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
* {
    margin: 0;
    padding: 0;
}

body {
    background: #000000;
}

section {
    overflow: hidden;
    position: absolute;
    top: 0%;
    left: 0;
    right: 0;
    bottom: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
}

section img {
    filter: blur(0.03em);
}

.layer {
    z-index: -9999;
}

.top {
    height: 120px;
    width: 100%;
    background: black;
    z-index: 10;
}

.end {
    height: 120px;
    width: 100%;
    background: black;
    position: fixed;
    bottom: 0px;
    z-index: 9998;
}

#div1 {
    position: absolute;
    top: 45%;
    left: 5%;
    right: 0;
    bottom: 40%;
    font-size: 90px;
    z-index: 9999;
    color: rgb(255, 255, 255);
    font-weight: normal;
    text-shadow: 1px -1px #57afff, -1px 1px 2px #fa3a3abe, 0 0 4px rgb(255, 255, 255), 0 0 2px rgb(255, 255, 255);
    font-family: Atami;
    src: url(https://elise0713.neocities.org/asstes/css/Atami-Regular.ttf);
    filter: blur(0.005em);
}

JS 部分

‘特效’

这部分是让页面有下雪的样子
参考文章：https://blog.csdn.net/winter2121/article/details/107870041

在assets文件目录下新建一个名为script的文件夹，并新建一个名为snow.js的文件

代码部分

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
/* 控制下雪 */
function snowFall(snow) {
  /* 可配置属性 */
  snow = snow || {};
  this.maxFlake = snow.maxFlake || 20; /* 最多片数 */
  this.flakeSize = snow.flakeSize || 6; /* 雪花形状 */
  this.fallSpeed = snow.fallSpeed || 2; /* 坠落速度 */
}
/* 兼容写法 */
requestAnimationFrame =
  window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  function (callback) {
    setTimeout(callback, 100 / 60);
  };

cancelAnimationFrame =
  window.cancelAnimationFrame ||
  window.mozCancelAnimationFrame ||
  window.webkitCancelAnimationFrame ||
  window.msCancelAnimationFrame ||
  window.oCancelAnimationFrame;
/* 开始下雪 */
snowFall.prototype.start = function () {
  /* 创建画布 */
  snowCanvas.apply(this);
  /* 创建雪花形状 */
  createFlakes.apply(this);
  /* 画雪 */
  drawSnow.apply(this);
};
/* 创建画布 */
function snowCanvas() {
  /* 添加Dom结点 */
  var snowcanvas = document.createElement("canvas");
  snowcanvas.id = "snowfall";
  snowcanvas.width = document.body.offsetWidth;
  snowcanvas.height = window.innerHeight;
  snowcanvas.setAttribute(
    "style",
    "position:fixed; top: 0; left: 0; z-index: -1; pointer-events: none;"
  );
  document.getElementsByTagName("body")[0].appendChild(snowcanvas);
  this.canvas = snowcanvas;
  this.ctx = snowcanvas.getContext("2d");
  /* 窗口大小改变的处理 */
  window.onresize = function () {
    snowcanvas.width = document.body.offsetWidth;
    snowcanvas.height = window.innerHeight;
  };
}
/* 雪运动对象 */
function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
  this.x = Math.floor(Math.random() * canvasWidth); /* x坐标 */
  this.y = Math.floor(Math.random() * canvasHeight); /* y坐标 */
  this.size = Math.random() * flakeSize; /* 形状 */
  this.maxSize = 3; /* 最大形状 */
  this.speed = Math.random() * +fallSpeed; /* 坠落速度 */
  this.fallSpeed = fallSpeed; /* 坠落速度 */
  this.velY = this.speed; /* Y方向速度 */
  this.velX = this.speed; /* X方向速度 */
  this.stepSize = Math.random() / 100; /* 步长 */
  this.step = 100; /* 步数 */
}
flakeMove.prototype.update = function () {
  var x = this.x,
    y = this.y;
  /* 左右摆动(余弦) */
  this.velX *= 1;
  if (this.velY <= this.speed) {
    this.velY = this.speed;
  }
  this.velX += Math.cos((this.step += 0)) * this.stepSize;

  this.y += this.velY;
  this.x += this.velX;
  /* 飞出边界的处理 */
  if (
    this.x >= canvas.width ||
    this.x <= 0 ||
    this.y >= canvas.height ||
    this.y <= 0
  ) {
    this.reset(canvas.width, canvas.height);
  }
};
/* 飞出边界-放置最顶端继续坠落 */
flakeMove.prototype.reset = function (width, height) {
  this.x = Math.floor(Math.random() * width);
  this.y = 0;
  this.size = Math.random() * this.maxSize + 2;
  this.speed = Math.random() * 1 + this.fallSpeed;
  this.velY = this.speed;
  this.velX = 0;
};
// 渲染雪花-随机形状（此处可修改雪花颜色！！！）
flakeMove.prototype.render = function (ctx) {
  var snowFlake = ctx.createRadialGradient(
    this.x,
    this.y,
    0,
    this.x,
    this.y,
    this.size
  );
  snowFlake.addColorStop(
    0,
    "rgba(255, 255, 255, 0.9)"
  ); /* 此处是雪花颜色，默认是白色 */
  snowFlake.addColorStop(
    0.5,
    "rgba(255, 255, 255, 0.5)"
  ); /* 若要改为其他颜色，请自行查 */
  snowFlake.addColorStop(
    1,
    "rgba(255, 255, 255, 0)"
  ); /* 找16进制的RGB 颜色代码。 */
  ctx.save();
  ctx.fillStyle = snowFlake;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
  ctx.fill();
  ctx.restore();
};
/* 创建雪花-定义形状 */
function createFlakes() {
  var maxFlake = this.maxFlake,
    flakes = (this.flakes = []),
    canvas = this.canvas;
  for (var i = 0; i < maxFlake; i++) {
    flakes.push(
      new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed)
    );
  }
}
/* 画雪 */
function drawSnow() {
  var maxFlake = this.maxFlake,
    flakes = this.flakes;
  (ctx = this.ctx), (canvas = this.canvas), (that = this);
  /* 清空雪花 */
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var e = 0; e < maxFlake; e++) {
    flakes[e].update();
    flakes[e].render(ctx);
  }
  /*  一帧一帧的画 */
  this.loop = requestAnimationFrame(function () {
    drawSnow.apply(that);
  });
}
/* 调用及控制方法 */
var snow = new snowFall({
  maxFlake: 150,
});
snow.start();

剩余部分

最后我们再来完善剩下的部分：如何让 HTML 元素跟随鼠标移动
在script文件目录下新建一个名为script.js的文件
并填入以下内容：

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
// 背景跟随鼠标移动，产生视差效果
document.addEventListener("mousemove", parallax);

function parallax(e) {
  this.querySelectorAll(".layer").forEach((layer) => {
    const speed = layer.getAttribute("data-speed");

    const x = (window.innerWidth - e.pageX * speed) / -200; //X轴偏移

    const y = (window.innerHeight - e.pageY * speed) / -200; //Y轴偏移

    layer.style.transform = `translateX(${x}mm) translateY(${y}mm)`;
  });
}
// 获取当前系统时间，并输出到 div1里
function time() {
  var date = new Date();
  var hour = date.getHours();
  hour = hour > 9 ? hour : "0" + hour;
  var minutes = date.getMinutes();
  minutes = minutes > 9 ? minutes : "0" + minutes;
  var str = hour + ":" + minutes;
  var div1 = document.getElementById("div1");
  div1.innerHTML = str;
}
setInterval(time, 0);
// 判断音乐是否播放
window.onload = function () {
  setInterval("toggleSound()", 100);
};

function toggleSound() {
  var music = document.getElementById("vd"); //获取ID

  if (music.paused) {
    //判读是否播放
    music.paused = false;
    music.play(); //没有就播放
  }
}

结语

至此这个网页就算完成了，接下来只需要部署就可以在网络上看见这个网站了
没有服务器的话可以看看在这个网站部署:https://neocities.org/

建议

  • 背景图片建议使用 1920*1080尺寸的图片
  • 遇到问题请先使用搜索引擎，或者在下方留言，我会尽我所能回答
教程 > 技术向
#HTML #网页制作 #技术向
如何制作一个好玩的 “壁纸” 网页
http://xihua.shop/2023/05/27/如何制作一个壁纸网页/
作者
Elise
发布于
2023年5月27日
许可协议