-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
249 lines (244 loc) · 14 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
<!DOCTYPE html>
<html>
<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">
<meta name="format-detection" content="telephone=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Minimalism</title>
<link rel="stylesheet" href="stylesheets/index.css">
<link rel="stylesheet" href="stylesheets/animete.css">
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<audio id="audio" src="music/bgmusic.mp3" preload="none" loop="loop"></audio>
<div id="content">
<img class="musicBtn" src="img/music.png" alt="">
<img class="animate fadeInUpDown" src="img/nextpage.png" alt="">
<div id="loading">
<div id="casePourpre">
<div id="load">
<p>loading</p>
</div>
<div id="vague">
<div id="vague1"></div>
<div id="vague2"></div>
<div id="vague3"></div>
<div id="vague4"></div>
<div id="vague5"></div>
<div id="vague6"></div>
</div>
</div>
</div>
<ul>
<li class="p1">
<div class="header animate fadeInDown"><img src="img/p1_header.png" alt=""></div>
<div class="main">
<img class="animate rotateIn" src="img/p1_tm1.png" alt="">
<img class="animate rotateIn" src="img/p1_tm2.png" alt="">
<img class="animate rotateIn" src="img/p1_tm3.png" alt="">
<img class="animate zoomIn" src="img/p1_trm.png" alt="">
<div class="text">
<img class="animate bounceInRight" src="img/p1_text1.png" alt="">
<img class="animate bounceInDown" src="img/p1_text2.png" alt="">
<img class="animate fadeIn" src="img/p1_text3.png" alt="">
<img class="animate fadeIn" src="img/p1_text4.png" alt="">
<img class="animate fadeIn" src="img/p1_text5.png" alt="">
<img class="animate fadeIn" src="img/p1_text6.png" alt="">
</div>
</div>
<div class="footer">
<img class="animate fadeIn" src="img/p1_footer.png" alt="">
<img class="animate fadeInLeft" src="img/p1_zleft.png" alt="">
<img class="animate fadeInRight" src="img/p1_zright.png" alt="">
</div>
</li>
<li class="p2">
<img class="animate fadeIn" src="img/p2_topbg.png" alt="">
<img class="animate fadeInDown" src="img/p2_bg.png" alt="">
<div class="logo">
<img class="animate bounceInDown" src="img/p2_trmt.png" alt=""><img class="animate fadeInUp" src="img/p2_logo.png" alt=""><img class="animate zoomIn" src="img/p2_line.png" alt=""><img class="animate fadeInDown" src="img/p2_logoe.png" alt="">
</div>
<div class="text">
<h4 class="animate fadeInRight">品牌的态度在这里体现</h4>
<p class="animate fadeIn">多行文字模板</p>
<p class="animate fadeIn">可根据需求调整文字布局</p>
<p class="animate fadeIn">现代简约风格模板</p>
<p class="animate fadeIn">适用简约风服装、鞋包、家居等品牌、活动宣传</p>
</div>
<div class="footer">
<img class="animate bounceInUp" src="img/p2_remb.png" alt=""><img class="animate fadeIn" src="img/p2_text.png" alt="">
</div>
</li>
<li class="p3">
<div class="header"><h3 class="zoomIn animate">极简主义</h3><i class="animate fadeInLeft"></i><b class="animate fadeInLeft"></b></div>
<div class="main"><img class="animate fadeInUp" src="img/p3_fgt.jpg" alt=""><img class="fadeInDown animate" src="img/p3_fgb.jpg" alt=""></div>
<div class="footer"><h3 class="fadeInRight animate">LOGO</h3><p class="fadeIn animate">一分钟搞定H5创作</p></div>
</li>
<li class="p4">
<div class="logo">
<img class="fadeInUp animate" src="img/p3_logobanner.png" alt="">
<img class="fadeIn animate" src="img/p3_logo.png" alt="">
<img class="fadeIn animate" src="img/p3_new.png" alt="">
<img class="zoomInDown animate" src="img/p3_xinping.png" alt="">
</div>
<div class="main">
<img class="zoomIn animate" src="img/p3_new1.jpg" alt="">
<img class="fadeInRight animate" src="img/p3_new2.jpg" alt="">
<img class="fadeInLeft animate" src="img/p3_new3.jpg" alt="">
<img class="fadeInUp animate" src="img/p3_new4.jpg" alt="">
</div>
</li>
<li class="p5">
<div class="bg">
<img class="animate zoomIn" src="img/p5_kuangtop.png" alt="">
<img class="animate fadeInUp" src="img/p5_kuangbtm.png" alt="">
<img class="animate zoomIn" src="img/p5_fengekuai.png" alt="">
</div>
<div class="main">
<img class="animate fadeInDown" src="img/p5_pic1.jpg" alt="">
<img class="animate fadeInUp" src="img/p5_pic2.jpg" alt="">
<div class="texttop">
<h3 class="animate fadeIn">
<img src="img/p5_rmb.png" alt="">
<span>2 9 8</span>
</h3>
<h4 class="animate zoomIn">简 约 装 饰 画</h4>
<p class="animate fadeInDown">尺寸：60*100</p>
<p class="animate fadeInDown">装裱方式：无框</p>
<p class="animate fadeInDown">画芯材质：油画布</p>
<p class="animate fadeInDown">商 品 卖 点 精 炼</p>
</div>
<div class="textbtm">
<h4 class="animate zoomIn">设 计 理 念</h4>
<p class="animate fadeInDown">追求自由，喜欢游走</p>
<p class="animate fadeInDown">执着并敢于追梦</p>
<p class="animate fadeInDown">特立独行的斑马族</p>
</div>
<div class="logo animate fadeIn">LO 标识 GO</div>
</div>
</li>
<li class="p6">
<div class="outer">
<div class="lin1 animate fadeInLeft"></div>
<div class="lin2 animate fadeInDown"></div>
<div class="tip">
<img class="animate fadeInRight" src="img/p2_rembL.png" alt="">
<p class="animate bounceIn">左右滑动查看</p>
<img class="animate fadeInLeft" src="img/p2_rembR.png" alt="">
</div>
<img class="animate fadeInRight" src="img/p6_trm.png" alt="">
</div>
<div class="slider">
<ul class="inner">
<li>
<img src="img/p6_pic1.jpg" alt="">
<h2>只为美好生活</h2>
<div class="text">
<p>我们的心愿是</p>
<p>为大众创造更加美好的日常生活</p>
<p>提供种类繁多、美观实用</p>
<p>老百姓买得起的家居用品</p>
</div>
</li>
<li>
<img src="img/p6_pic2.jpg" alt="">
<h2>模板说明</h2>
<div class="text">
<p>每张可配独立标题+文字说明</p>
<p>用途：</p>
<p>1.工艺细节展示</p>
<p>2.店面展示...</p>
</div>
</li>
</ul>
</div>
<div class="count">
<span class="cur"></span><span></span>
</div>
</li>
<li class="p7">
<div class="pics">
<img class="animate rotateIn" src="img/p7_bg.png" alt="">
<img class="animate zoomIn" src="img/p7_vase.png" alt="">
<img class="animate bounceInRight" src="img/p7_lat.png" alt="">
<img class="animate bounceInLeft" src="img/p7_zebra.png" alt="">
</div>
<div class="text">
<p class="animate zoomIn">MAKA</p>
<p class="animate fadeIn">最 让 你 骄 傲 的</p>
<p class="animate flipInX">角 落 搭 配</p>
<p class="animate fadeInUp">活动时间：X月X日-X月X日</p>
</div>
</li>
<li class="p8">
<div class="pics">
<img class="animate fadeInUp" src="img/p8_bg.png" alt="">
<img class="animate zoomIn" src="img/p8_title.png" alt="">
<img class="animate lightSpeedIn" src="img/p8_titleE.png" alt="">
<img class="animate rotateInDownLeft" src="img/p8_lin.png" alt="">
<img class="animate fadeInLeft" src="img/p8_pic1.jpg" alt="">
<img class="animate fadeInRight" src="img/p8_pic2.jpg" alt="">
</div>
<div class="text">
<p><img class="animate rotateIn" src="img/p8_btn1.png" alt=""><span class="animate fadeIn">关注 MAKA 官方微信平台</span></p>
<p><img class="animate rotateIn" src="img/p8_btn2.png" alt=""><span class="animate fadeIn">回复 晒图 获取活动页面</span></p>
<p><img class="animate rotateIn" src="img/p8_btn3.png" alt=""><span class="animate fadeIn">发布并上传图片 参与活动</span></p>
<p><img class="animate rotateIn" src="img/p8_btn4.png" alt=""><span class="animate fadeIn">根据情况编辑活动内容</span></p>
<p><img class="animate rotateIn" src="img/p8_btn5.png" alt=""><span class="animate fadeIn">排版灵活可调</span></p>
</div>
</li>
<li class="p9">
<div class="header">
<img src="img/p9_bg.jpg" alt="">
<img class="animate fadeIn" src="img/p9_logo.png" alt="">
<img class="animate bounceIn" src="img/p9_trbg.png" alt="">
<img class="animate bounceInB" src="img/p9_trx.png" alt="">
</div>
<div class="code">
<img class="animate animate rotateIn" src="img/p9_codebgk1.png" alt="">
<img class="animate animate rotateIn" src="img/p9_codebgk2.png" alt="">
<img class="animate zoomIn" src="img/p9_codebg1.png" alt="">
<img class="animate fadeIn" src="img/p9_code.png" alt="">
<img class="animate fadeInDown" src="img/p9_codetxt.png" alt="">
</div>
<div class="call animate fadeIn">
<a href="tel:15600564715">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="80px" height="80px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<path d="M478.584,501.876c4.488-4.488,6.12-9.384,4.896-14.688c-0.408-2.446-1.43-4.69-3.062-6.73s-3.468-3.876-5.508-5.508
l-72.216-42.229l-0.612-0.61c-2.448-1.226-5.712-1.836-9.792-1.836c-6.528,0-11.628,2.039-15.3,6.118l-21.42,21.421
c-1.226,1.225-2.856,1.837-4.896,1.837c-4.896-0.816-10.812-3.062-17.748-6.732c-5.712-3.264-12.954-7.854-21.726-13.771
c-8.772-5.916-18.87-14.587-30.294-26.011c-8.16-8.566-15.708-17.136-22.644-25.704c-5.712-6.936-11.016-14.484-15.912-22.644
s-7.548-15.3-7.956-21.42c0-2.04,0.612-3.672,1.836-4.896l18.36-18.36c3.264-3.264,5.304-7.242,6.12-11.934
c0.816-4.692,0.204-9.078-1.836-13.158l-39.78-74.664c-3.264-6.528-8.16-9.792-14.688-9.792c-4.08,0-8.16,1.632-12.24,4.896
l-48.96,49.572c-2.448,2.04-4.59,4.998-6.426,8.874c-1.836,3.876-2.958,7.446-3.366,10.71v15.3c0,0,2.652,12.648,7.956,37.944
c5.304,25.296,14.586,44.268,27.846,56.916c13.26,12.647,32.742,36.516,58.446,71.604c22.032,22.032,42.636,39.372,61.812,52.021
c19.176,12.646,36.414,22.134,51.714,28.458c15.3,6.322,28.254,10.302,38.86,11.934c10.608,1.632,18.156,2.448,22.646,2.448
c2.04,0,3.672-0.104,4.896-0.307c1.226-0.203,2.04-0.307,2.448-0.307c3.264-0.408,6.731-1.53,10.404-3.366
c3.672-1.836,6.73-3.978,9.18-6.426L478.584,501.876L478.584,501.876z M306,90c42.024,0,81.702,8.058,119.034,24.174
c37.332,16.116,69.768,37.944,97.308,65.484s49.368,59.976,65.484,97.308S612,353.976,612,396c0,28.152-3.672,55.284-11.016,81.396
c-7.346,26.11-17.646,50.488-30.906,73.134c-13.26,22.644-29.172,43.248-47.736,61.812c-18.562,18.564-39.168,34.478-61.812,47.736
c-22.646,13.26-47.022,23.562-73.135,30.906C361.284,698.328,334.152,702,306,702c-28.152,0-55.284-3.672-81.396-11.016
c-26.112-7.346-50.49-17.646-73.134-30.906c-22.644-13.26-43.248-29.172-61.812-47.736c-18.564-18.562-34.476-39.168-47.736-61.812
c-13.26-22.646-23.562-47.022-30.906-73.134C3.672,451.284,0,424.152,0,396c0-28.152,3.672-55.284,11.016-81.396
c7.344-26.112,17.646-50.49,30.906-73.134c13.26-22.644,29.172-43.248,47.736-61.812c18.564-18.564,39.168-34.476,61.812-47.736
c22.644-13.26,47.022-23.562,73.134-30.906C250.716,93.672,277.848,90,306,90z"/>
</svg> | 联系我们
</a>
</div>
<div class="text">
<img class="animate bounceInRight" src="img/p1_text1.png" alt="">
<img class="animate bounceInDown" src="img/p1_text2.png" alt="">
<img class="animate fadeIn" src="img/p1_text3.png" alt="">
<img class="animate fadeIn" src="img/p1_text4.png" alt="">
<img class="animate fadeIn" src="img/p1_text5.png" alt="">
<img class="animate fadeIn" src="img/p1_text6.png" alt="">
</div>
</li>
</ul>
</div>
</body>
</html>