generated from TianVast/ailili
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
462 lines (462 loc) · 17.6 KB
/
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
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
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>我们的爱情</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/sty.css" rel="stylesheet" />
<link href="css/one.css" rel="stylesheet" />
<link href="css/photopile.css" rel="stylesheet">
<link rel="stylesheet" href="css/animate.css">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?49c9e828e38545414078413b222513c4";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body class="body">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" data-anijs="if: mouseover, do: bounceIn animated" style="background-color: #f99ec7 !important;box-shadow: 0 0 2px 0 #acacac;">
<img class="pull-left" style="display: inline-block !important;margin: 10px 25px 10px 60px" src="images/logo.png" title="">
<div class="col-xs-8 text-center txt" data-bind="">
陪伴是最长情的告白，无论生老病死，我都愿陪你到天荒地老
</div>
</nav>
<div class="container-fluid" style="margin-top: 88px">
<div id="begin" class="col-xs-12 text-center txt underline" data-anijs="if: mouseover, do: swing animated">
<h2 class="col-xs-12" style="font-family: 'Great Vibes',cursive;
color: #283a44; padding-bottom: 0px;">我们的遇见，是爱情的开始</h2>
<h2 class="col-xs-12" style="font-family: 'Great Vibes',cursive;
color: #283a44; padding-bottom: 0px;">我们的爱情，是幸福的开始</h2>
<h2 class="col-xs-12" style="font-family: 'Great Vibes',cursive;
color: #283a44; padding-bottom: 0px;">我们的幸福，是平平淡淡的陪伴</h2>
</div>
<span class="wow fadeInUp animated col-xs-12 text-center" data-wow-delay="0.7s" style="color: rgb(239, 106, 138);
visibility: visible; animation-delay: 0.7s; animation-name: fadeInUp;margin: 15px auto;font-size: 16px">
♥ 2014-07-20 ♥</span>
<div class="col-xs-12">
<div class="col-xs-6 text-right" data-anijs="if: click, do: rollOut animated, to: .boy, after: $removeAnim">
<ul class="ch-grid man wow flipInX animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: flipInX;">
<li class="boy">
<img src="images/boy.png" alt="">
</li>
</ul>
</div>
<div class="and">&</div>
<div class="col-xs-6 text-left" data-anijs="if: click, do: rollIn animated, to: .girl, after: $removeAnim">
<ul class="ch-grid woman wow flipInX animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: flipInX;">
<li class="girl">
<img src="images/girl.png" alt="">
</li>
</ul>
</div>
</div>
<div class="col-xs-12 text-center txt underline">
<h2 class="col-xs-12" style="font-family: 'Great Vibes',cursive;
color: #283a44; padding-bottom: 0px;">我们的爱情历程</h2>
</div>
<div id="dslc-module-4" class=" dslc-module-Pluton_Time_Line dslc-in-viewport-check dslc-in-viewport-anim-none dslc-module-handle-like-regular dslc-in-viewport" data-module-id="4" data-dslc-module-id="Pluton_Time_Line" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="" style="animation: forwards 0.65s ease 0s 1 normal none running;">
<div class="ilove_timeline">
<div class="col-md-12">
<ul class="timeline col-xs-12">
<li class="col-xs-12" data-anijs="if: scroll, on: window, do: slideInLeft animated, before: $scrollReveal repeat">
<div class="timeline-badge wow fadeInUp animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
<i> ♥ </i>
</div>
<div class="timeline-panel wow fadeInLeft animated" data-wow-delay="0.7s" style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInLeft;">
<div class="" style="padding: 0;width: 102px;position: relative;float: left">
<img src="images/x1.png" alt="" style="width: 102px;height: 102px">
</div>
<div class="" style="padding: 0 15px 0 135px">
<div class="timeline-heading">
<p><br></p>
</div>
<div class="timeline-body">
<div>
<div>
<p class="txtcolor">那一天，在朋友家遇见你，
你的与众不同，
就像一个天使，
那个笑容，灿烂我整个夏天，
你的出现是我
唯一的心动，
我心里对你的想念
充满每一天</p>
</div>
</div>
</div>
<div class="timeline-foot">2014年7月20日</div>
</div>
</div>
</li>
<li class="timeline-inverted col-xs-12" data-anijs="if: scroll, on: window, do: slideInRight animated, before: $scrollReveal repeat">
<div class="timeline-badge wow fadeInUp animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
<i> ♥ </i>
</div>
<div class="timeline-panel wow fadeInLeft animated" data-wow-delay="0.7s" style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInLeft;">
<div class="" style="padding: 0;width: 102px;position: relative;float: right">
<img src="images/x2.png" alt="" style="width: 102px;height: 102px">
</div>
<div class="" style="padding: 0 135px 0 15px">
<div class="timeline-heading">
<p><br></p>
</div>
<div class="timeline-body">
<div>
<div>
<p class="txtcolor">我的心动，你不知道，我亦不敢表达，于是第二天，想了个借口，请你们所有人一起吃饭，想法坐在你身边</p>
</div>
</div>
</div>
<div class="timeline-foot">2014年7月21日</div>
</div>
</div>
</li>
<li class=" col-xs-12" data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat">
<div class="timeline-badge wow fadeInUp animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
<i> ♥ </i>
</div>
<div class="timeline-panel wow fadeInLeft animated" data-wow-delay="0.7s" style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInLeft;">
<div class="" style="padding: 0;width: 102px;position: relative;float: left">
<img src="images/x3.png" alt="" style="width: 102px;height: 102px">
</div>
<div class="" style="padding: 0 15px 0 135px">
<div class="timeline-heading">
<p><br></p>
</div>
<div class="timeline-body">
<div>
<div>
<p class="txtcolor">第三天，还是我请客，去唱歌，很多人一起，爱在心口难开，不想错过，不想失去（偷拍了很多照片，全都是你）</p>
</div>
</div>
</div>
<div class="timeline-foot">2014年7月22日</div>
</div>
</div>
</li>
<li class="timeline-inverted col-xs-12" data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat">
<div class="timeline-badge wow fadeInUp animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
<i> ♥ </i>
</div>
<div class="timeline-panel wow fadeInLeft animated" data-wow-delay="0.7s" style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInLeft;">
<div class="" style="padding: 0;width: 102px;position: relative;float: right">
<img src="images/x4.png" alt="" style="width: 102px;height: 102px">
</div>
<div class="" style="padding: 0 135px 0 15px">
<div class="timeline-heading">
<p><br></p>
</div>
<div class="timeline-body">
<div>
<div>
<p class="txtcolor">没有合适理由请客，胡思乱想，懵懵懂懂上了一天班</p>
</div>
</div>
</div>
<div class="timeline-foot">2014年7月23日</div>
</div>
</div>
</li>
<li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat" class=" col-xs-12">
<div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
<i> ♥ </i>
</div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
<div class="" style="padding: 0;width: 102px;position: relative;float: left">
<img src="images/x5.png" alt="" style="width: 102px;height: 102px">
</div>
<div class="" style="padding: 0 15px 0 135px">
<div class="timeline-heading">
<p><br></p>
</div>
<div class="timeline-body">
<div>
<div>
<p class="txtcolor">终究离开了这里去了远方，这里只是你旅途的中间站，我是你的过客，可你却留在我心中，思念，抑制不住，准备离职南下</p>
</div>
</div>
</div>
<div class="timeline-foot">2014年7月25日</div>
</div>
</div>
</li>
<li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat" class="timeline-inverted col-xs-12">
<div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
<i> ♥ </i>
</div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
<div class="" style="padding: 0;width: 102px;position: relative;float: left">
<img src="images/x6.png" alt="" style="width: 102px;height: 102px">
</div>
<div class="" style="padding: 0 15px 0 135px">
<div class="timeline-heading">
<p><br></p>
</div>
<div class="timeline-body">
<div>
<div>
<p class="txtcolor">把那天唱歌的照片发给你，全是你的身影，我想，这应该算一种隐晦的表白吧，忐忑不安中</p>
</div>
</div>
</div>
<div class="timeline-foot">2014年7月26日</div>
</div>
</div>
</li>
<li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat" class="col-xs-12">
<div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
<i> ♥ </i>
</div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
<div class="" style="padding: 0;width: 102px;position: relative;float: left">
<img src="images/x7.png" alt="" style="width: 102px;height: 102px">
</div>
<div class="" style="padding: 0 15px 0 135px">
<div class="timeline-heading">
<p><br></p>
</div>
<div class="timeline-body">
<div>
<div>
<p class="txtcolor">开始频繁的网上交流，虽在远方，却日渐熟悉，开始了解开始期待。离职已提，收拾行囊</p>
</div>
</div>
</div>
<div class="timeline-foot">2014年8月1日</div>
</div>
</div>
</li>
<li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat" class="timeline-inverted col-xs-12">
<div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
<i> ♥ </i>
</div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
<div class="" style="padding: 0;width: 102px;position: relative;float: left">
<img src="images/x8.png" alt="" style="width: 102px;height: 102px">
</div>
<div class="" style="padding: 0 15px 0 135px">
<div class="timeline-heading">
<p><br></p>
</div>
<div class="timeline-body">
<div>
<div>
<p class="txtcolor">你说你会回来，欣喜若狂，重新租住合适的地方，开始准备两个人的一切，装点小屋，打理帅气的自己</p>
</div>
</div>
</div>
<div class="timeline-foot">2014年8月30日</div>
</div>
</div>
</li>
<li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat" class=" col-xs-12">
<div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
<i> ♥ </i>
</div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
<div class="" style="padding: 0;width: 102px;position: relative;float: left">
<img src="images/x9.png" alt="" style="width: 102px;height: 102px">
</div>
<div class="" style="padding: 0 15px 0 135px">
<div class="timeline-heading">
<p><br></p>
</div>
<div class="timeline-body">
<div>
<div>
<p class="txtcolor">在火车站接到你，前前后后围着你转，开心得飞起来，亲手为你做了第一餐饭，当然，还有其他好多友人（无处不在的灯泡）</p>
</div>
</div>
</div>
<div class="timeline-foot">2014年10月26日</div>
</div>
</div>
</li>
<li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat" class="timeline-inverted col-xs-12">
<div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
<i> ♥ </i>
</div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
<div class="" style="padding: 0;width: 102px;position: relative;float: left">
<img src="images/x10.png" alt="" style="width: 102px;height: 102px">
</div>
<div class="" style="padding: 0 15px 0 135px">
<div class="timeline-heading">
<p><br></p>
</div>
<div class="timeline-body">
<div>
<div>
<p class="txtcolor">第一次看电影，第一次牵手，第一次两个吃饭，第一次约会，无需多言，自然而然确定关系</p>
</div>
</div>
</div>
<div class="timeline-foot">2014年11月5日</div>
</div>
</div>
</li>
<li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat" class=" col-xs-12">
<div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
<i> ♥ </i>
</div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
<div class="" style="padding: 0;width: 102px;position: relative;float: left">
<img src="images/x11.png" alt="" style="width: 102px;height: 102px">
</div>
<div class="" style="padding: 0 15px 0 135px">
<div class="timeline-heading">
<p><br></p>
</div>
<div class="timeline-body">
<div>
<div>
<p class="txtcolor">第一次亲吻，第一次拥抱</p>
</div>
</div>
</div>
<div class="timeline-foot">2014年11月30日</div>
</div>
</div>
</li>
<li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat" class="timeline-inverted col-xs-12">
<div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
<i> ♥ </i>
</div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
<div class="" style="padding: 0;width: 102px;position: relative;float: left">
<img src="images/x12.png" alt="" style="width: 102px;height: 102px">
</div>
<div class="" style="padding: 0 15px 0 135px">
<div class="timeline-heading">
<p><br></p>
</div>
<div class="timeline-body">
<div>
<div>
<p class="txtcolor">成为合法夫妻，从此以后，生死契阔，与子成说，执子之手，与子偕老。
往后余生，风雨是你，平淡是你，清贫是你，荣华是你，心底温柔是你，目光所至，也是你。</p>
</div>
</div>
</div>
<div class="timeline-foot">2016年2月25日</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="col-xs-12 text-center txt underline">
<h2 class="col-xs-12" style="font-family: 'Great Vibes',cursive;
color: #283a44; padding-bottom: 0px;">我们的山盟海誓</h2>
</div>
<div class="col-xs-12 text-center " data-anijs="if: scroll,on: window,do: zoomInDown animated, before: $scrollReveal repeat">
<span class="col-xs-12" style="font-family: 'Great Vibes',cursive;color: #283a44; font-size: 20px;
margin: 15px;padding: 15px;line-height: 33px">
与你的相遇，是命中注定的一生一世。与你的相爱，是命中注定的地老天荒<br>
今生携手徜徉天地间，为你遮风挡雨，相濡以沫，并肩悠游滚滚红尘中<br>
即使有一天，你的步履变得蹒跚，青丝变成白发，红润的脸上爬满了皱纹，但我仍要携着你的手，漫步在夕阳的余辉下<br>
你，我一生最爱的人;你，我一生最想的人;你，我一生守候的人;你，我一生唯一的人<br>
不论你生病或是健康、富有或贫穷，始终忠於你，直到离开世界
</span>
</div>
<div class="col-xs-12 text-center txt underline">
<h2 class="col-xs-12" style="font-family: 'Great Vibes',cursive;
color: #283a44; padding-bottom: 0px;">我们的爱情见证</h2>
</div>
<div class="photopile-wrapper col-xs-12 text-center" data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat">
<ul class="photopile col-xs-12">
<li>
<a href="images/p1.jpg">
<img src="images/p1_s.jpg" alt="第一次相见" />
</a>
</li>
<li>
<a href="images/p2.jpg">
<img src="images/p2_s.jpg" alt="第一次约会" />
</a>
</li>
<li>
<a href="images/p3.jpg">
<img src="images/p3_s.jpg" alt="约会" />
</a>
</li>
<li>
<a href="images/p4.jpg">
<img src="images/p4_s.jpg" alt="看电影 " />
</a>
</li>
<li>
<a href="images/p5.jpg">
<img src="images/p5_s.jpg" alt="拥抱" />
</a>
</li>
<li>
<a href="images/p6.jpg">
<img src="images/p6_s.jpg" alt="聚会" />
</a>
</li>
<li>
<a href="images/p7.jpg">
<img src="images/p7_s.jpg" alt="离别" />
</a>
</li>
<li>
<a href="images/p8.jpg">
<img src="images/p8_s.jpg" alt="亲吻" />
</a>
</li>
<li>
<a href="images/p9.jpg">
<img src="images/p9_s.jpg" alt="接送" />
</a>
</li>
<li>
<a href="images/p10.jpg">
<img src="images/p10_s.jpg" alt="结婚" />
</a>
</li>
</ul>
</div>
<p class="text-center" style="font-size: 10px">照片墙的照片来源于梦幻摄影机构，网上图片，个人学习使用</p>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/photopile.js"></script>
<script type="text/javascript">
$(function(){
PhotoPile().scatter();
});
</script>
</div>
<audio id="bgmMusic" src="faded.mp3" preload="auto" type="audio/mp3" autoplay="" loop=""></audio>
<script src="js/anijs-min.js"></script>
<script src="js/anijs-helper-scrollreveal-min.js"></script>
<script src="js/flu.js" type="text/javascript"></script>
<div class="heart " rel="like" style=" height:130px;
width:130px;">
<p id="pClick" style="text-align: center;font-size: 10px;margin-bottom: 0px;
margin-top: 85px;">点赞接受</p>
<div class="heartCa"></div></div>
<script type="text/javascript">
$(document).ready(function(){
$('body').on("click",'.heart',function(){
$(this).css("background-position","")
$(this).addClass("heartAnimation");
$(this).addClass("clickH");
$('#pClick').addClass('tC');
setTimeout(function () {
$(".heart").removeClass('heartAnimation');
}, 1000);
});
});
</script>
</body>
</html>