JSDM

HTML

 
1
<div id="baymax">
2
  <div id="head">
3
    <div id="eye"></div>
4
    <div id="eye2"></div>
5
    <div id="mouth"></div>
6
  </div>
7
  <div id="torso"></div>
8
  <div id="belly">
9
    <div id="cover"></div>
10
  </div>
11
  <div id="left-arm">
12
    <div id="bigfingerl"></div>
13
    <div id="lilfingerl"></div>
14
  </div>
15
  <div id="right-arm">
16
    <div id="bigfingerr"></div>
17
    <div id="lilfingerr"></div>
18
  </div>
19
  <div id="left-leg">
20
    <div id="right-leg"></div>
21
  </div>
22
</div>

CSS

x
 
1
body{
2
  background: #22222222;
3
}
4
5
#baymax{
6
  margin:0 auto;
7
  height:600px;
8
  width:400px;
9
}
10
11
#head{
12
  height:64px;
13
  width:90px;
14
  border-radius:50%;
15
  background:#fff;
16
  margin:0 auto;
17
  margin-bottom:-20px;
18
  border-bottom: 5px solid #E0E0E0;
19
  z-index:100;
20
  position:relative;
21
}
22
#eye, #eye2{
23
  width:11px;
24
  height:13px;
25
  background:#282828;
26
  border-radius:50%;
27
  position:relative;
28
  top:20px;
29
  left:20px;
30
  transform: rotate(8deg);
31
}
32
#eye2{
33
  transform: rotate(-8deg);
34
  left:57px;
35
  top:7px;
36
}
37
#mouth{
38
  width:33px;
39
  height:1.5px;
40
  background:#282828 ;
41
  position:relative;
42
  left:27px;
43
}
44
45
#torso, #belly{
46
  margin:0 auto;
47
  height:200px;
48
  width:180px;
49
  background:#fff;
50
  border-radius:50%;
51
  border: 5px solid #E0E0E0;
52
  border-top:none;
53
  z-index:1;
54
}
55
  #belly{
56
    height:300px;
57
    width:240px;
58
    margin-top:-140px;
59
    z-index:5;
60
  }
61
    #cover{
62
      width:180px;
63
      background:#fff;
64
      height:150px;
65
      margin:0 auto;
66
      position:relative;
67
      top:-20px;
68
      border-radius:50%;
69
    }
70
71
#left-arm, #right-arm{
72
  height:270px;
73
  width:100px;
74
  border-radius:50%;
75
  background:#fff;
76
  margin:0 auto;
77
  position:relative;
78
  top:-350px;
79
  left:-100px;
80
  transform: rotate(20deg);
81
  -webkit-transform:  rotate(20deg);
82
  z-index:-1;
83
}
84
  #right-arm{
85
    transform: rotate(-20deg);
86
    -webkit-transform:  rotate(-20deg);
87
    left:100px;
88
    top:-620px;
89
  }
90
    #bigfingerl, #bigfingerr{
91
      height:50px;
92
      width:20px;
93
      border-radius:50%;
94
      background:#fff;
95
      position:relative;
96
      top:250px;
97
      left:50px;
98
      transform: rotate(-50deg);
99
      -webkit-transform:  rotate(-50deg);
100
    }
101
    
102
    #bigfingerr{
103
      left:32px;
104
      transform: rotate(50deg);
105
      -webkit-transform:  rotate(50deg);
106
    }
107
      #lilfingerl, #lilfingerr{
108
        height:30px;
109
        width:15px;
110
        border-radius:50%;
111
        background:#fff;
112
        position:relative;
113
        top:195px;
114
        left:65px;
115
        transform: rotate(-40deg);
116
        -webkit-transform:  rotate(-40deg);
117
      }
118
        #lilfingerr{
119
          background:#fff;
120
          transform: rotate(40deg);
121
          -webkit-transform:  rotate(40deg);
122
          top:195px;
123
          left:22px;
124
        }
125
126
#left-leg, #right-leg{
127
  height:170px;
128
  width:90px;
129
  border-radius:50%;
130
  background:#fff;
131
  margin-top:-630px;
132
  margin-left:110px;
133
  transform: rotate(-15deg);
134
  -webkit-transform:  rotate(-15deg);
135
  z-index:-2;
136
}
137
  #right-leg{
138
    background: #fff;
139
    position:relative;
140
    top:25px;
141
    left:-15px;
142
    transform: rotate(30deg);
143
    -webkit-transform: rotate(30deg);
144
  }
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

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

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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