CSS3實例教程:用CSS代碼繪制新浪LOGO
編輯：CSS進階教程
新浪有兩個吉祥物，小新是女孩兒，小浪是男孩兒。現在流行用CSS3畫點什麼，我們SINA CDC的模特兒，必然是小新和小浪了。
熬一晚上做了個小新頭，不完善，還有更像的空間。竅門就是琢磨出用各種圓形，相互迭加而制作出一個物體。先看看最終效果吧。個人認為，firefox在圖型方面的表現是最好的，而safari和chrome雖然有毛邊，但優勢是支持CSS動畫。各有所長。而IE，就當它是打醬油的吧。
這次使用到的CSS3屬性包括：
圓角：-moz-border-radius; -webkit-border-radius;
旋轉：-moz-transform; -webkit-transform;
陰影：-moz-box-shadow; -webkit-box-shadow;
漸變：-moz-linear-gradient; -webkit-gradient;
下面就看一下我用CSS3代碼畫的小新，在各浏覽器下的表現：
Firefox 3.6.8
Chrome 5.0
Safari 5.0
IE6、IE7、IE8
實現邏輯很簡單。先畫一個長方塊兒，用CSS3代碼為方塊兒加圓角兒、陰影、傾斜、漸變光效。做為小新的頭。
一個小長方型，做為長圓型，並加陰影
在上面蓋一個大圓，粉色部位變成一個彎彎的錐型
在大白圓上，再蓋一個加陰影、漸變光效的小圓
把表示頭部的大圓，蓋在表示頭發的拐彎上，再把頁面背景色定為白色，讓別人看不出遮罩層。小新就長出一根頭發了。
將頭發復制5份，每一根頭發，都細調大小和位置
眼睛就好畫多了，先畫一個白色的圓型，加灰邊、和粉色上陰影
蓋一個棕色的圓，加黑邊和陰影
再蓋兩個小白點兒，畫龍點睛
組合起來，就完成了。
實現起來比較費時間，但並沒有難度。需要注意的是position的用法，制作出正確的前後順序。
雖然不能比擬設計師用PS畫出來的栩栩如生，代碼寫的小新，妩媚的券發像是一個個粗壯的小胳膊。組裡有同學繪制的小浪人，也相當漂亮，浪的簡直了。不過抱著精心制作的精神，相信你們會比我畫的更好。
原碼在此：
001 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 002 <html xmlns="http://www.w3.org/1999/xhtml"> 003 <head> 004 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 005 <title>小新頭像-新浪CDC</title> 006 </head> 007 <style> 008 .sina{ margin:60px 0 0 22px;} 009 .head{ position:relative; width:195px; height:220px;} 010 .head_bg{ position:absolute; width:200px; height:175px; background:#ab2b41; left:6px; z-index:6; 011 -moz-border-radius-topleft:200px 180px; 012 -moz-border-radius-topright: 200px 180px; 013 -moz-border-radius-bottomleft: 200px 180px; 014 -moz-border-radius-bottomright: 200px 180px; 015 -webkit-border-radius:200px 180px; 016 -moz-transform: rotate(-6deg); 017 -webkit-transform:rotate(-6deg); 018 -moz-box-shadow:1px 4px 3px #333; 019 -webkit-box-shadow:1px 4px 3px #333; 020 border:1px solid #c03461; 021 } 022 023 .head_top{ position:absolute; top:-3px; left:5px; width:197px; height:167px;z-index:7; 024 -moz-border-radius-topleft:200px 180px; 025 -moz-border-radius-topright:200px 180px; 026 -moz-border-radius-bottomleft:200px 180px; 027 -moz-border-radius-bottomright:200px 180px; 028 -webkit-border-radius:200px 180px; 029 -moz-transform:rotate(-6deg); 030 -webkit-transform:rotate(-6deg); 031 background: -moz-linear-gradient(left top, #e16591, #ce3551 50%); 032 background: -webkit-gradient(linear, 0 0, 0 50%, from(#e16591), to(#ce3551)); 033 } 034 035 .head_shadow{ position:absolute; width:190px; height:162px; top:2px; left:10px; z-index:8; 036 -moz-border-radius-topleft:200px 180px; 037 -moz-border-radius-topright:200px 180px; 038 -moz-border-radius-bottomleft:200px 180px; 039 -moz-border-radius-bottomright:200px 180px; 040 -webkit-border-radius:200px 180px; 041 background: -moz-linear-gradient(left top, white, #ce3552 50%); 042 background: -webkit-gradient(linear, left top, 10% 50%, from(#fff), to(#ce3552)); 043 } 044 045 .head_a1{ width:54px; height:45px; position:absolute; top:-24px; right:32px;background:#d53960; z-index:5; 046 border:1px solid #c03461; 047 -moz-border-radius:180px 0; 048 -webkit-border-radius:180px 0 180px 0; 049 -moz-transform: rotate(-6deg); 050 -webkit-transform:rotate(-6deg); 051 -moz-box-shadow:4px 4px 0px #c03461; 052 -webkit-box-shadow:4px 4px 0px #c03461; 053 } 054 055 .head_a1 .top{width:100px; height:100px; position:absolute; top:-80px; right:-11px; background:#fff; z-index:1; 056 -moz-border-radius:135px; 057 -webkit-border-radius:135px; 058 } 059 060 .head_a1 .body{width:23px; height:23px; position:absolute; top:-10px; right:-3px; background:#d53960; z-index:2; 061 -moz-border-radius:135px 135px 135px 0; 062 -webkit-border-top-left-radius:135px; 063 -webkit-border-top-right-radius:135px; 064 -webkit-border-bottom-right-radius:135px; 065 -webkit-border-bottom-left-radius:0; 066 067 -moz-transform: rotate(-60deg); 068 -webkit-transform: rotate(-60deg); 069 -moz-box-shadow:3px 4px 0px #c03461; 070 -webkit-box-shadow:3px 4px 0px #c03461; 071 } 072 073 .head_a1 .shadow{width:19px; height:19px; position:absolute; top:-8px; right:-2px; z-index:3; 074 -moz-border-radius:135px 135px 135px 0; 075 -webkit-border-radius:135px 135px 135px 0; 076 -moz-transform: rotate(-60deg); 077 -webkit-transform: rotate(-60deg); 078 background: -moz-linear-gradient(top, white, #ce3552 50%); 079 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552)); 080 } 081 082 .head_a2{ width:60px; height:45px; position:absolute; top:-22px; right:-13px;background:#d53960; z-index:4; 083 border:1px solid #c03461; 084 -moz-border-radius:180px 0; 085 -webkit-border-radius:180px 0 180px 0; 086 -moz-transform: rotate(-10deg); 087 -webkit-transform: rotate(-10deg); 088 -moz-box-shadow:4px 4px 0px #c03461; 089 -webkit-box-shadow:4px 4px 0px #c03461; 090 } 091 092 .head_a2 .top{width:40px; height:38px; position:absolute; top:-12px; right:7px; background:#fff; z-index:1; 093 -moz-border-radius:180px 0 180px 0; 094 -webkit-border-radius:180px 0 180px 0; 095 -moz-transform: rotate(20deg); 096 -webkit-transform: rotate(20deg); 097 } 098 099 .head_a2 .body{width:23px; height:23px; position:absolute; top:-10px; right:-3px; background:#d53960; z-index:2; 100 -moz-border-radius:135px 135px 135px 0; 101 -webkit-border-radius:135px 135px 135px 0; 102 -moz-transform: rotate(-60deg); 103 -webkit-transform: rotate(-60deg); 104 -moz-box-shadow:3px 4px 0px #c03461; 105 -webkit-box-shadow:3px 4px 0px #c03461; 106 } 107 108 .head_a2 .shadow{width:19px; height:19px; position:absolute; top:-8px; right:-1px; z-index:3; 109 -moz-border-radius:135px 135px 135px 0; 110 -webkit-border-radius:135px 135px 135px 0; 111 -moz-transform: rotate(-60deg); 112 -webkit-transform: rotate(-60deg); 113 background: -moz-linear-gradient(top, white, #ce3552 50%); 114 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552)); 115 } 116 117 .head_a3{ width:80px; height:47px; position:absolute; top:6px; right:-46px;background:#d53960; z-index:3; 118 border:1px solid #c03461; 119 -moz-border-radius:100px 0 110px 0; 120 -webkit-border-radius:100px 0 110px 0; 121 -moz-transform: rotate(-10deg); 122 -webkit-transform: rotate(-10deg); 123 -moz-box-shadow:4px 4px 0px #c03461; 124 -webkit-box-shadow:4px 4px 0px #c03461; 125 } 126 127 .head_a3 .top{width:67px; height:38px; position:absolute; top:-18px; right:15px; background:#fff; z-index:1; 128 -moz-border-radius:180px 0 180px 0; 129 -webkit-border-radius:180px 0 180px 0; 130 -moz-transform: rotate(40deg); 131 -webkit-transform: rotate(40deg); 132 } 133 .head_a3 .body{width:23px; height:23px; position:absolute; top:-8px; right:-1px; background:#d53960; z-index:2; 134 -moz-border-radius:135px 135px 135px 0; 135 -webkit-border-radius:135px 135px 135px 0; 136 -moz-transform: rotate(-72deg); 137 -webkit-transform: rotate(-72deg); 138 -moz-box-shadow:3px 4px 0px #c03461; 139 -webkit-box-shadow:3px 4px 0px #c03461; 140 } 141 142 .head_a3 .shadow{width:19px; height:19px; position:absolute; top:-6px; right:0px; z-index:3; 143 -moz-border-radius:135px 135px 135px 0; 144 -webkit-border-radius:135px 135px 135px 0; 145 -moz-transform: rotate(-60deg); 146 -webkit-transform: rotate(-60deg); 147 background: -moz-linear-gradient(top, white, #ce3552 50%); 148 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552)); 149 } 150 151 .head_a4{ width:80px; height:47px; position:absolute; top:44px; right:-55px; background:#d53960; z-index:2; 152 border:1px solid #c03461; 153 -moz-border-radius:80px 0 110px 0; 154 -webkit-border-radius:80px 0 110px 0; 155 -moz-transform: rotate(8deg); 156 -webkit-transform: rotate(8deg); 157 -moz-box-shadow:4px 4px 0px #c03461; 158 -webkit-box-shadow:4px 4px 0px #c03461; 159 } 160 161 .head_a4 .top{width:67px; height:38px;position:absolute; top:-18px; right:13px; background:#fff; z-index:1; 162 -moz-border-radius:180px 0 180px 0; 163 -webkit-border-radius:180px 0 180px 0; 164 -moz-transform: rotate(40deg); 165 -webkit-transform: rotate(40deg); 166 } 167 168 .head_a4 .body{width:23px; height:23px; position:absolute; top:-9px; right:-2px; background:#d53960; z-index:2; 169 -moz-border-radius:135px 135px 135px 0; 170 -webkit-border-radius:135px 135px 135px 0; 171 -moz-transform: rotate(-70deg); 172 -webkit-transform: rotate(-70deg); 173 -moz-box-shadow:3px 4px 0px #c03461; 174 -webkit-box-shadow:3px 4px 0px #c03461; 175 } 176 .head_a4 .shadow{width:19px; height:19px; position:absolute; top:-7px; right:-1px; z-index:3; 177 -moz-border-radius:135px 135px 135px 0; 178 -webkit-border-radius:135px 135px 135px 0; 179 -moz-transform: rotate(-70deg); 180 -webkit-transform: rotate(-70deg); 181 background: -moz-linear-gradient(top, white, #ce3552 50%); 182 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552)); 183 } 184 185 .head_a5{ width:54px; height:45px; position:absolute; top:87px; right:-45px; background:#d53960; z-index:1; 186 border:1px solid #c03461; 187 -moz-border-radius:135px 0 180px 0; 188 -webkit-border-radius:135px 0 180px 0; 189 -moz-transform: rotate(35deg); 190 -webkit-transform: rotate(35deg); 191 -moz-box-shadow:4px 4px 0px #c03461; 192 -webkit-box-shadow:4px 4px 0px #c03461; 193 } 194 .head_a5 .top{width:100px; height:100px; position:absolute; top:-78px; right:-7px; background:#fff; z-index:1; 195 -moz-border-radius:135px; 196 -webkit-border-radius:135px; 197 } 198 .head_a5 .body{width:23px; height:23px; position:absolute; top:-6px; right:0px; background:#d53960; z-index:2; 199 -moz-border-radius:135px 135px 135px 0; 200 -webkit-border-radius:135px; 201 -moz-transform: rotate(-70deg); 202 -webkit-transform: rotate(-70deg); 203 -moz-box-shadow:3px 4px 0px #c03461; 204 -webkit-box-shadow:3px 4px 0px #c03461; 205 } 206 .head_a5 .shadow{width:19px; height:19px; position:absolute; top:-4px; right:2px; z-index:3; 207 -moz-border-radius:135px 135px 135px 0; 208 -webkit-border-radius:135px 135px 135px 0; 209 -moz-transform: rotate(-70deg); 210 -webkit-transform: rotate(-70deg); 211 background: -moz-linear-gradient(top, white, #ce3552 50%); 212 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552)); 213 } 214 215 .eye{ position:absolute; top:47px; left:27px; width:161px; height:88px; z-index:10; 216 -moz-transform: rotate(-2deg); 217 -webkit-transform: rotate(-2deg); 218 } 219 220 .eye1{ position:absolute; top:57px; left:59px; width:8px; height:8px; background:#fff; z-index:5; 221 -moz-border-radius:180px; 222 -webkit-border-radius:180px; 223 } 224 .eye2{ position:absolute; top:29px; left:81px; width:22px; height:22px; background:#fff; z-index:4; 225 -moz-border-radius:180px; 226 -webkit-border-radius:180px; 227 } 228 .eye3{ position:absolute; top:25px; left:56px; width:47px; height:47px; background:#000; z-index:3; 229 -moz-border-radius:180px; 230 -webkit-border-radius:180px; 231 } 232 .eye4{ position:absolute; top:14px; left:46px; width:67px; height:67px; border:1px solid #312613; background:#66383d; z-index:2; 233 -moz-border-radius:180px; 234 -webkit-border-radius:180px; 235 -moz-box-shadow:0px 0px 5px #000; 236 -webkit-box-shadow:0px 0px 5px #000; 237 } 238 .eye5{ position:absolute; top:1px; left:8px; width:137px; height:86px; background:#fff; z-index:1; 239 border-top:5px solid #999;border-left:5px solid #999; 240 -moz-border-radius:300px 30px 300px 30px; 241 -webkit-border-radius:300px 30px 300px 30px; 242 -moz-transform: rotate(20deg); 243 -webkit-transform: rotate(20deg); 244 -moz-box-shadow:0px -7px 0 #ec9dc2; 245 -webkit-box-shadow:0px -7px 0 #ec9dc2;} 246 247 </style> 248 249 <body> 250 <div class="sina"> 251 <div class="head"> 252 <div class="head_bg"></div> 253 <div class="head_top"></div> 254 <div class="head_shadow"></div> 255 256 <div class="head_a1"> 257 <div class="top"></div> 258 <div class="body"></div> 259 <div class="shadow"></div> 260 </div> 261 <div class="head_a2"> 262 <div class="top"></div> 263 <div class="body"></div> 264 <div class="shadow"></div> 265 </div> 266 <div class="head_a3"> 267 <div class="top"></div> 268 <div class="body"></div> 269 <div class="shadow"></div> 270 </div> 271 <div class="head_a4"> 272 <div class="top"></div> 273 <div class="body"></div> 274 <div class="shadow"></div> 275 </div> 276 <div class="head_a5"> 277 <div class="top"></div> 278 <div class="body"></div> 279 <div class="shadow"></div> 280 </div> 281 282 <div class="eye"> 283 <div class="eye1"></div> 284 <div class="eye2"></div> 285 <div class="eye3"></div> 286 <div class="eye4"></div> 287 <div class="eye5"></div> 288 </div> 289 290 </div> 291 292 </div> 293 </body> 294 </html>小編推薦
熱門推薦