❤生日快乐网站模板HTML❤（精品制作）（HTML5+CSS3+JS）_vue实现生日快乐哆啦a梦网页版代码

作者：凡人多烦事01 | 2024-02-15 15:09:33

踩

vue实现生日快乐哆啦a梦网页版代码

生日快乐网站模板HTML（精品制作）（HTML5+CSS3+JS）

最近姐姐的生日快到了，想着也没有什么礼物送给她，恰好因为CTF的原因学了点HTML和JavaScript，就做了两个网页，当然因为网页(wo)很(ye)简(bu)单(hui)，没有带后端，所以送的时候要将资源文件一并打包发送，下面进入正文。

作品介绍

1.网页作品简介方面 ：HTML生日快乐祝福网页模板，该模板有多种动态效果图，全局采用蓝色装饰，适用于给兄弟、男生的生日祝福，只需简单修改，即可用网页生成打开。

2.网页作品编辑方面：作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

一、作品演示

点击查看更多生日源码

电脑端

在这里插入图片描述

手机端

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>生日快乐</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
      <link rel="stylesheet" href="css/style.css">
    <style>
      .Birthday{
        font-size: 35px;
        color: yellow;
        text-align: center;
        z-index: 9999;
      }
    </style>
</head>

<body>

  <main>
    <audio src="music/3.mp3" autoplay="autoplay" loop="loop"></audio>
    <div class="Birthday"> 菁菁&nbsp;❤&nbsp;&nbsp;生日快乐!</div>
  <ul class="star" style="--v: 1; --t: 1;">
    <li style="--i: 0"></li>
  </ul>
  <ul style="--v: 2; --t: 8; --direction:reverse">
    <li style="--i: 0"></li>
    <li style="--i: 1"></li>
    <li style="--i: 2"></li>
    <li style="--i: 3"></li>
    <li style="--i: 4"></li>
    <li style="--i: 5"></li>
    <li style="--i: 6"></li>
    <li style="--i: 7"></li>
  </ul>
  <ul style="--v: 3; --t: 12">
    <li style="--i: 0"></li>
    <li style="--i: 1"></li>
    <li style="--i: 2"></li>
    <li style="--i: 3"></li>
    <li style="--i: 4"></li>
    <li style="--i: 5"></li>
    <li style="--i: 6"></li>
    <li style="--i: 7"></li>
    <li style="--i: 8"></li>
    <li style="--i: 9"></li>
    <li style="--i: 10"></li>
    <li style="--i: 11"></li>
  </ul>
  <ul style="--v: 4; --t: 18; --direction:reverse">
    <li style="--i: 0"></li>
    <li style="--i: 1"></li>
    <li style="--i: 2"></li>
    <li style="--i: 3"></li>
    <li style="--i: 4"></li>
    <li style="--i: 5"></li>
    <li style="--i: 6"></li>
    <li style="--i: 7"></li>
    <li style="--i: 8"></li>
    <li style="--i: 9"></li>
    <li style="--i: 10"></li>
    <li style="--i: 11"></li>
    <li style="--i: 12"></li>
    <li style="--i: 13"></li>
    <li style="--i: 14"></li>
    <li style="--i: 15"></li>
    <li style="--i: 16"></li>
    <li style="--i: 17"></li>
  </ul>
  <ul style="--v: 5; --t: 22">
    <li style="--i: 0"></li>
    <li style="--i: 1"></li>
    <li style="--i: 2"></li>
    <li style="--i: 3"></li>
    <li style="--i: 4"></li>
    <li style="--i: 5"></li>
    <li style="--i: 6"></li>
    <li style="--i: 7"></li>
    <li style="--i: 8"></li>
    <li style="--i: 9"></li>
    <li style="--i: 10"></li>
    <li style="--i: 11"></li>
    <li style="--i: 12"></li>
    <li style="--i: 13"></li>
    <li style="--i: 14"></li>
    <li style="--i: 15"></li>
    <li style="--i: 16"></li>
    <li style="--i: 17"></li>
    <li style="--i: 18"></li>
    <li style="--i: 19"></li>
    <li style="--i: 20"></li>
    <li style="--i: 21"></li>
  </ul>
  <ul style="--v: 6; --t: 26; --direction:reverse">
    <li style="--i: 0"></li>
    <li style="--i: 1"></li>
    <li style="--i: 2"></li>
    <li style="--i: 3"></li>
    <li style="--i: 4"></li>
    <li style="--i: 5"></li>
    <li style="--i: 6"></li>
    <li style="--i: 7"></li>
    <li style="--i: 8"></li>
    <li style="--i: 9"></li>
    <li style="--i: 10"></li>
    <li style="--i: 11"></li>
    <li style="--i: 12"></li>
    <li style="--i: 13"></li>
    <li style="--i: 14"></li>
    <li style="--i: 15"></li>
    <li style="--i: 16"></li>
    <li style="--i: 17"></li>
    <li style="--i: 18"></li>
    <li style="--i: 19"></li>
    <li style="--i: 20"></li>
    <li style="--i: 21"></li>
    <li style="--i: 22"></li>
    <li style="--i: 23"></li>
    <li style="--i: 24"></li>
    <li style="--i: 25"></li>
  </ul>
  <ul style="--v: 7; --t: 32">
    <li style="--i: 0"></li>
    <li style="--i: 1"></li>
    <li style="--i: 2"></li>
    <li style="--i: 3"></li>
    <li style="--i: 4"></li>
    <li style="--i: 5"></li>
    <li style="--i: 6"></li>
    <li style="--i: 7"></li>
    <li style="--i: 8"></li>
    <li style="--i: 9"></li>
    <li style="--i: 10"></li>
    <li style="--i: 11"></li>
    <li style="--i: 12"></li>
    <li style="--i: 13"></li>
    <li style="--i: 14"></li>
    <li style="--i: 15"></li>
    <li style="--i: 16"></li>
    <li style="--i: 17"></li>
    <li style="--i: 18"></li>
    <li style="--i: 19"></li>
    <li style="--i: 20"></li>
    <li style="--i: 21"></li>
    <li style="--i: 22"></li>
    <li style="--i: 23"></li>
    <li style="--i: 24"></li>
    <li style="--i: 25"></li>
    <li style="--i: 26"></li>
    <li style="--i: 27"></li>
    <li style="--i: 28"></li>
    <li style="--i: 29"></li>
    <li style="--i: 30"></li>
    <li style="--i: 31"></li>
  </ul>
  <ul style="--v: 8; --t: 36; --direction:reverse">
    <li style="--i: 0"></li>
    <li style="--i: 1"></li>
    <li style="--i: 2"></li>
    <li style="--i: 3"></li>
    <li style="--i: 4"></li>
    <li style="--i: 5"></li>
    <li style="--i: 6"></li>
    <li style="--i: 7"></li>
    <li style="--i: 8"></li>
    <li style="--i: 9"></li>
    <li style="--i: 10"></li>
    <li style="--i: 11"></li>
    <li style="--i: 12"></li>
    <li style="--i: 13"></li>
    <li style="--i: 14"></li>
    <li style="--i: 15"></li>
    <li style="--i: 16"></li>
    <li style="--i: 17"></li>
    <li style="--i: 18"></li>
    <li style="--i: 19"></li>
    <li style="--i: 20"></li>
    <li style="--i: 21"></li>
    <li style="--i: 22"></li>
    <li style="--i: 23"></li>
    <li style="--i: 24"></li>
    <li style="--i: 25"></li>
    <li style="--i: 26"></li>
    <li style="--i: 27"></li>
    <li style="--i: 28"></li>
    <li style="--i: 29"></li>
    <li style="--i: 30"></li>
    <li style="--i: 31"></li>
    <li style="--i: 32"></li>
    <li style="--i: 33"></li>
    <li style="--i: 34"></li>
    <li style="--i: 35"></li>
  </ul>
</main>
  
  

</body>

</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
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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205