1
- @zero : 0 ;
2
- // all css
3
- html {
4
- font-family :' PingFang SC' ;
5
- }
6
- body {
7
- margin : 0 ;
8
- }
9
- body h1 :first-child {
10
- display : none ;
11
- }
12
- h1 {
13
- margin : 13px ;
14
- }
15
- p {
16
- margin : 0px ;
17
- }
18
-
19
- .container {
20
- width : 100% !important ;
21
- max-width : 100% !important ;
22
- }
23
-
24
- .pack-page {
25
- width : 100% ;
26
- height : 1000px ;
27
- background-color : #0098CE ;
28
- }
29
-
30
- .motion-common () {
31
- animation-duration : .5s ;
32
- animation-fill-mode : both ;
33
- }
34
-
35
- .fade-enter , .fade-leave , .fade-appear {
36
- animation-duration : 2s ;
37
- }
38
-
39
- .fade-enter {
40
- opacity : 0 ;
41
- .motion-common ();
42
- animation-timing-function : cubic-bezier (0.55 , 0 , 0.55 , 0.2 );
43
- animation-play-state : paused ;
44
- }
45
-
46
- .fade-appear {
47
- opacity : 0 ;
48
- .motion-common ();
49
- animation-timing-function : cubic-bezier (0.55 , 0 , 0.55 , 0.2 );
50
- animation-play-state : paused ;
51
- }
52
-
53
- .fade-leave {
54
- .motion-common ();
55
- animation-timing-function : cubic-bezier (0.55 , 0 , 0.55 , 0.2 );
56
- animation-play-state : paused ;
57
- }
58
-
59
- .fade-enter.fade-enter-active {
60
- animation-name : fadeIn;
61
- animation-play-state : running ;
62
- }
63
-
64
- .fade-appear.fade-appear-active {
65
- animation-name : fadeIn;
66
- animation-play-state : running ;
67
- }
68
-
69
- .fade-leave.fade-leave-active {
70
- animation-name : fadeOut;
71
- animation-play-state : running ;
72
- }
73
-
74
- @keyframes fadeIn {
75
- 0% {
76
- opacity : 0 ;
77
- }
78
- 100% {
79
- opacity : 1 ;
80
- }
81
- }
82
-
83
- @keyframes fadeOut {
84
- 0% {
85
- opacity : 1 ;
86
- }
87
- 100% {
88
- opacity : 0 ;
89
- }
90
- }
91
-
92
- // link css
93
- .logo {
94
- float :left ;
95
- height :58px ;
96
- font-size :26px ;
97
- line-height :56px ;
98
- padding-left :200px ;
99
- }
100
- .nav {
101
- position : fixed ;
102
- background : #0098CE ;
103
- color : #fff ;
104
- width : 100% ;
105
- height : 58px ;
106
- z-index : 9999 ;
107
- top : 0 ;
108
- & .nav-wap {
109
- float : right ;
110
- padding-right :200px ;
111
- }
112
- & .nav-list {
113
- width : 100px ;
114
- height : 100% ;
115
- float : left ;
116
- line-height : 58px ;
117
- text-align : center ;
118
- cursor : pointer ;
119
- transition : background .45s ;
120
- & :hover , & .active {
121
- }
122
- }
123
- & .nav-bar {
124
- width : 100px ;
125
- position : absolute ;
126
- top : 58px ;
127
- left : 0 ;
128
- height : 2px ;
129
- background : #fff ;
130
- transition : left .3s ;
131
- }
132
- }
133
- .page0 {
134
- margin : 0 auto ;
135
- width : 100% ;
136
- text-align : center ;
137
- overflow : hidden ;
138
- }
139
- .page1 {
140
- background-color :#19436E ;
141
- height :1000px ;
142
- }
143
-
144
- .home-title {
145
- position : relative ;
146
- top :50% ;
147
- margin-top : -65px ;
148
- }
149
-
150
- .tween-one {
151
- width :100% ;
152
- opacity : 0 ;
153
- color :#fff ;
154
- font-size :32px ;
155
- padding-top : 160px ;
156
- text-align : center ;
157
- padding-bottom : 50px ;
158
- }
159
- .page2-title {
160
- width :100% ;
161
- text-align :center ;
162
- color :#fff ;
163
- font-size :32px ;
164
- padding-top :160px ;
165
- padding-bottom :50px ;
166
- }
167
- .demo {
168
- margin : 0 auto ;
169
- width : 600px ;
170
- height : 80px ;
171
- background-color : #133252 ;
172
- margin-bottom : 30px ;
173
- border-radius : 4px ;
174
- }
175
- .demo2 {
176
- margin : 0 auto ;
177
- width : 600px ;
178
- height : 80px ;
179
- background-color : #E1FF9A ;
180
- margin-top : 30px ;
181
- border-radius : 4px ;
182
- }
183
- .page-title {
184
- & p {
185
- font-size : 60px ;
186
- color : #fff ;
187
- }
188
- }
189
- .page-description {
190
- padding-top : 20px ;
191
- & p {
192
- font-size : 18px ;
193
- color : #fff ;
194
- }
195
- }
196
- .parallax-shape {
197
- line-height : 120px ;
198
- width : 120px ;
199
- height : 120px ;
200
- text-align : center ;
201
- font-size : 24px ;
202
- }
0 commit comments