-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
235 lines (233 loc) · 16.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0" name="viewport">
<title>简历</title>
<!--<link rel="stylesheet" href="src/css/swiper.min.css">
<link rel="stylesheet" href="src/css/animate.min.css"/>
<link rel="stylesheet" href="src/css/index.css"> -->
</head>
<body>
<header id="header"></header>
<section id="section">
<nav class="navbar">
<div class="name">Dong Lee</div>
<div class="nav">
<ul>
<li>Tel:135-2555-3487</li>
<!-- <li>Email:757729134@qq.com</li> -->
</ul>
</div>
</nav>
<div class="swiper-container con1">
<div class="swiper-wrapper">
<!----------------------------page 1-------------------------------->
<div class="swiper-slide slide1">
<div class="corner corner1 ani" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="1s">
<img src="src/imgs/1.png" alt="">
</div>
<div class="corner corner2 ani" swiper-animate-effect="rotateInDownRight" swiper-animate-duration="1s">
<img src="src/imgs/3.png" alt="">
</div>
<div class="corner corner3 ani" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="1s">
<img src="src/imgs/2.png" alt="">
</div>
<div class="corner corner4 ani" swiper-animate-effect="rotateInDownRight" swiper-animate-duration="1s">
<img src="src/imgs/4.png" alt="">
</div>
<div class="pic">
<img src="src/imgs/pic02.jpg">
</div>
<div class="resume">
<span class="resume-name ani" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="2s">前端工程师</span><br>
<span class="resume-chatc ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="2s">爱生活 爱技术</span>
</div>
<div class="basic-info ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="3s">
<p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="4s">李 东</p>
<p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="5s">河南 信阳</p>
<p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="6s">中原工学院</p>
<p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="7s">本科</p>
</div>
<div class="ani icon" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="8s" style="animation-iteration-count:infinite">
<i class="ani iconfont"></i>
</div>
</div>
<!----------------------------page 2-------------------------------->
<div class="swiper-slide slide2">
<div class="work-exp ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1s">
<span class="ani">工作经历/Work-Experience</span>
</div>
<div class="work-exps">
<p class="work-exp1"><img class="point ani" src="src/imgs/8.png" alt="" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1s" swiper-animate-delay="2s"/><span class="date ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="3s">xxxx年xx月-xxxx年xx月</span><span class="company ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="4s">某某公司担任某某职位</span><span class="work-con ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="5s">
主要负责公司微信公众号日常运营,通过数据分析市场需求,以完善产品体验</span></p>
<p class="work-exp2"><img class="point ani" src="src/imgs/8.png" alt="" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1s" swiper-animate-delay="6s"/><span class="date ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="7s">xxxx年xx月-xxxx年xx月</span><span class="company ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="8s">某某公司担任某某职位</span><span class="work-con ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="9s">
主要负责公司微信公众号日常运营,通过数据分析市场需求,以完善产品体验</span></p>
<!-- <p class="work-exp3"><img class="point ani" src="src/imgs/8.png" alt="" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1s" swiper-animate-delay="8s"/><span class="date ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="9s">xxxx年xx月-xxxx年xx月</span><span class="company ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="10s">某某公司担任某某职位</span></p>
--> <!--<p class="work-exp4"><span class="date ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="12s">xxxx年xx月-xxxx年xx月</span><img class="point ani" src="src/imgs/8.png" alt="" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1s" swiper-animate-delay="11s"/><span class="company ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="13s" >某某公司担任某某职位</span></p>
<p class="work-exp5"><span class="date ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="15s">xxxx年xx月-xxxx年xx月</span><img class="point ani" src="src/imgs/8.png" alt="" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1s" swiper-animate-delay="13s"/><span class="company ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="16s">某某公司担任某某职位</span></p>-->
<img class="v-line ani" src="src/imgs/7.png" alt="" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="1s" />
</div>
<div class="ani icon" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="10s" style="animation-iteration-count:infinite">
<i class="ani iconfont"></i>
</div>
</div>
<!----------------------------page 3-------------------------------->
<div class="swiper-slide slide3">
<div class="works-show ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1s">
<span>作品展示/Works-Show</span>
</div>
<div class="works-show-con ani" >
<div class="pc container">
<span class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="3s">PC端</span>
<img class="item ani" src="src/imgs/8.png" alt="" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1s" swiper-animate-delay="2s">
<div class="img-con ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="4s">
<img class="pc-pic" src="src/imgs/meici.jpg" alt="">
</div>
</div>
<div class="mobile container">
<span class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="6s">移动端</span>
<img class="item ani" src="src/imgs/8.png" alt="" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1s" swiper-animate-delay="5s">
<div class="img-con ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="7s">
<img class="m-pic" src="src/imgs/resume.jpg" alt="">
</div>
</div>
<img src="src/imgs/7.png" alt="" class="v-line ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1s" swiper-animate-delay="1s" >
</div>
<div class="ani icon" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="8s" style="animation-iteration-count:infinite">
<i class="ani iconfont"></i>
</div>
</div>
<!--------------------------page 4---------------------->
<div class="swiper-slide slide4">
<div class="works-skill ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1s">
<span>工作技能/Work-Skill</span>
</div>
<div class="skill-item">
<span class="skill-item1 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1s">Js</span>
<span class="skill-item2 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="3s">Sublime</span>
<span class="skill-item3 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="5s">H5</span>
<span class="skill-item4 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="7s">Css3</span>
<span class="skill-item5 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="9s">webpack</span>
<span class="skill-rule1 ani">100%</span>
<span class="skill-rule2 ani">50%</span>
<div class="skill-axis">
<img src="src/imgs/10.png" alt="">
</div>
<img src="src/imgs/11.png" alt="" class="skill-value value1 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2s">
<img src="src/imgs/11.png" alt="" class="skill-value value2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="4s">
<img src="src/imgs/11.png" alt="" class="skill-value value3 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="6s">
<img src="src/imgs/11.png" alt="" class="skill-value value4 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="8s">
<img src="src/imgs/11.png" alt="" class="skill-value value5 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="10s">
</div>
<div class="ani icon" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="11s" style="animation-iteration-count:infinite">
<i class="ani iconfont"></i>
</div>
</div>
<!--------------------------page 5---------------------->
<div class="swiper-slide slide5">
<div class="edu-experience ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1s">
<span>教育经历/Edu-Experience</span>
</div>
<div class="edu-expes ani" >
<div class="edu-expe1 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="2s">
<p class="date">2008.9-2012.7</p>
<p class="org">中原工学院<br>机械设计制造及其自动化专业</p>
</div>
<div class="edu-expe2 ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="3s">
<p class="date">2004.9-2008.6</p>
<p class="org">河南省光山县第二高级中学</p>
</div>
</div>
<div class="pic ani" swiper-animate-effect="flipInX" swiper-animate-duration="1s" swiper-animate-delay="1s">
<img src="src/imgs/12.jpg">
</div>
<div class="ani icon" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="4s" style="animation-iteration-count:infinite">
<i class="ani iconfont"></i>
</div>
</div>
<!--------------------------page 6---------------------->
<div class="swiper-slide slide6">
<div class="self-assessment ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1s">
<span>自我评价/Self-Assessment</span>
</div>
<div class="pic-bom ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s">
<img src="src/imgs/16.png" alt="">
</div>
<div class="pic-mid ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2s">
<img src="src/imgs/14.png" alt="">
</div>
<div class="pic-flower ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="3s">
<img src="src/imgs/17.png" alt="">
</div>
<div class="container zi">
<img src="src/imgs/18.png" alt="" class="ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1s" swiper-animate-delay="4s">
<p class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="4s">自</p>
</div>
<div class="container wo">
<img src="src/imgs/18.png" alt="" class="ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1s" swiper-animate-delay="5s">
<p class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="5s">我</p>
</div>
<div class="container ping">
<img src="src/imgs/18.png" alt="" class="ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1s" swiper-animate-delay="6s">
<p class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="6s">评</p>
</div>
<div class="container lun">
<img src="src/imgs/18.png" alt="" class="ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1s" swiper-animate-delay="7s">
<p class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="7s">价</p>
</div>
<div class="v-line line1 ani" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1s" swiper-animate-delay="8s">
<img src="src/imgs/19.png" alt="">
</div>
<div class="text-ass ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="9s">
<p>做事认真负责,性格直爽,热爱学习。时间都去哪了这句话时刻提醒着自己,要努力,加油!</p>
</div>
<div class="cloud-pic cloud1 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="10s">
<img src="src/imgs/20.png" alt="">
</div>
<div class="cloud-pic cloud2 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="10s">
<img src="src/imgs/21.png" alt="">
</div>
<div class="cloud-pic cloud3 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="10s">
<img src="src/imgs/21.png" alt="">
</div>
<div class="ani icon" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="11s" style="animation-iteration-count:infinite">
<i class="ani iconfont"></i>
</div>
</div>
<!--------------------------page 7---------------------->
<div class="swiper-slide slide7">
<div class="contact-information ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1s">
<span>联系方式/Contact-Info</span>
</div>
<div class="iden-photo ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s">
<img class="self-bg" src="src/imgs/circle.gif" alt="">
<img class="self-pic" src="src/imgs/pic02.jpg" alt="">
</div>
<div class="con-english ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2s">
<p class="word">PLEASE CONTACT ME!</p>
</div>
<div class="con-info">
<div class="info-border ani" swiper-animate-effect="fadeInUpBig" swiper-animate-duration="1s" swiper-animate-delay="3s">
<img class="" src="src/imgs/23.png" alt="">
</div>
<p class="con-title ani" swiper-animate-effect="zoomInUp" swiper-animate-duration="1s" swiper-animate-delay="3s">感谢您的阅读</p>
<p class="con-QQ ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="4s">QQ:757729134</p>
<p class="con-tel ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="5s">Tel:135-2555-3487</p>
<p class="con-qrCode ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1s" swiper-animate-delay="6s">
<img src="src/imgs/qrCode.png" alt="">
</p>
</div>
<div class="ani icon" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="7s" style="animation-iteration-count:infinite">
<i class="ani iconfont"></i>
</div>
</div>
</div>
</div>
</section>
<footer id="footer"></footer>
</body>
<!--<script src="src/js/swiper.min.js"></script>
<script src="src/js/swiper.animate.min.js"></script>
<script src="src/js/index.js"></script> -->
</html>