请使用支持CSS3的浏览器查看效果：
http://keleyi.com/a/bjad/6lu3dgj8.htm
效果图：
完整代码如下：
1 <html> 2 <head> 3 <title>CSS3新浪LOGO-柯乐义</title> 4 <style> 5 .sina{ margin:60px 0 0 22px;} 6 .head{ position:relative; width:195px; height:220px;} 7 .head_bg{ position:absolute; width:200px; height:175px; background:#ab2b41; left:6px; z-index:6; 8 -moz-border-radius-topleft:200px 180px; 9 -moz-border-radius-topright: 200px 180px; 10 -moz-border-radius-bottomleft: 200px 180px; 11 -moz-border-radius-bottomright: 200px 180px; 12 -webkit-border-radius:200px 180px; 13 -moz-transform: rotate(-6deg); 14 -webkit-transform:rotate(-6deg); 15 -moz-box-shadow:1px 4px 3px #333; 16 -webkit-box-shadow:1px 4px 3px #333; 17 border:1px solid #c03461; 18 } 19 .head_top{ position:absolute; top:-3px; left:5px; width:197px; height:167px;z-index:7; 20 -moz-border-radius-topleft:200px 180px; 21 -moz-border-radius-topright:200px 180px; 22 -moz-border-radius-bottomleft:200px 180px; 23 -moz-border-radius-bottomright:200px 180px; 24 -webkit-border-radius:200px 180px; 25 -moz-transform:rotate(-6deg); 26 -webkit-transform:rotate(-6deg); 27 background: -moz-linear-gradient(left top, #e16591, #ce3551 50%); 28 background: -webkit-gradient(linear, 0 0, 0 50%, from(#e16591), to(#ce3551)); 29 } 30 .head_shadow{ position:absolute; width:190px; height:162px; top:2px; left:10px; z-index:8; 31 -moz-border-radius-topleft:200px 180px; 32 -moz-border-radius-topright:200px 180px; 33 -moz-border-radius-bottomleft:200px 180px; 34 -moz-border-radius-bottomright:200px 180px; 35 -webkit-border-radius:200px 180px; 36 background: -moz-linear-gradient(left top, white, #ce3552 50%); 37 background: -webkit-gradient(linear, left top, 10% 50%, from(#fff), to(#ce3552)); 38 } 39 .head_a1{ width:54px; height:45px; position:absolute; top:-24px; right:32px;background:#d53960; z-index:5; 40 border:1px solid #c03461; 41 -moz-border-radius:180px 0; 42 -webkit-border-radius:180px 0 180px 0; 43 -moz-transform: rotate(-6deg); 44 -webkit-transform:rotate(-6deg); 45 -moz-box-shadow:4px 4px 0px #c03461; 46 -webkit-box-shadow:4px 4px 0px #c03461; 47 } 48 .head_a1 .top{width:100px; height:100px; position:absolute; top:-80px; right:-11px; background:#fff; z-index:1; 49 -moz-border-radius:135px; 50 -webkit-border-radius:135px; 51 } 52 .head_a1 .body{width:23px; height:23px; position:absolute; top:-10px; right:-3px; background:#d53960; z-index:2; 53 -moz-border-radius:135px 135px 135px 0; 54 -webkit-border-top-left-radius:135px; 55 -webkit-border-top-right-radius:135px; 56 -webkit-border-bottom-right-radius:135px; 57 -webkit-border-bottom-left-radius:0; 58 -moz-transform: rotate(-60deg); 59 -webkit-transform: rotate(-60deg); 60 -moz-box-shadow:3px 4px 0px #c03461; 61 -webkit-box-shadow:3px 4px 0px #c03461; 62 } 63 .head_a1 .shadow{width:19px; height:19px; position:absolute; top:-8px; right:-2px; z-index:3; 64 -moz-border-radius:135px 135px 135px 0; 65 -webkit-border-radius:135px 135px 135px 0; 66 -moz-transform: rotate(-60deg); 67 -webkit-transform: rotate(-60deg); 68 background: -moz-linear-gradient(top, white, #ce3552 50%); 69 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552)); 70 } 71 .head_a2{ width:60px; height:45px; position:absolute; top:-22px; right:-13px;background:#d53960; z-index:4; 72 border:1px solid #c03461; 73 -moz-border-radius:180px 0; 74 -webkit-border-radius:180px 0 180px 0; 75 -moz-transform: rotate(-10deg); 76 -webkit-transform: rotate(-10deg); 77 -moz-box-shadow:4px 4px 0px #c03461; 78 -webkit-box-shadow:4px 4px 0px #c03461; 79 } 80 .head_a2 .top{width:40px; height:38px; position:absolute; top:-12px; right:7px; background:#fff; z-index:1; 81 -moz-border-radius:180px 0 180px 0; 82 -webkit-border-radius:180px 0 180px 0; 83 -moz-transform: rotate(20deg); 84 -webkit-transform: rotate(20deg); 85 } 86 .head_a2 .body{width:23px; height:23px; position:absolute; top:-10px; right:-3px; background:#d53960; z-index:2; 87 -moz-border-radius:135px 135px 135px 0; 88 -webkit-border-radius:135px 135px 135px 0; 89 -moz-transform: rotate(-60deg); 90 -webkit-transform: rotate(-60deg); 91 -moz-box-shadow:3px 4px 0px #c03461; 92 -webkit-box-shadow:3px 4px 0px #c03461; 93 } 94 .head_a2 .shadow{width:19px; height:19px; position:absolute; top:-8px; right:-1px; z-index:3; 95 -moz-border-radius:135px 135px 135px 0; 96 -webkit-border-radius:135px 135px 135px 0; 97 -moz-transform: rotate(-60deg); 98 -webkit-transform: rotate(-60deg); 99 background: -moz-linear-gradient(top, white, #ce3552 50%); 100 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552)); 101 } 102 .head_a3{ width:80px; height:47px; position:absolute; top:6px; right:-46px;background:#d53960; z-index:3; 103 border:1px solid #c03461; 104 -moz-border-radius:100px 0 110px 0; 105 -webkit-border-radius:100px 0 110px 0; 106 -moz-transform: rotate(-10deg); 107 -webkit-transform: rotate(-10deg); 108 -moz-box-shadow:4px 4px 0px #c03461; 109 -webkit-box-shadow:4px 4px 0px #c03461; 110 } 111 .head_a3 .top{width:67px; height:38px; position:absolute; top:-18px; right:15px; background:#fff; z-index:1; 112 -moz-border-radius:180px 0 180px 0; 113 -webkit-border-radius:180px 0 180px 0; 114 -moz-transform: rotate(40deg); 115 -webkit-transform: rotate(40deg); 116 } 117 .head_a3 .body{width:23px; height:23px; position:absolute; top:-8px; right:-1px; background:#d53960; z-index:2; 118 -moz-border-radius:135px 135px 135px 0; 119 -webkit-border-radius:135px 135px 135px 0; 120 -moz-transform: rotate(-72deg); 121 -webkit-transform: rotate(-72deg); 122 -moz-box-shadow:3px 4px 0px #c03461; 123 -webkit-box-shadow:3px 4px 0px #c03461; 124 } 125 .head_a3 .shadow{width:19px; height:19px; position:absolute; top:-6px; right:0px; z-index:3; 126 -moz-border-radius:135px 135px 135px 0; 127 -webkit-border-radius:135px 135px 135px 0; 128 -moz-transform: rotate(-60deg); 129 -webkit-transform: rotate(-60deg); 130 background: -moz-linear-gradient(top, white, #ce3552 50%); 131 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552)); 132 } 133 .head_a4{ width:80px; height:47px; position:absolute; top:44px; right:-55px; background:#d53960; z-index:2; 134 border:1px solid #c03461; 135 -moz-border-radius:80px 0 110px 0; 136 -webkit-border-radius:80px 0 110px 0; 137 -moz-transform: rotate(8deg); 138 -webkit-transform: rotate(8deg); 139 -moz-box-shadow:4px 4px 0px #c03461; 140 -webkit-box-shadow:4px 4px 0px #c03461; 141 } 142 .head_a4 .top{width:67px; height:38px;position:absolute; top:-18px; right:13px; background:#fff; z-index:1; 143 -moz-border-radius:180px 0 180px 0; 144 -webkit-border-radius:180px 0 180px 0; 145 -moz-transform: rotate(40deg); 146 -webkit-transform: rotate(40deg); 147 } 148 .head_a4 .body{width:23px; height:23px; position:absolute; top:-9px; right:-2px; background:#d53960; z-index:2; 149 -moz-border-radius:135px 135px 135px 0; 150 -webkit-border-radius:135px 135px 135px 0; 151 -moz-transform: rotate(-70deg); 152 -webkit-transform: rotate(-70deg); 153 -moz-box-shadow:3px 4px 0px #c03461; 154 -webkit-box-shadow:3px 4px 0px #c03461; 155 } 156 .head_a4 .shadow{width:19px; height:19px; position:absolute; top:-7px; right:-1px; z-index:3; 157 -moz-border-radius:135px 135px 135px 0; 158 -webkit-border-radius:135px 135px 135px 0; 159 -moz-transform: rotate(-70deg); 160 -webkit-transform: rotate(-70deg); 161 background: -moz-linear-gradient(top, white, #ce3552 50%); 162 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552)); 163 } 164 .head_a5{ width:54px; height:45px; position:absolute; top:87px; right:-45px; background:#d53960; z-index:1; 165 border:1px solid #c03461; 166 -moz-border-radius:135px 0 180px 0; 167 -webkit-border-radius:135px 0 180px 0; 168 -moz-transform: rotate(35deg); 169 -webkit-transform: rotate(35deg); 170 -moz-box-shadow:4px 4px 0px #c03461; 171 -webkit-box-shadow:4px 4px 0px #c03461; 172 } 173 .head_a5 .top{width:100px; height:100px; position:absolute; top:-78px; right:-7px; background:#fff; z-index:1; 174 -moz-border-radius:135px; 175 -webkit-border-radius:135px; 176 } 177 .head_a5 .body{width:23px; height:23px; position:absolute; top:-6px; right:0px; background:#d53960; z-index:2; 178 -moz-border-radius:135px 135px 135px 0; 179 -webkit-border-radius:135px; 180 -moz-transform: rotate(-70deg); 181 -webkit-transform: rotate(-70deg); 182 -moz-box-shadow:3px 4px 0px #c03461; 183 -webkit-box-shadow:3px 4px 0px #c03461; 184 } 185 .head_a5 .shadow{width:19px; height:19px; position:absolute; top:-4px; right:2px; z-index:3; 186 -moz-border-radius:135px 135px 135px 0; 187 -webkit-border-radius:135px 135px 135px 0; 188 -moz-transform: rotate(-70deg); 189 -webkit-transform: rotate(-70deg); 190 background: -moz-linear-gradient(top, white, #ce3552 50%); 191 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552)); 192 } 193 .eye{ position:absolute; top:47px; left:27px; width:161px; height:88px; z-index:10; 194 -moz-transform: rotate(-2deg); 195 -webkit-transform: rotate(-2deg); 196 } 197 .eye1{ position:absolute; top:57px; left:59px; width:8px; height:8px; background:#fff; z-index:5; 198 -moz-border-radius:180px; 199 -webkit-border-radius:180px; 200 } 201 .eye2{ position:absolute; top:29px; left:81px; width:22px; height:22px; background:#fff; z-index:4; 202 -moz-border-radius:180px; 203 -webkit-border-radius:180px; 204 } 205 .eye3{ position:absolute; top:25px; left:56px; width:47px; height:47px; background:#000; z-index:3; 206 -moz-border-radius:180px; 207 -webkit-border-radius:180px; 208 } 209 .eye4{ position:absolute; top:14px; left:46px; width:67px; height:67px; border:1px solid #312613; background:#66383d; z-index:2; 210 -moz-border-radius:180px; 211 -webkit-border-radius:180px; 212 -moz-box-shadow:0px 0px 5px #000; 213 -webkit-box-shadow:0px 0px 5px #000; 214 } 215 .eye5{ position:absolute; top:1px; left:8px; width:137px; height:86px; background:#fff; z-index:1; 216 border-top:5px solid #999;border-left:5px solid #999; 217 -moz-border-radius:300px 30px 300px 30px; 218 -webkit-border-radius:300px 30px 300px 30px; 219 -moz-transform: rotate(20deg); 220 -webkit-transform: rotate(20deg); 221 -moz-box-shadow:0px -7px 0 #ec9dc2; 222 -webkit-box-shadow:0px -7px 0 #ec9dc2;} 223 </style> 224 </head> 225 <body> 226 <a href="http://keleyi.com/a/bjad/6lu3dgj8.htm">查看效果</a> 227 <div class="sina"> 228 <div class="head"> 229 <div class="head_bg"></div> 230 <div class="head_top"></div> 231 <div class="head_shadow"></div> 232 <div class="head_a1"> 233 <div class="top"></div> 234 <div class="body"></div> 235 <div class="shadow"></div> 236 </div> 237 <div class="head_a2"> 238 <div class="top"></div> 239 <div class="body"></div> 240 <div class="shadow"></div> 241 </div> 242 <div class="head_a3"> 243 <div class="top"></div> 244 <div class="body"></div> 245 <div class="shadow"></div> 246 </div> 247 <div class="head_a4"> 248 <div class="top"></div> 249 <div class="body"></div> 250 <div class="shadow"></div> 251 </div> 252 <div class="head_a5"> 253 <div class="top"></div> 254 <div class="body"></div> 255 <div class="shadow"></div> 256 </div> 257 <div class="eye"> 258 <div class="eye1"></div> 259 <div class="eye2"></div> 260 <div class="eye3"></div> 261 <div class="eye4"></div> 262 <div class="eye5"></div> 263 </div> 264 </div> 265 </div> 266 </body> 267 </html>
