CSS3.0青蛙(1)

一个简化版。完全木有使用渐变和阴影，也没使用keyframes。

只用到了圆角border-radius和变换transform。

哈哈。。好玩儿。

浏览器效果如下。

将以下代码另存为htm即可：

 1 <style type="text/css">
 2 div{
 3 border:2px #000000 solid;
 4 }
 5 #froggy{
 6 margin:80px;
 7 border:none;
 8 }
 9 div.head{
10 position:relative;
11 width:140px;
12 height:80px;
13  color: #000000;">:60px; 
14 -moz-border-radius: 60px;
15 background:#66CC00;
16 }
17 div.eye{
18 position:relative;
19 width:60px;
20 height:60px;
21 left:5px;
22 top:-30px;
23  color: #000000;">:60px; 
24 -moz-border-radius: 60px;
25 float:left;
26 background:#ffffff;
27 }
28 div.apple{
29 position:relative;
30 top:30px;
31 width:20px;
32 height:20px;
33 border:none;
34 background:#000000;
35  color: #000000;">:10px; 
36 -moz-border-radius: 10px;
37 }
38 div.left-apple{
39 left:30px;
40 }
41 div.right-apple{
42 left:10px;
43 }
44 div.face{
45 position:relative;
46 top:-30px;
47 width:26px;
48 height:26px;
49 border:none;
50 background:#FFCCFF;
51  color: #000000;">:15px; 
52 -moz-border-radius: 15px;
53 float:left;
54 }
55 div.left-face{
56 left:10px;
57 }
58 div.right-face{
59 left:78px;
60 }
61 div.mouse{
62 position:relative;
63 float:left;
64 width:34px;
65 height:34px;
66 top:-30px;
67 border:#000000 2px solid;
68 border-left:none;
69 border-top:none;
70  color: #000000;">: rotate(45deg);
71 -moz-transform: rotate(45deg);
72  color: #000000;">:15px; 
73 -moz-border-radius-bottomright: 15px;
74 }
75 </style>
76 <div id="froggy">
77     <div class="head">    
78 <div class ="eye ">
79     <div class="apple left-apple">
80         </div>
81     </div>
82 <div class ="eye ">    
83     <div class="apple right-apple">
84         </div>
85     </div>
86     <div class="face left-face">
87     </div>
88     <div class="face right-face">
89     </div>
90     <div class="mouse">
91     </div>
92     </div>
93 </div>