HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)_h5表白网页在线制作

作者：你好赵伟 | 2024-02-20 18:59:43

踩

h5表白网页在线制作

HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)

520七夕节告白,也就是中国的情人节,你除了送花你还会什么？？快来制作高端大气上档次的表白网页吧

尽管没有深情的告白，也没有诚挚的诺言，但在顺其自然中我们就成为了彼此的唯一。余生漫漫，我愿与你风雨中执手，平淡中偕老。

表白作品介绍

1.网页作品简介方面 ：520❤七夕情人节❤告白网页HTML ,喜欢的可以下载，文章页支持手机PC响应式布局。可直接替换相片就能用噢!

2.网页作品编辑方面：此作品为七夕情人节告白网页设计题材，代码华丽炫酷 HTML+CSS+JavaScript 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

一、作品演示

1.PC端电脑端(演示)

>>>点击进入>>>100款❤表白源码演示地址

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现 (教程)

html(部分)

音乐替换:如需更换mp3背景音乐,可自行下载后并找到mp3 文件夹更换即可~ 戳我>>>免费下载MP3
注意: 下载后的音乐文件需要修改名称和mp3文件夹里的的名字保持一致即可

     <div id="content">
      <ul class="content-wrap">
        <!-- 第一副画面 -->
        <li>
          <!-- 背景图 -->
          <div class="a_background">
            <div class="a_background_top"></div>
            <div class="a_background_middle"></div>
            <div class="a_background_botton"></div>
          </div>
          <!-- 云 -->
          <div class="cloudArea">
            <div class="cloud cloud1"></div>
            <div class="cloud cloud2"></div>
          </div>
          <!-- 太阳 -->
          <div id="sun"></div>
        </li>
        <!-- 第二副画面 -->
        <li>
          <!-- 背景图 -->
          <div class="b_background"></div>
          <div class="b_background_preload"></div>
          <!-- 商店 -->
          <div class="shop">
            <div class="door">
              <div class="door-left"></div>
              <div class="door-right"></div>
            </div>
            <!-- 灯 -->
            <div class="lamp"></div>
          </div>
          <!-- 鸟 -->
          <div class="bird"></div>
        </li>
        <!-- 第三副画面 -->
        <li>
          <!-- 背景图 -->
          <div class="c_background">
            <div class="c_background_top"></div>
            <div class="c_background_middle"></div>
            <div class="c_background_botton"></div>
          </div>
          <!-- 小女孩 -->
          <div class="girl"></div>
          <div class="bridge-bottom">
            <div class="water">
              <div id="water1" class="water_1"></div>
              <div id="water2" class="water_2"></div>
              <div id="water3" class="water_3"></div>
              <div id="water4" class="water_4"></div>
            </div>
          </div>
          <!-- 星星 -->
          <ul class="stars">
            <li class="stars1"></li>
            <li class="stars2"></li>
            <li class="stars3"></li>
            <li class="stars4"></li>
            <li class="stars5"></li>
            <li class="stars6"></li>
          </ul>
          <!-- 慕课网logo图 -->
          <div class="logo">祝天下有情人终成眷属</div>
        </li>
      </ul>
      <!-- 雪花 -->
      <div id="snowflake"></div>
      <!-- 小男孩 -->
      <div id="boy" class="charector"></div>
    </div>
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

css (部分)

.a_background {
    width: 100%;
    height: 100%;
    position: absolute
}

.a_background_top {
    width: 100%;
    height: 71.6%;
    background-image: url("../images/55addf6900019d8f14410645.png");
    background-size: 100% 100%
}

.a_background_middle {
    width: 100%;
    height: 13.1%;
    background-image: url("../images/55addf800001ff2e14410118.png");
    background-size: 100% 100%
}

.a_background_botton {
    width: 100%;
    height: 15.3%;
    background-image: url("../images/55addfcb000189b314410138.png");
    background-size: 100% 100%
}

.cloud {
    z-index: 2;
    position: absolute
}

.cloud1 {
    width: 100%;
    height: 30%;
    left: -5%;
    top: 15%;
    background: url("../images/55addfde0001aec501810101.png") no-repeat;
    -webkit-animation-name: smallCloud;
    -webkit-animation-duration: 30s;
    -webkit-animation-iteration: infinite;
    -moz-animation-name: smallCloud;
    -moz-animation-duration: 30s;
    -moz-animation-iteration: infinite
}

.cloud2 {
    width: 100%;
    height: 100%;
    right: -5%;
    background: url("../images/55addff500016df503010140.png") no-repeat;
    -webkit-animation-name: largeCloud;
    -webkit-animation-duration: 50s;
    -webkit-animation-iteration: infinite;
    -moz-animation-name: largeCloud;
    -moz-animation-duration: 50s;
    -moz-animation-iteration: infinite
}

@-webkit-keyframes smallCloud {
    0% {
        left: -5%
    }
    100% {
        left: 100%
    }
}

@-moz-keyframes smallCloud {
    0% {
        left: -5%
    }
    100% {
        left: 100%
    }
}

@-webkit-keyframes largeCloud {
    0% {
        right: -5%
    }
    100% {
        right: 100%
    }
}

@-moz-keyframes largeCloud {
    0% {
        right: -5%
    }
    100% {
        right: 100%
    }
}

#sun {
    background: url("../images/55ade004000106c202010201.png") no-repeat;
    position: absolute;
    z-index: 1;
    top: -30px;
    height: 201px;
    width: 201px;
    right: 100px;
    -webkit-transform: rotate(45deg);
    -webkit-animation-name: rotation;
    -webkit-animation-duration: 60s;
    -webkit-animation-iteration: 1;
    -webkit-animation-fill-mode: forwards;
    -moz-transform: rotate(45deg);
    -moz-animation-name: rotation;
    -moz-animation-duration: 60s;
    -moz-animation-iteration: 1;
    -moz-animation-fill-mode: forwards
}

@-webkit-keyframes rotation {
    0% {
        transform: translateX(0) translateY(0) rotate(45deg)
    }
    100% {
        transform: translateX(-2000px) translateY(400px) rotate(70deg)
    }
}

@-moz-keyframes rotation {
    0% {
        transform: translateX(0) translateY(0) rotate(45deg)
    }
    100% {
        transform: translateX(-2000px) translateY(400px) rotate(70deg)
    }
}
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