JSDM

HTML

12
 
1
.centerdot
2
- for(i=0; i < 4; i++)
3
  .ring(class="r#{i}")
4
    .dot
5
    .dot
6
    .dot
7
    .dot
8
    .dot
9
    .dot
10
    .dot
11
    .dot
12
!

CSS

xxxxxxxxxx
122
 
1
vendor(prop, args)
2
  -webkit-{prop} args
3
  -moz-{prop} args
4
  -o-{prop} args
5
  {prop} args
6
7
$blu= #253659
8
$grey= #dedcd4
9
10
$dot-size= 50px
11
$ringsize = 220px
12
13
body, html
14
  position: relative
15
  width: 100%
16
  height: 100%
17
  overflow: hidden
18
19
body
20
  background: $blu
21
22
.centerdot
23
  position: absolute
24
  width: 20px
25
  height: 20px
26
  background: $grey
27
  left: 50%
28
  top: 50% 
29
  margin-top: -10px
30
  margin-left: -10px
31
  border-radius: 50%
32
33
.ring
34
  position: absolute
35
  left: 50%
36
  top: 50% 
37
  margin-top: ($ringsize / -2)
38
  margin-left: ($ringsize / -2)
39
  border-radius: 50%
40
  width: $ringsize
41
  height: $ringsize
42
  vendor(animation-iteration-count, infinite)
43
  vendor(animation-timing-function, linear)
44
45
  for count in (0..7)
46
    .dot:nth-child({count + 1})
47
      $dotval = ($ringsize / 2)
48
      top: sin(45deg * count) * $dotval + $dotval
49
      left: cos(45deg * count) * $dotval + $dotval
50
      margin-left: ($dot-size / -2)
51
      margin-top: ($dot-size / -2)
52
      $amnt = (45deg * count + 90deg)
53
      vendor(transform, rotate($amnt))
54
55
  &.r0
56
    vendor(transform, scale(0.5))
57
    vendor(animation-duration, 5s)
58
    vendor(animation-name, rotate-cw0)
59
  &.r2
60
    vendor(animation-duration, 5s)
61
    vendor(transform, scale(2))
62
    vendor(animation-name, rotate-cw2)
63
  &.r3
64
    vendor(transform, scale(3))  
65
66
67
for ringcount in (0..4)
68
  .r{ringcount} .dot:after
69
    $delay = ringcount * -150ms
70
    vendor(animation-delay, $delay)
71
72
.dot
73
  position: absolute
74
  width: $dot-size
75
  height: $dot-size
76
  background: $grey
77
  border-radius: ($dot-size / 2)
78
  z-index: 1
79
80
  &:after
81
    content: ""
82
    display: block
83
    width: $dot-size
84
    height: $dot-size
85
    border-radius: ($dot-size / 2)
86
    position: absolute
87
    background-color: $blu
88
    top: 0
89
    z-index: 2
90
    vendor(animation-duration, 2.5s)
91
    vendor(animation-iteration-count, infinite)
92
    vendor(animation-timing-function, ease-out)
93
94
  &:after
95
    vendor(animation-name, move)
96
97
98
@keyframes move
99
  0%
100
    left: -60%
101
102
  50%
103
    left: 60%
104
105
  100%
106
    left: -60%
107
108
109
110
@keyframes rotate-cw2
111
  0%
112
    vendor(transform, rotate(0deg) scale(1.8))
113
  100%
114
    vendor(transform, rotate(360deg) scale(1.8))
115
116
@keyframes rotate-cw0
117
  0%
118
    vendor(transform, rotate(0deg) scale(0.5))
119
  100%
120
    vendor(transform, rotate(360deg) scale(0.5))
121
122
!
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

1
 
1
# Nothin here!
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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