1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>机器猫</title> 7 <style> 8 .heard { 9 width: 400px; 10 height: 400px; 11 background: linear-gradient(to left bottom, #C9F5FC 0%, #09BEED, #222 130%); 12 border: 1px solid #277E89; 13 position: relative; 14 left: 500px; 15 border-radius: 48%; 16 17 } 18 19 .face { 20 width: 350px; 21 height: 300px; 22 background: #fff; 23 box-shadow: 0 0 5px #ddd inset; 24 border: 2px solid #14819A; 25 left: 25px; 26 top: 80px; 27 position: absolute; 28 border-radius: 50%; 29 30 } 31 32 .eyes { 33 width: 90px; 34 height: 120px; 35 border: 2px solid #555; 36 background: #fff; 37 top: 40px; 38 left: 110px; 39 position: absolute; 40 z-index: 99; 41 42 border-radius: 45%; 43 transform: rotate(-3deg); 44 } 45 46 .eyes2 { 47 width: 90px; 48 height: 120px; 49 border: 2px solid #555; 50 top: 40px; 51 left: 202px; 52 position: absolute; 53 z-index: 99; 54 55 background: #fff; 56 border-radius: 45%; 57 transform: rotate(3deg); 58 } 59 60 .bizi { 61 width: 40px; 62 height: 40px; 63 /*background:#C84105;*/ 64 position: absolute; 65 top: 144px; 66 left: 182px; 67 z-index: 99; 68 background-image: radial-gradient(15px 15px, #fff 1%, #C84105 65%); 69 background-position: -32px -86px; 70 71 border: 2px solid #5D1400; 72 border-radius: 50%; 73 } 74 75 .eyes_inner { 76 width: 20px; 77 height: 20px; 78 background: #555; 79 z-index: 99; 80 81 border-radius: 50%; 82 position: absolute; 83 right: 20px; 84 bottom: 22px; 85 86 } 87 88 .eyes_inner2 { 89 width: 20px; 90 height: 20px; 91 background: #555; 92 z-index: 99; 93 94 border-radius: 50%; 95 position: absolute; 96 z-index: 99; 97 left: 20px; 98 bottom: 22px; 99 } 100 101 .zuibazhezhao { 102 width: 260px; 103 height: 100px; 104 background: #fff; 105 z-index: 2; 106 margin-top: 80px; 107 position: absolute; 108 left: 40px; 109 top: -90; 110 111 } 112 113 .bizixia { 114 border-right: 2px solid #555; 115 position: absolute; 116 z-index: 99; 117 118 left: 175px; 119 top: 70px; 120 height: 160px; 121 122 } 123 124 .zuiba { 125 position: absolute; 126 bottom: 70px; 127 left: 50px; 128 border-radius: 50%; 129 width: 250px; 130 height: 220px; 131 border-bottom: 2px solid #555; 132 } 133 134 .xiangquan { 135 position: absolute; 136 height: 20px; 137 width: 300px; 138 border-radius: 10px; 139 bottom: 16px; 140 left: 24px; 141 border: 1px solid #310100; 142 background: #CC400E; 143 box-shadow: 0 -8px 8px #8A2810 inset; 144 z-index: 99; 145 } 146 147 .lingdang { 148 width: 50px; 149 height: 50px; 150 border: 2px solid #9DA12B; 151 background: #FDFF76; 152 position: absolute; 153 border-radius: 50%; 154 overflow: hidden; 155 z-index: 99; 156 box-shadow: 0 0 2px #CBCBCB; 157 158 left: 123px; 159 top: 6px; 160 } 161 162 .lingdang .shadow { 163 height: 14px; 164 width: 50px; 165 position: absolute; 166 z-index: 99; 167 border-radius: 80%; 168 left: 0; 169 top: 0; 170 box-shadow: 0 0 8px #98A022; 171 } 172 173 .kongxin { 174 height: 12px; 175 width: 12px; 176 position: absolute; 177 border-radius: 50%; 178 z-index: 99; 179 box-shadow: -2 -2 2px #000; 180 left: 18px; 181 top: 24px; 182 background: #444; 183 } 184 185 .lingxia { 186 border-left: 2px solid #444; 187 height: 15px; 188 z-index: 99; 189 box-shadow: -2 -2 2px #000; 190 position: absolute; 191 bottom: 0; 192 left: 23px; 193 } 194 195 .shenti { 196 width: 300px; 197 height: 230px; 198 background: linear-gradient(to left bottom, #C9F5FC 0%, #09BEED, #222 130%); 199 position: relative; 200 overflow: hidden; 201 border: 2px solid #555; 202 border-radius: 26px 30px 11px 11px; 203 border-bottom: 0; 204 205 left: 52px; 206 top: 355px; 207 } 208 209 .shenti2 { 210 width: 300px; 211 height: 230px; 212 background: linear-gradient(to left bottom, #09BEED 20%, #222 200%); 213 position: absolute; 214 border-radius: 26px 30px 0 0; 215 z-index: 2; 216 box-shadow: 5px -5px 5px left:0px; 217 top: 0px; 218 } 219 220 .duzi { 221 width: 220px; 222 height: 220px; 223 background: #fff; 224 border: 2px solid #555; 225 position: absolute; 226 z-index: 2; 227 box-shadow: 0 0 10px #ccc inset; 228 229 top: -30px; 230 left: 40px; 231 border-radius: 50%; 232 } 233 234 .koudai { 235 width: 170px; 236 height: 170px; 237 border-radius: 50%; 238 position: absolute; 239 border: 2px solid #666; 240 top: 85px; 241 } 242 243 .mengban { 244 width: 174px; 245 height: 172px; 246 position: absolute; 247 border-bottom: 2px solid #666; 248 left: 25px; 249 top: -65px; 250 } 251 252 .zhezhao { 253 width: 174px; 254 height: 70px; 255 position: absolute; 256 background: #fff; 257 top: 15px; 258 left: -2px; 259 border-radius: 20px 20px 0 0; 260 } 261 262 .gebo { 263 width: 160px; 264 height: 80px; 265 position: absolute; 266 left: -44px; 267 top: 376px; 268 border-bottom: 2px solid #277E89; 269 border-top: 2px solid #277E89; 270 transform: rotate(-20deg); 271 272 background: #0F96B8; 273 } 274 275 .gebo2 { 276 width: 160px; 277 height: 80px; 278 position: absolute; 279 left: 292px; 280 top: 376px; 281 border-bottom: 2px solid #277E89; 282 border-top: 2px solid #277E89; 283 transform: rotate(20deg); 284 285 background: #09BEED; 286 } 287 288 .shou { 289 width: 100px; 290 height: 100px; 291 border-radius: 50%; 292 border: 2px solid #555; 293 background: #fff; 294 margin-top: -12px; 295 margin-left: -50px; 296 } 297 298 .shou2 { 299 width: 100px; 300 height: 100px; 301 border-radius: 50%; 302 border: 2px solid #555; 303 background: #fff; 304 margin-top: -12px; 305 margin-left: 100px; 306 } 307 308 .tuifenkai { 309 width: 26px; 310 height: 40px; 311 position: absolute; 312 z-index: 33; 313 background: #fff; 314 top: 212px; 315 left: 138px; 316 border-top: 2px solid #555; 317 border-left: 2px solid #555; 318 border-right: 2px solid #555; 319 border-radius: 50%; 320 } 321 322 .jiao { 323 width: 170px; 324 height: 40px; 325 border-radius: 26px 18px 18px 15px; 326 border: 2px solid #555; 327 background: #fff; 328 position: relative; 329 left: 529px; 330 top: 180px; 331 z-index: 99; 332 } 333 334 .jiao2 { 335 width: 170px; 336 height: 40px; 337 border-radius: 18px 26px 15px 18px; 338 border: 2px solid #555; 339 background: #fff; 340 position: absolute; 341 left: 180px; 342 top: -2px; 343 z-index: 99; 344 } 345 346 .huzizhezhao { 347 width: 120px; 348 height: 120px; 349 background: #fff; 350 position: absolute; 351 left: 120px; 352 top: 70px; 353 z-index: 98; 354 355 } 356 357 .huzi1 { 358 width: 274px; 359 height: 1px; 360 border-bottom: 2px solid #777; 361 z-index: 20; 362 top: 130px; 363 left: 40px; 364 position: absolute; 365 } 366 367 .huzi2 { 368 width: 274px; 369 height: 1px; 370 border-bottom: 2px solid #777; 371 z-index: 20; 372 transform: rotate(15deg); 373 top: 130px; 374 left: 40px; 375 position: absolute; 376 } 377 378 .huzi3 { 379 width: 274px; 380 height: 1px; 381 border-bottom: 2px solid #777; 382 z-index: 20; 383 transform: rotate(-15deg); 384 top: 130px; 385 left: 40px; 386 position: absolute; 387 } 388 </style> 389 </head> 390 391 <body> 392 <div class="heard"> 393 <div class="face"> 394 <div class="huzizhezhao"></div> 395 <div class="huzi1"></div> 396 <div class="huzi2"></div> 397 <div class="huzi3"></div> 398 <div class="zuibazhezhao"></div> 399 <div class="bizixia"></div> 400 <div class="zuiba"></div> 401 <div class="xiangquan"> 402 <div class="lingdang"> 403 <div class="shadow"></div> 404 <div class="kongxin"></div> 405 <div class="lingxia"></div> 406 </div> 407 </div> 408 </div> 409 <div class="eyes"> 410 <div class="eyes_inner"></div> 411 </div> 412 <div class="eyes2"> 413 <div class="eyes_inner2"></div> 414 </div> 415 <div class="bizi"></div> 416 417 <div class="shenti"> 418 <div class="shenti2"></div> 419 <div class="duzi"> 420 <div class="mengban"> 421 <div class="koudai"> 422 <div class="zhezhao"></div> 423 </div> 424 </div> 425 426 </div> 427 428 <div class="tuifenkai"> 429 430 </div> 431 </div> 432 <div class="gebo"> 433 <div class="shou"></div> 434 </div> 435 <div class="gebo2"> 436 <div class="shou2"></div> 437 </div> 438 439 </div> 440 <div class="jiao"> 441 <div class="jiao2"></div> 442 </div> 443 444 </body> 445 446 </html>