Skip to content

Commit 7a056f4

Browse files
GuocoverGuocover
committedDec 27, 2017
feat: 重构项目
1 parent 092043f commit 7a056f4

30 files changed

+556
-1472
lines changed
 

‎css/app.css

+190-98
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,104 @@
1+
body {
2+
background: #3acfff;
3+
}
14

2-
#content {
3-
height: 0px;
4-
overflow: hidden;
5+
@keyframes loadingScale {
6+
0% {
7+
transform: scale(1);
8+
background: #fff;
9+
}
10+
100% {
11+
transform: scale(.3);
12+
background: #c1c1c1;
13+
}
514
}
615

7-
#container {
8-
position: fixed;
9-
left: 0;
10-
top: 0;
11-
width: 100%;
12-
height: 100%;
13-
overflow: hidden;
16+
@keyframes shine {
17+
0% {
18+
opacity: 1;
19+
}
20+
100% {
21+
opacity: 0.2;
22+
}
1423
}
1524

16-
#loading {
25+
26+
27+
28+
.loading {
29+
/* display: none; */
1730
position: absolute;
18-
text-align: center;
19-
padding: 70px;
20-
box-sizing: border-box;
21-
background: #fff;
31+
background: #3ad0ff;
2232
left: 0;
2333
top: 0;
2434
width: 100%;
2535
height: 100%;
26-
z-index: 4;
27-
}
28-
#loading p {
29-
font-size: 50px;
36+
z-index: 100;
3037
}
3138

32-
#intro {
39+
40+
41+
.loading-circle_list {
3342
position: absolute;
34-
width: 650px;
43+
top: 50%;
3544
left: 50%;
36-
margin-left: -325px;
37-
top: 0;
38-
z-index: 2;
45+
transform: translate(-50%, -50%);
3946
}
4047

41-
.say_hi{
42-
font-size: 70px;
43-
font-weight: 650;
44-
color: #9FB6CD;
45-
font-family: "微软雅黑";
48+
.loading-circle {
49+
width: 40px;
50+
height: 40px;
51+
border-radius: 50%;
52+
margin-right: 12px;
53+
display: inline-block;
54+
background-color: #fff;
55+
animation-name: loadingScale;
56+
animation-duration: 1.2s;
57+
animation-timing-function: linear;
58+
animation-iteration-count: infinite;
4659
}
4760

48-
.my-info p {
49-
font-size: 45px;
50-
text-indent: 120px;
51-
width: 98%;
52-
margin: 0 auto;
61+
.loading-circle-left {
62+
animation-delay: 0s;
5363
}
54-
.info_tip{
5564

56-
font-size: 30px;
57-
color: #C1CDCD;
58-
margin: 0 auto;
59-
text-align: center;
60-
margin-top: 300px;
61-
font-weight: 700;
62-
}
63-
.my-info p b{
64-
color: #EE6A50;
65-
font-size: 78px;
65+
.loading-circle-center {
66+
animation-delay: .4s;
6667
}
67-
.my-info p em{
68-
color: #B4EEB4;
69-
font-size: 78px;
70-
}
71-
.my-info .info_detail{
72-
text-indent: 0;
7368

69+
.loading-circle-right {
70+
animation-delay: .8s;
7471
}
75-
.my-info .rule{
76-
color: #666;
77-
font-size: 19px;
78-
margin: 5px auto;
79-
text-indent: 0;
80-
text-align: center;
8172

73+
74+
.content {
75+
position: fixed;
76+
left: 0;
77+
top: 0;
78+
width: 100%;
79+
height: 100%;
80+
overflow: hidden;
8281
}
83-
.my-info .button{
84-
display: block;
85-
width: 120px;
86-
height: 55px;
87-
margin: 25px auto 0 auto;
88-
background: #B0C4DE;
89-
border-radius: 5px;
90-
font-size: 33px;
91-
color: #fff;
92-
border: none;
93-
text-align: center;
94-
}
95-
.button:hover,.button:active{
96-
background: #EE5C42;
97-
}
82+
9883

9984
.layer-horizontal {
100-
position: absolute;
101-
/* background-color: #ecfbff; */
85+
position: relative;
10286
width: 20000px;
10387
height: 100%;
10488
left: 0;
10589
top: 0;
10690
}
91+
92+
93+
.layer-horizontal .cloud {
94+
position: absolute;
95+
top: 0;
96+
left: 0;
97+
width: 100%;
98+
height: 200px;
99+
background: url('../images/cloud.png');
100+
}
101+
107102
.layer-horizontal .background {
108103
position: absolute;
109104
bottom: 0;
@@ -112,52 +107,149 @@
112107
height: 100px;
113108
background: url('../images/background.png');
114109
}
110+
111+
.layer-horizontal .mountain {
112+
position: absolute;
113+
bottom: -100px;
114+
left: -100px;
115+
width: 100%;
116+
height: 800px;
117+
background: url(../images/mountain.png);
118+
background-size: auto 800px;
119+
}
120+
115121
.layer-horizontal .trees {
116122
position: absolute;
117-
bottom: 100px;
123+
bottom: 90px;
118124
left: 0;
119125
width: 100%;
120-
height: 240px;
121-
background: url('../images/trees.png');
126+
height: 300px;
127+
background: url(../images/trees.png);
128+
background-size: auto 300px;
122129
}
123-
.layer-horizontal .info {
130+
131+
.layer-horizontal .project {
124132
position: absolute;
125-
font-size: 50px;
126-
background: #14cfff;
127-
border: 4px solid #333;
128-
color: #fff;
129-
padding: 40px 30px;
133+
top: 36%;
134+
margin-top: -200px;
135+
width: 500px;
136+
height: 500px;
137+
background: url(../images/project.png);
138+
background-size: cover;
139+
box-sizing: border-box;
140+
padding: 20px;
141+
}
142+
143+
.layer-horizontal .project-title {
144+
font-size: 30px;
130145
text-align: center;
131-
border-radius: 8px;
132-
left: 2000px;
133-
top: 30%;
134-
width: 540px;
135-
margin-top: -50px;
136146
}
137-
.layer-vertical {
138-
position: relative;
139-
width: 1000px;
140-
height: 3000px;
147+
148+
.layer-horizontal .project-img {
149+
position: absolute;
150+
width: 120px;
151+
height: 210px;
152+
background: #ddd;
153+
border: 1px solid #dfdfdf;
154+
left: 100px;
155+
top: 100px;
156+
}
157+
158+
.layer-horizontal .project-desc {
159+
padding-left: 220px;
160+
}
161+
162+
.layer-horizontal .project-1 {
163+
left: 6000px;
164+
}
165+
166+
167+
.layer-horizontal .project-2 {
168+
left: 8000px;
169+
}
170+
171+
172+
.layer-horizontal .block {
173+
position: absolute;
174+
bottom: 80px;
175+
width: 300px;
176+
height: 220px;
177+
background: url(../images/pipe.png) no-repeat;
178+
background-size: cover;
179+
}
180+
181+
.layer-horizontal .block1 {
141182
left: 2000px;
142-
bottom: 3000px;
183+
184+
}
185+
.layer-horizontal .block2 {
186+
left: 4000px;
187+
height: 160px;
143188
}
189+
190+
191+
192+
193+
144194
#people-container {
145195
position: fixed;
146196
width: 200px;
147-
height: 190px;
197+
height: 200px;
148198
left: 50px;
149199
bottom: 70px;
150200
overflow: hidden;
151201
}
152-
#people {
202+
203+
.people {
153204
position: absolute;
154-
width: 600px;
205+
width: 800px;
155206
height: 400px;
156207
left: 0;
157208
top: 0;
158209
background: url('../images/people.png') no-repeat;
159210
}
160211

161-
#page {
162-
height: 2440px;
212+
.intro {
213+
position: absolute;
214+
top: 50%;
215+
left: 50%;
216+
transform: translate(-50%, -50%);
217+
text-align: center;
218+
width: 450px;
219+
z-index: 10;
220+
}
221+
222+
.intro-title {
223+
font-size: 50px;
224+
margin-bottom: 20px;
225+
padding: 5px 20px;
226+
border: 3px solid #333;
227+
background: #fff;
228+
}
229+
230+
.intro-desc {
231+
font-size: 30px;
232+
margin-bottom: 20px;
233+
padding: 5px 10px;
234+
border: 3px solid #333;
235+
background: #fff;
236+
width: 70%;
237+
margin: 20px auto;
238+
}
239+
240+
.intro-button {
241+
border: none;
242+
width: 130px;
243+
height: 60px;
244+
font-size: 24px;
245+
border: 2px solid #333;
246+
background: #fff;
247+
color: #333;
248+
margin-bottom: 20px;
249+
}
250+
251+
.intro-tip {
252+
color: #f1f1f1;
253+
font-size: 22px;
254+
animation: shine 1s infinite;
163255
}

0 commit comments

Comments
 (0)