JSDM

HTML

 
1
<div class="wrapper">
2
  <div class="body">
3
    <div class="left-ear">
4
    </div>
5
    <div class="inner-ear">
6
      </div>
7
     <div class="inner-ear-right">
8
      </div>
9
    <div class="right-ear">
10
    </div>
11
<div class="head">
12
  <div class="eye">
13
    <div class="inner-eye">
14
      <div class="shimmer">
15
      </div>
16
    </div>
17
  </div>
18
  <div class="eye align">
19
    <div class="inner-eye">
20
      <div class="shimmer">
21
      </div>
22
    </div>
23
  </div>
24
</div>
25
    <div class="inner-body">
26
  </div>
27
    <div class="wing">
28
    </div>
29
    <div class="wing-left">
30
    </div>
31
  </div>
32
</div>
!

CSS

x
 
1
body{
2
  background:url(http://www.halloweenjoys.com/backgrounds/halloween_background_27.gif);
3
    -webkit-animation:100s scroll infinite linear;
4
  -moz-animation:100s scroll infinite linear;
5
  -o-animation:100s scroll infinite linear;
6
  -ms-animation:100s scroll infinite linear;
7
  animation:100s scroll infinite linear;
8
}
9
@-webkit-keyframes scroll{
10
  100%{
11
    background-position:0px -3000px;
12
  }
13
}
14
15
@-moz-keyframes scroll{
16
  100%{
17
    background-position:0px -3000px;
18
  }
19
}
20
21
@-o-keyframes scroll{
22
  100%{
23
    background-position:0px -3000px;
24
  }
25
}
26
27
@-ms-keyframes scroll{
28
  100%{
29
    background-position:0px -3000px;
30
  }
31
}
32
33
@keyframes scroll{
34
  100%{
35
    background-position:0px -3000px;
36
  }
37
}
38
.head{
39
  width:200px;
40
  border-radius:50%;
41
  height:180px;
42
  background:#333;
43
  position:relative;
44
  border-bottom:20px solid #222;
45
  z-index:1000;
46
  box-shadow:#000 0px 2px 10px;
47
  .eye{
48
    width:60px;
49
    position:absolute;
50
    top:50px;
51
    height:65px;
52
    left:35px;
53
    background:#FFF;
54
    border-radius:50%;
55
    border:5px solid #222;
56
  }
57
  
58
  .align{
59
    left:100px;
60
  }
61
  
62
  .inner-eye{
63
    width:30px;
64
    height:30px;
65
    border-radius:50px;
66
    background:#222;
67
    position:absolute;
68
    left:15px;
69
    top:17px;
70
    
71
    .shimmer{
72
      width:10px;
73
      height:10px;
74
      border-radius:20px;
75
      position:absolute;
76
      top:7px;
77
      left:5px;
78
      background:rgba(255,255,255,0.2);
79
    }
80
  }
81
  
82
}
83
84
.left-ear{
85
    width:80px;
86
    height:150px;
87
    top:-50px;
88
    left:120px;
89
    z-index:0;
90
    background:#333;
91
    position:absolute;
92
  
93
  z-index:0;
94
    border-top-right-radius:100px;
95
   border-top:10px solid #222;
96
  }
97
98
.right-ear{
99
    width:80px;
100
    height:150px;
101
    top:-50px;
102
    left:0px;
103
    z-index:0;
104
    background:#333;
105
    position:absolute;
106
    border-top-left-radius:100px;
107
  border-top:10px solid #222;
108
  }
109
110
.inner-ear{
111
    width:50px;
112
    height:140px;
113
    top:-30px;
114
    left:130px;
115
    z-index:0;
116
    background:#222;
117
    position:absolute;
118
  z-index:1000;
119
    border-top-right-radius:100px;
120
  }
121
122
.inner-ear-right{
123
    width:50px;
124
    height:140px;
125
    top:-30px;
126
    left:20px;
127
    z-index:0;
128
    background:#222;
129
    position:absolute;
130
  z-index:1000;
131
    border-top-left-radius:100px;
132
  }
133
134
.body{
135
  position:relative;
136
  left:140px;
137
  -webkit-transform:scale(0.8);
138
  -moz-transform:scale(0.8);
139
  -o-transform:scale(0.8);
140
  -ms-transform:scale(0.8);
141
  transform:scale(0.8);
142
}
143
144
.inner-body{
145
  width:200px;
146
  height:400px;
147
  top:40px;
148
  border-radius:50%;
149
  background:#333;
150
  position:absolute;
151
  z-index:-1000;
152
  border-bottom:15px solid #222;
153
  box-shadow:#000 0px 2px 10px;
154
}
155
156
.wing{
157
  width:300px;
158
  height:250px;
159
  position:absolute;
160
  right:200px;
161
  top:90px;
162
  background:#333;
163
  border-top:50px solid #222;
164
  border-top-right-radius:100%;
165
  z-index:-2000;
166
}
167
.wing-left{
168
  width:300px;
169
  height:250px;
170
  position:absolute;
171
  left:-150px;
172
  top:90px;
173
  background:#333;
174
  border-top:50px solid #222;
175
  border-top-left-radius:100%;
176
  z-index:-2000;
177
}
178
.wrapper{
179
  width:560px;
180
  margin:0 auto;
181
  margin-top:5%;
182
}
!
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

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

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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