JSDM

HTML

 
1
<div id="wrap">
2
  <div id="alien">
3
    <div class="body">
4
      <div class="eyes left"></div>
5
      <div class="eyes right"></div>
6
      <div class="mouse"></div>
7
    </div>
8
    <div class="arms left"></div>
9
    <div class="arms right"></div>
10
    <div class="legs left"></div>
11
    <div class="legs right"></div>
12
    <div class="halo-set">
13
      <div class="halo"></div>
14
      <div class="halo"></div>
15
      <div class="halo"></div>
16
      <div class="halo"></div>
17
      <div class="halo"></div>
18
    </div>
19
  </div>
20
</div>
!

CSS

x
 
1
$forecolor: #92cbd9;
2
$backcolor: #6294a0;
3
4
%pseudo {
5
  content: "";
6
  position: absolute;
7
}
8
9
@keyframes walk {
10
  25% {
11
    transform: translate3d(0, 2px, 0);
12
  }
13
  75% {
14
    transform: translate3d(0, -2px, 0);
15
  }
16
}
17
18
19
@keyframes twinkle {
20
  90% {
21
    transform: scale3d(1, 1, 1);
22
  }
23
  95% {
24
    transform: scale3d(1, 0.1, 1);
25
  }
26
}
27
28
29
@keyframes walk-right-hand {
30
  25% {
31
    transform: rotate(-10deg);
32
  }
33
  75% {
34
    transform: rotate(10deg);
35
  }
36
}
37
38
39
@keyframes walk-left-hand {
40
  25% {
41
    transform: rotate(10deg);
42
  }
43
  75% {
44
    transform: rotate(-10deg);
45
  }
46
}
47
48
49
@keyframes walk-left-foot {
50
  25% {
51
    transform: rotate(25deg);
52
  }
53
  75% {
54
    transform: rotate(-25deg);
55
  }
56
}
57
58
59
@keyframes walk-right-foot {
60
  25% {
61
    transform: rotate(-25deg);
62
  }
63
  75% {
64
    transform: rotate(25deg);
65
  }
66
}
67
68
body {
69
  background: #646464;
70
}
71
72
#wrap {
73
  position: fixed;
74
  top: 0;
75
  left: 0;
76
  width: 100%;
77
  height: 100%;
78
  display: flex;
79
  align-items: center;
80
  justify-content: center;
81
}
82
83
#alien {
84
  position: relative;
85
  width: 100px;
86
  height: 180px;
87
  animation: walk 1s linear infinite;
88
  &:before {
89
    @extend %pseudo;
90
    left: -20px;
91
    top: -20px;
92
    width: 120px;
93
    height: 120px;
94
    border: 10px solid rgba(255, 255, 255, 0.8);
95
    border-radius: 50%;
96
    z-index: 99;
97
  }
98
}
99
100
.body {
101
  position: absolute;
102
  top: 49px;
103
  width: 100px;
104
  height: 80px;
105
  background: $forecolor;
106
  &:before {
107
    @extend %pseudo;
108
    top: -50px;
109
    width: 100px;
110
    height: 100px;
111
    background: $forecolor;
112
    border-radius: 50%;
113
    clip: rect(0, 100px, 50px, 0);
114
  }
115
  &:after {
116
    content: '';
117
    position: absolute;
118
    top: 54px;
119
    width: 100px;
120
    height: 50px;
121
    background: $forecolor;
122
    border-radius: 50%;
123
    clip: rect(25px, 100px, 50px, 0);
124
  }
125
}
126
127
.eyes {
128
  position: absolute;
129
  top: 0;
130
  width: 20px;
131
  height: 20px;
132
  background: $backcolor;
133
  border-radius: 50%;
134
  animation: twinkle 5s infinite;
135
  &.left {
136
    left: 30px;
137
  }
138
  &.right {
139
    left: 70px;
140
  }
141
}
142
143
.mouse {
144
  position: absolute;
145
  top: 20px;
146
  left: 45px;
147
  width: 30px;
148
  height: 20px;
149
  border: 5px solid $backcolor;
150
  border-radius: 50%;
151
  box-sizing: border-box;
152
  clip: rect(10px, 30px, 20px, 0);
153
}
154
155
.arms {
156
  position: absolute;
157
  top: 80px;
158
  width: 80px;
159
  &:before {
160
    @extend %pseudo;
161
    top: 0;
162
    width: 80px;
163
    height: 200px;
164
    border: 10px solid #92cbd9;
165
    border-top-width: 20px;
166
    border-radius: 50%;
167
    -webkit-box-sizing: border-box;
168
    -moz-box-sizing: border-box;
169
    box-sizing: border-box;
170
  }
171
  &:after {
172
    @extend %pseudo;
173
    top: 33px;
174
    width: 12px;
175
    height: 12px;
176
    background: #92cbd9;
177
    border-radius: 50%;
178
    clip: rect(6px, 12px, 12px, 0);
179
  }
180
  &.left {
181
    left: -30px;
182
    animation: walk-left-hand 1s linear infinite;
183
    &:before {
184
      clip: rect(0, 35px, 40px, 0);
185
    }
186
    &:after {
187
      left: 8px;
188
    }
189
  }
190
  &.right {
191
    right: -30px;
192
    animation: walk-right-hand 1s linear infinite;
193
    &:before {
194
      clip: rect(0, 80px, 40px, 45px);
195
    }
196
     &:after {
197
      right: 8px;
198
    }
199
  }
200
}
201
202
.legs {
203
  position: absolute;
204
  top: 140px;
205
  width: 20px;
206
  &:before {
207
    @extend %pseudo;
208
    width: 0;
209
    border: 10px solid transparent;
210
    border-top: 150px solid $forecolor;
211
    clip: rect(0px, 20px, 30px, 0);
212
  }
213
  &:after {
214
    @extend %pseudo;
215
    top: 20px;
216
    left: 2px;
217
    width: 16px;
218
    height: 16px;
219
    background: $forecolor;
220
    border-radius: 50%;
221
    clip: rect(8px, 16px, 16px, 0);
222
  }
223
  &.left {
224
    left: 20%;
225
    animation: walk-left-foot 1s linear infinite;
226
  }
227
  &.right {
228
    right: 20%;
229
    animation: walk-right-foot 1s linear infinite;
230
  }
231
}
232
233
.halo {
234
  position: absolute;
235
  background: rgba(255, 255, 255, 0.15);
236
  border-radius: 50%;
237
  &:nth-child(1) {
238
    width: 30px;
239
    height: 30px;
240
    top: 10px;
241
    right: 10px;
242
  }
243
  &:nth-child(2) {
244
    width: 15px;
245
    height: 15px;
246
    bottom: 35px;
247
    right: 30px;
248
  }
249
  &:nth-child(3) {
250
    width: 13px;
251
    height: 13px;
252
    bottom: 50px;
253
    right: 5px;
254
  }
255
  &:nth-child(4) {
256
    width: 10px;
257
    height: 10px;
258
    bottom: 40px;
259
    right: 18px;
260
  }
261
}
!
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

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

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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