JSDM

HTML

11
1
<div class="wrapper">
2
  <div class="bear animal">
3
    <div class="bear-head">
4
      <div class="bear-eyes"></div>
5
      <div class="bear-face"></div>
6
    </div>
7
    <div class="bear-body">
8
      <div class="bear-hands"></div>
9
    </div>
10
  </div>
11
</div>

CSS

​x
 
1
.wrapper{
2
  float:left;
3
  width:250px;
4
  margin:50px 0px;
5
}
6
​
7
/*============================================
8
BEAR
9
==============================================
10
*/
11
.bear{
12
  margin:0 auto;
13
  height:200px;
14
  position:relative;
15
  width:150px;
16
}
17
.bear-head{
18
  width:130px;
19
  height:100px;
20
  border-radius: 47%;
21
  background-color: #e07591;
22
  position:relative;
23
}
24
.bear-face{
25
  background-color: #edbbd3;
26
  position:absolute;
27
  width:65px;
28
  height:30px;
29
  border-radius: 30px 30px 10px 10px;
30
  bottom:10px;
31
  left:33px;
32
}
33
.bear-face:before{
34
  width:20px;
35
  height:10px;
36
  border-radius: 2px 2px 10px 10px;
37
  position:absolute;
38
  content:"";
39
  left:22px;
40
  display:block;
41
  background-color: #b0135a;
42
}
43
.bear-face:after{
44
  width:20px;
45
  height:12px;
46
  content:"";
47
  display:block;
48
  position:absolute;
49
  top:15px;
50
  left:22px;
51
  background-color: #ed4049;
52
  border-radius: 10px 10px 5px 5px;
53
  transition: .2s;
54
}
55
​
56
.bear:hover .bear-face:after {
57
  width: 30px;
58
  height: 14px;
59
  left: 18px;
60
  border-radius: 5px 5px 25px 25px;
61
}
62
​
63
.bear-head:before, .bear-head:after{
64
  content:"";
65
  display:block;
66
  background-color: #a84a64;
67
  border-radius:50%;
68
  border:10px solid #e07591;
69
  width:10px;
70
  height:10px;
71
  position:absolute;
72
  top:-8px;
73
}
74
.bear-head:after{
75
  right:0;
76
}
77
.bear-body{
78
  position:absolute;
79
  width:95px;
80
  height:120px;
81
  top:40px;
82
  background-color: #e68da5;
83
  left:18px;
84
  z-index:-1;
85
  border-radius: 50% 50% 45% 45%;
86
  box-shadow: inset 0 50px 0 15px #e07591;
87
}
88
.bear-body:before, .bear-body:after, .bear-hands:before, .bear-hands:after{
89
  background-color:#e07591;
90
  content:"";
91
  display:block;
92
  position:absolute;
93
  height:20px;
94
  width:20px;
95
  border-radius:0 0 10px 10px;
96
  bottom:-8px;
97
}
98
.bear-body:before, .bear-body:after {
99
  width: 18px;
100
}
101
.bear-hands:before, .bear-hands:after{
102
  top:58px;
103
}
104
.bear-hands:before{
105
  left:-18px;
106
  transform:rotate(90deg);
107
}
108
.bear-hands:after{
109
  right: -18px;
110
  transform:rotate(-90deg);
111
  animation: wave .5s linear infinite;
112
  animation-play-state: paused;
113
}
114
​
115
.bear:hover .bear-hands:after{
116
  animation-play-state: running;
117
}
118
​
119
@keyframes wave{
120
  50%{transform: rotate(-110deg) translatex(6px);}
121
}
122
​
123
.bear-body:before{
124
   border-radius:10px 60px 10px 10px;
125
   left:15px;
126
}
127
.bear-body:after{
128
  border-radius:60px 10px 10px 10px;
129
  right:15px;
130
}
131
​
132
.bear-eyes:before, .bear-eyes:after{
133
  content:"";
134
  display:block;
135
  background-color: #2e7065;
136
  height:12px; width:12px;
137
  border:7px solid white;
138
  border-radius:50%;
139
  position:absolute;
140
  top:37px;
141
  left:27px;
142
  transition: .5s;
143
  /*animation: wink .5s linear infinite;
144
  animation-play-state: paused;*/
145
}
146
​
147
.bear:hover .bear-eyes:before, .bear:hover .bear-eyes:after{
148
 /* animation-play-state: running; */
149
  height: 1px;
150
}
151
​
152
/*@keyframes wink{
153
  50%{height: 1px;}
154
}*/
155
​
156
.bear-eyes:after{
157
  left:75px;
158
}
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

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

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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