Skip to content

Commit 40c2f0b

Browse files
committed
update demo and addEventListener target set scrollId
1 parent 457723a commit 40c2f0b

File tree

10 files changed

+293
-283
lines changed

10 files changed

+293
-283
lines changed

assets/index.less

Lines changed: 0 additions & 202 deletions
Original file line numberDiff line numberDiff line change
@@ -1,202 +0,0 @@
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

Comments
 (0)