html实现爱情告白(附源码)

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/127964115

---

**html实现爱情告白(附源码)**html实现爱情告白源码，通过九个模块界面展现自己的爱情告白，主界面通过翻书模式，查阅爱情告白主题，上下滑动切换界面，查看爱情告白内容。

1.设计来源

html实现爱情告白，爱情告白是主题，所以就用了九个界面来进行了告白，把你想说的都写上吧。天长地久，可不就感动了那个人。

1.1 主界面

爱情告白主题，书本形式展开内容，里面有九个界面的主题介绍。具体体现方式见下面动态效果。

1.2 执子之手，与子偕老

执子之手，与子偕老：只要有一丝希望我就绝不放弃希望!我就是一个不轻易认输!不轻易放弃希望的人!所以我一直在拼搏在努力!自从与你相爱以来我就有了梦想!你就是我最大的梦想! 具体体现方式见下面动态效果。

1.3 死生契阔，与子成说

死生契阔，与子成说：牵挂是一颗心对另一颗心的深情惦记，一缕相思一种幸福一份温情，醉了两人的心扉，绽放了两朵心花。牵挂是刻骨铭心的思念，就象我漫长的等待。 具体体现方式见下面动态效果。

1.4 生当复来归，死当长相思

生当复来归，死当长相思：请你想起我的名字，在你缺少安慰的时候，我要你记得，我就是那个时刻惦念你的人，我就是那个，关心你的人，我就是喜欢你的人。 具体体现方式见下面动态效果。

1.5 自君之出矣，明镜暗不治

自君之出矣，明镜暗不治：爱像冬日的一缕阳光，温暖你冰凉的心灵;爱像沙漠里的甘泉，滋润你干涸的心田;爱像一盏明灯，引导迷茫的你走向正确的道路。让爱永驻你的每一天! 具体体现方式见下面动态效果。

1.6 思君如流水，何有穷已时

思君如流水，何有穷已时：时间在指尖中流逝，万物在雨露下滋长，星辰在昼夜里交替，我们在理想上行走。快乐与困苦交织，新生伴随老死，让我们珍惜眼前，相拥永远。 具体体现方式见下面动态效果。

1.7 南有乔木，不可休思

南有乔木，不可休思：爱情是爱与爱的沟通，也是情与情的呼应。不仅仅是经典的“三字告白”，更是默默的付出和真诚的关心。它无须形影相随，却要求心心相印。 具体体现方式见下面动态效果。

1.8 汉有游女，不可求思

汉有游女，不可求思：我抛除一切杂念，用真情在心里铸成一座堡垒，把我对你的爱放到了里边。我对堡垒做了真空处理，使我对你的爱时刻保鲜，保质期是我的一生。 具体体现方式见下面动态效果。

1.9 思君如明烛，煎心且衔泪

思君如明烛，煎心且衔泪：我们的爱情，像逗号一样走走停停，像分号一样冗长拖沓，像省略号一样深沉忧郁……今天忍不住发出一个大大的问号，你能否给出一个痛快的感叹号! 具体体现方式见下面动态效果。

2.效果和源码

2.1 动态效果

下面视频是界面的完整效果，界面分为九个版块，寓意天长地久，主版块简单描述了九个版块的信息。

2.2 源代码

这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。

   
    
    
    
     
     
     
    
    
    
    
    
   

 
  

  
 
    

      

        

          

            爱情告白
          
          

            
          
          

            上下拖动查看，或者点击右边圆圈圈。
          
        
        

          

            执子之手，与子偕老
          
          

            

              
亲爱的,Girl：
              

                    只要有一丝希望我就绝不放弃希望!我就是一个不轻易认输!不轻易放弃希望的人!所以我一直在拼搏在努力!自从与你相爱以来我就有了梦想!你就是我最大的梦想!
              
              

                Boy 书
              
              

                纪念册 |
                浪漫告白 |
                爱心告白 |
                定制告白
              
            
          
          

            上下拖动查看，或者点击右边圆圈圈。
          
        
        

          

            死生契阔，与子成说
          
          

            

              
亲爱的,Girl：
              

                    牵挂是一颗心对另一颗心的深情惦记，一缕相思一种幸福一份温情，醉了两人的心扉，绽放了两朵心花。牵挂是刻骨铭心的思念，就象我漫长的等待。
              
              

                Boy 书
              
              

                纪念册 |
                浪漫告白 |
                爱心告白 |
                定制告白
              
            
          
          

            上下拖动查看，或者点击右边圆圈圈。
          
        
        

          

            生当复来归，死当长相思
          
          

            

              
亲爱的,Girl：
              

                    请你想起我的名字，在你缺少安慰的时候，我要你记得，我就是那个时刻惦念你的人，我就是那个，关心你的人，我就是喜欢你的人。
              
              

                Boy 书
              
              

                纪念册 |
                浪漫告白 |
                爱心告白 |
                定制告白
              
            
          
          

            上下拖动查看，或者点击右边圆圈圈。
          
        
        

          

            自君之出矣，明镜暗不治
          
          

            

              
亲爱的,Girl：
              

                    爱像冬日的一缕阳光，温暖你冰凉的心灵;爱像沙漠里的甘泉，滋润你干涸的心田;爱像一盏明灯，引导迷茫的你走向正确的道路。让爱永驻你的每一天!
              
              

                Boy 书
              
              

                纪念册 |
                浪漫告白 |
                爱心告白 |
                定制告白
              
            
          
          

            上下拖动查看，或者点击右边圆圈圈。
          
        
        

          

            思君如流水，何有穷已时
          
          

            

              
亲爱的,Girl：
              

                    时间在指尖中流逝，万物在雨露下滋长，星辰在昼夜里交替，我们在理想上行走。快乐与困苦交织，新生伴随老死，让我们珍惜眼前，相拥永远。
              
              

                Boy 书
              
              

                纪念册 |
                浪漫告白 |
                爱心告白 |
                定制告白
              
            
          
          

            上下拖动查看，或者点击右边圆圈圈。
          
        
        

          

            南有乔木，不可休思
          
          

            

              
亲爱的,Girl：
              

                    爱情是爱与爱的沟通，也是情与情的呼应。不仅仅是经典的“三字告白”，更是默默的付出和真诚的关心。它无须形影相随，却要求心心相印。
              
              

                Boy 书
              
              

                纪念册 |
                浪漫告白 |
                爱心告白 |
                定制告白
              
            
          
          

            上下拖动查看，或者点击右边圆圈圈。
          
        
        

          

            汉有游女，不可求思
          
          

            

              
亲爱的,Girl：
              

                    我抛除一切杂念，用真情在心里铸成一座堡垒，把我对你的爱放到了里边。我对堡垒做了真空处理，使我对你的爱时刻保鲜，保质期是我的一生。
              
              

                Boy 书
              
              

                纪念册 |
                浪漫告白 |
                爱心告白 |
                定制告白
              
            
          
          

            上下拖动查看，或者点击右边圆圈圈。
          
        
        

          

            思君如明烛，煎心且衔泪
          
          

            

              
亲爱的,Girl：
              

                    我们的爱情，像逗号一样走走停停，像分号一样冗长拖沓，像省略号一样深沉忧郁……今天忍不住发出一个大大的问号，你能否给出一个痛快的感叹号!
              
              

                Boy 书
              
              

                纪念册 |
                浪漫告白 |
                爱心告白 |
                定制告白
              
            
          
          

            …内容已到结尾，可我们的爱情长跑还在进行中…
          
        
      
      

    
 
 
 
 
 


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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242

---

源码下载

html实现爱情告白(附源码） 点击下载

---

     💞 关注博主 带你实现畅游前后端

     🏰 加入社区 带你体验马航不孤单

     💯 神秘个人简介 带你体验不一样得介绍

     🎀 酷炫邀请函 带你体验高大上得邀请

---

     ① 🉑提供云服务部署（有自己的阿里云）；
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
     如🈶合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

---

     亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌

---

原文地址：https://blog.csdn.net/weixin_43151418/article/details/127964115（防止抄袭，原文地址不可删除）