JSDM

HTML

 
1
<div class="scroll">
2
  <span class="block"></span>
3
  <span class="block"></span>
4
  <span class="block"></span>
5
  <span class="block"></span>
6
  <span class="block"></span>
7
  <span class="block"></span>
8
  <span class="block"></span>
9
  <span class="block"></span>
10
  <span class="block"></span>
11
  <span class="block"></span>
12
  <span class="block"></span>
13
  <span class="block"></span>
14
  <span class="block"></span>
15
  <span class="block"></span>
16
  <span class="block"></span>
17
  <span class="block"></span>
18
  <span class="block"></span>
19
  <span class="block"></span>
20
  <span class="block"></span>
21
  <span class="block"></span>
22
  <span class="block"></span>
23
  <span class="block"></span>
24
  <span class="block"></span>
25
  <span class="block"></span>
26
  <span class="block"></span>
27
  <span class="block"></span>
28
  <span class="block"></span>
29
  <span class="block"></span>
30
  <span class="block"></span>
31
  <span class="block"></span>
32
  <span class="block"></span>
33
  <span class="block"></span>
34
  <span class="block"></span>
35
  <span class="block"></span>
36
  <span class="block"></span>
37
  <span class="block"></span>
38
  <span class="block"></span>
39
  <span class="block"></span>
40
  <span class="block"></span>
41
  <span class="block"></span>
42
  <span class="block"></span>
43
  <span class="block"></span>
44
  <span class="block"></span>
45
  <span class="block"></span>
46
  <span class="block"></span>
47
  <span class="block"></span>
48
  <span class="block"></span>
49
  <span class="block"></span>
50
  <span class="block"></span>
51
  <span class="block"></span>
52
  <span class="block"></span>
53
  <span class="block"></span>
54
  <span class="block"></span>
55
  <span class="block"></span>
56
  <span class="block"></span>
57
  <span class="block"></span>
58
  <span class="block"></span>
59
  <span class="block"></span>
60
  <span class="block"></span>
61
  <span class="block"></span>
62
  <span class="block"></span>
63
  <span class="block"></span>
64
  <span class="block"></span>
65
  <span class="block"></span>
66
  <span class="block"></span>
67
  <span class="block"></span>
68
  <span class="block"></span>
69
  <span class="block"></span>
70
  <span class="block"></span>
71
  <span class="block"></span>
72
  <span class="block"></span>
73
  <span class="block"></span>
74
  <span class="block"></span>
75
  <span class="block"></span>
76
  <span class="block"></span>
77
  <span class="block"></span>
78
  <span class="block"></span>
79
  <span class="block"></span>
80
  <span class="block"></span>
81
  <span class="block"></span>
82
  <span class="block"></span>
83
  <span class="block"></span>
84
  <span class="block"></span>
85
  <span class="block"></span>
86
  <span class="block"></span>
87
  <span class="block"></span>
88
  <span class="block"></span>
89
  <span class="block"></span>
90
  <span class="block"></span>
91
  <span class="block"></span>
92
  <span class="block"></span>
93
  <span class="block"></span>
94
  <span class="block"></span>
95
  <span class="block"></span>
96
  <span class="block"></span>
97
  <span class="block"></span>
98
  <span class="block"></span>
99
  <span class="block"></span>
100
  <span class="block"></span>
101
  <span class="block"></span>
102
  <span class="block"></span>
103
  <span class="block"></span>
104
  <span class="block"></span>
105
  <span class="block"></span>
106
  <span class="block"></span>
107
  <span class="block"></span>
108
  <span class="block"></span>
109
  <span class="block"></span>
110
  <span class="block"></span>
111
  <span class="block"></span>
112
  <span class="block"></span>
113
  <span class="block"></span>
114
  <span class="block"></span>
115
  <span class="block"></span>
116
  <span class="block"></span>
117
  <span class="block"></span>
118
  <span class="block"></span>
119
  <span class="block"></span>
120
  <span class="block"></span>
121
  <span class="block"></span>
122
  <span class="block"></span>
123
  <span class="block"></span>
124
  <span class="block"></span>
125
  <span class="block"></span>
126
  <span class="block"></span>
127
  <span class="block"></span>
128
  <span class="block"></span>
129
  <span class="block"></span>
130
  <span class="block"></span>
131
  <span class="block"></span>
132
  <span class="block"></span>
133
  <span class="block"></span>
134
  <span class="block"></span>
135
  <span class="block"></span>
136
  <span class="block"></span>
137
  <span class="block"></span>
138
  <span class="block"></span>
139
  <span class="block"></span>
140
  <span class="block"></span>
141
  <span class="block"></span>
142
  <span class="block"></span>
143
  <span class="block"></span>
144
  <span class="block"></span>
145
  <span class="block"></span>
146
  <span class="block"></span>
147
  <span class="block"></span>
148
  <span class="block"></span>
149
  <span class="block"></span>
150
  <span class="block"></span>
151
  <span class="block"></span>
152
  <span class="block"></span>
153
  <span class="block"></span>
154
  <span class="block"></span>
155
  <span class="block"></span>
156
  <span class="block"></span>
157
  <span class="block"></span>
158
  <span class="block"></span>
159
  <span class="block"></span>
160
  <span class="block"></span>
161
  <span class="block"></span>
162
  <span class="block"></span>
163
  <span class="block"></span>
164
  <span class="block"></span>
165
  <span class="block"></span>
166
  <span class="block"></span>
167
  <span class="block"></span>
168
  <span class="block"></span>
169
  <span class="block"></span>
170
  <span class="block"></span>
171
  <span class="block"></span>
172
  <span class="block"></span>
173
  <span class="block"></span>
174
  <span class="block"></span>
175
  <span class="block"></span>
176
  <span class="block"></span>
177
  <span class="block"></span>
178
  <span class="block"></span>
179
  <span class="block"></span>
180
  <span class="block"></span>
181
  <span class="block"></span>
182
  <span class="block"></span>
183
  <span class="block"></span>
184
  <span class="block"></span>
185
  <span class="block"></span>
186
  <span class="block"></span>
187
  <span class="block"></span>
188
  <span class="block"></span>
189
  <span class="block"></span>
190
  <span class="block"></span>
191
  <span class="block"></span>
192
  <span class="block"></span>
193
  <span class="block"></span>
194
  <span class="block"></span>
195
  <span class="block"></span>
196
  <span class="block"></span>
197
  <span class="block"></span>
198
</div>
!

CSS

​x
 
1
$n: 180;
2
​
3
​
4
html, body{
5
  width: 100%;
6
  height: 100%;
7
  float: left;
8
  overflow-x: hidden;
9
  background: #222;
10
}
11
header{
12
  position: fixed;
13
  text-align: center;
14
  width: 100%;
15
  height: 300px;
16
  background: #333;
17
  color: #fff;
18
}
19
​
20
.scroll{
21
  width: 100%;
22
  height: 0;
23
  top: 0;
24
25
  width: 50%;
26
  height: 50%;
27
  max-height: 200px;
28
  max-width: 200px;
29
  overflow: hidden;
30
  left: 50%;
31
  top: 50%;
32
  transform: translate(-50%,-50%) scale(1.2);
33
  position: absolute;
34
​
35
​
36
  .block{
37
    width: 10px;
38
    height: 10px;
39
    float: left;
40
    background: rebeccapurple;
41
    display: block;
42
    margin: 2px;
43
    transition: transform 1s ease;
44
    animation: pump 3s ease infinite;
45
    position: relative;
46
    @for $i from 0 through $n {
47
      &:nth-child(#{($i)}){
48
        animation: pump 1s linear  $i/14.5+s infinite;
49
      }
50
  }
51
}
52
}
53
.space{
54
  height: 1000px;
55
  display: block;
56
}
57
​
58
​
59
@keyframes pump{
60
  33%{
61
    border-radius: 100%;
62
    background: rebeccapurple;
63
  }
64
  66%{
65
    transform: scale(.2);
66
    background: #fff;
67
    box-shadow: 0 0 0 6px black;
68
  }
69
  100%{
70
    transform: rotate(90deg);
71
​
72
    //filter: invert(100%);
73
  }
74
}
!
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
1
 
1
​
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................