├── README.md ├── .gitattributes ├── .gitignore ├── minions.html └── minions.css /README.md: -------------------------------------------------------------------------------- 1 | # Minions 2 | 3 | 纯CSS3画出小黄人并实现动画效果。 4 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear on external disk 35 | .Spotlight-V100 36 | .Trashes 37 | 38 | # Directories potentially created on remote AFP share 39 | .AppleDB 40 | .AppleDesktop 41 | Network Trash Folder 42 | Temporary Items 43 | .apdisk 44 | -------------------------------------------------------------------------------- /minions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | css3-minions 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 | 27 | 28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 | 56 | -------------------------------------------------------------------------------- /minions.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .wrapper { 8 | width: 300px; 9 | margin: 100px auto; 10 | } 11 | 12 | .minions { 13 | position: relative; 14 | } 15 | 16 | .body { 17 | position: absolute; 18 | width: 240px; 19 | height: 400px; 20 | border: 5px solid #000; 21 | border-radius: 115px; 22 | background: rgb(249, 217, 70); 23 | overflow: hidden; 24 | z-index: 2; 25 | } 26 | 27 | .body .condole-belt { 28 | position: absolute; 29 | } 30 | 31 | .body .condole-belt .left, 32 | .body .condole-belt .right { 33 | width: 100px; 34 | height: 16px; 35 | border: 5px solid #000; 36 | background: rgb(32, 116, 160); 37 | position: absolute; 38 | top: -90px; 39 | left: -35px; 40 | z-index: 2; 41 | transform: rotate(45deg); 42 | } 43 | 44 | .body .condole-belt .left { 45 | top: -88px; 46 | left: 165px; 47 | transform: rotate(-45deg); 48 | } 49 | 50 | .body .condole-belt .left:after, 51 | .body .condole-belt .right:after { 52 | content: ''; 53 | width: 8px; 54 | height: 8px; 55 | border-radius: 50%; 56 | background: #000; 57 | position: absolute; 58 | top: 4px; 59 | left: 88px; 60 | } 61 | 62 | .body .condole-belt .left:after { 63 | left: 5px; 64 | } 65 | 66 | .body .trousers { 67 | position: absolute; 68 | bottom: 0; 69 | width: 100%; 70 | height: 100px; 71 | border-top: 6px solid #000; 72 | background: rgb(32, 116, 160); 73 | } 74 | 75 | .trousers-top { 76 | width: 160px; 77 | height: 60px; 78 | border: 6px solid #000; 79 | border-bottom: none; 80 | border-radius: 0 0 5px 5px; 81 | background: rgb(32, 116, 160); 82 | position: absolute; 83 | bottom: 100px; 84 | left: 34px; 85 | } 86 | 87 | .pocket { 88 | width: 60px; 89 | height: 45px; 90 | border: 6px solid #000; 91 | border-radius: 0px 0px 25px 25px; 92 | position: absolute; 93 | bottom: 65px; 94 | left: 84px; 95 | } 96 | 97 | .line-right { 98 | width: 30px; 99 | height: 30px; 100 | border-bottom-left-radius: 100px; 101 | border-bottom: 6px solid #000; 102 | border-left: 6px solid #000; 103 | position: absolute; 104 | left: 0; 105 | bottom: 60px; 106 | transform: rotate(-75deg); 107 | } 108 | 109 | .line-left { 110 | width: 30px; 111 | height: 30px; 112 | border-bottom-right-radius: 100px; 113 | border-bottom: 6px solid #000; 114 | border-right: 6px solid #000; 115 | position: absolute; 116 | right: 0; 117 | bottom: 63px; 118 | transform: rotate(75deg); 119 | } 120 | 121 | .line-bottom { 122 | height: 40px; 123 | border: 3px solid #000; 124 | border-radius: 3px; 125 | position: absolute; 126 | left: 118px; 127 | bottom: 0px; 128 | } 129 | 130 | .hair { 131 | position: relative; 132 | } 133 | 134 | .left-hair-one { 135 | width: 130px; 136 | height: 100px; 137 | border-radius: 50%; 138 | border-top: 8px solid #000; 139 | position: absolute; 140 | left: 17px; 141 | top: -17px; 142 | transform: rotate(27deg); 143 | animation: lefthair 2s ease-in-out infinite; 144 | } 145 | 146 | @keyframes lefthair { 147 | 0%, 148 | 25%, 149 | 31%, 150 | 100% {} 151 | 30% { 152 | transform: rotate(31deg) translate3d(-3px, -1px, 0); 153 | } 154 | } 155 | 156 | .left-hair-two { 157 | width: 80px; 158 | height: 80px; 159 | border-radius: 50%; 160 | border-top: 6px solid #000; 161 | position: absolute; 162 | left: 45px; 163 | top: -10px; 164 | transform: rotate(15deg); 165 | } 166 | 167 | .eyes { 168 | position: relative; 169 | z-index: 3; 170 | } 171 | 172 | .eyes .left-eye, 173 | .eyes .right-eye { 174 | width: 85px; 175 | height: 85px; 176 | border-radius: 50%; 177 | border: 6px solid #000; 178 | background: #fff; 179 | position: absolute; 180 | top: 60px; 181 | left: 27px; 182 | } 183 | 184 | .eyes .left-eye { 185 | left: 124px; 186 | } 187 | 188 | .eyes .left-eye .left-black-eye, 189 | .eyes .right-eye .right-black-eye { 190 | width: 40px; 191 | height: 40px; 192 | border-radius: 50%; 193 | background: #000; 194 | position: absolute; 195 | top: 24px; 196 | left: 22px; 197 | animation: blackeye 5s ease-in infinite; 198 | } 199 | 200 | @keyframes blackeye { 201 | 0%, 202 | 20%, 203 | 50%, 204 | 70%, 205 | 100% { 206 | transform: translateX(0px); 207 | } 208 | 30%, 209 | 40% { 210 | transform: translateX(15px); 211 | } 212 | 80%, 213 | 90% { 214 | transform: translateX(-15px); 215 | } 216 | } 217 | 218 | .eyes .left-eye .left-black-eye .left-white, 219 | .eyes .right-eye .right-black-eye .right-white { 220 | width: 20px; 221 | height: 20px; 222 | border-radius: 50%; 223 | background: #fff; 224 | position: absolute; 225 | top: 7px; 226 | left: 17px; 227 | animation: white-eye 5s ease-in-out infinite; 228 | } 229 | 230 | @keyframes white-eye { 231 | 0%, 232 | 20%, 233 | 50%, 234 | 70%, 235 | 100% { 236 | transform: translateX(0px); 237 | } 238 | 30%, 239 | 40% { 240 | transform: translate3d(3px, 4px, 0); 241 | } 242 | 80%, 243 | 90% { 244 | transform: translate3d(-15px, 4px, 0); 245 | } 246 | } 247 | 248 | .eyes .left-eye .left-black-eye .left-white { 249 | top: 4px; 250 | left: 17px; 251 | } 252 | 253 | .eyes .left-eye:after, 254 | .eyes .right-eye:after { 255 | content: ''; 256 | width: 28px; 257 | height: 18px; 258 | background: #000; 259 | position: absolute; 260 | left: -30px; 261 | top: 37px; 262 | transform: skewX(20deg) rotate(7deg); 263 | } 264 | 265 | .eyes .left-eye:after { 266 | left: 89px; 267 | top: 37px; 268 | transform: skewX(-20deg) rotate(-7deg); 269 | } 270 | 271 | .mouse { 272 | position: relative; 273 | } 274 | 275 | .mouse .mouse-shape { 276 | width: 55px; 277 | height: 35px; 278 | border: 5px solid #000; 279 | border-bottom-left-radius: 30px; 280 | background: #fff; 281 | position: absolute; 282 | top: 175px; 283 | left: 98px; 284 | z-index: 3; 285 | transform: rotate(-35deg); 286 | animation: mouse 5s ease-in-out infinite; 287 | } 288 | 289 | @keyframes mouse { 290 | 40%, 291 | 43% { 292 | width: 45px; 293 | height: 25px; 294 | top: 180px; 295 | } 296 | 0%, 297 | 35%, 298 | 48%, 299 | 100% { 300 | width: 55px; 301 | height: 35px; 302 | top: 175px; 303 | transform: rotate(-35deg); 304 | } 305 | } 306 | 307 | .mouse .mouse-shape:after { 308 | content: ''; 309 | width: 70px; 310 | height: 32px; 311 | border-bottom: 5px solid #000; 312 | border-radius: 35px 26px 5px 5px; 313 | background: rgb(249, 217, 70); 314 | position: absolute; 315 | top: -16px; 316 | left: 3px; 317 | transform: rotate(34deg); 318 | animation: mouse-mask 5s ease-in-out infinite; 319 | } 320 | 321 | @keyframes mouse-mask { 322 | 40%, 323 | 43% { 324 | width: 60.5px; 325 | top: -19.3px; 326 | left: 1.5px; 327 | } 328 | 0%, 329 | 35%, 330 | 48%, 331 | 100% { 332 | width: 70px; 333 | top: -16px; 334 | left: 3px; 335 | transform: rotate(33deg); 336 | } 337 | } 338 | 339 | .hands { 340 | position: relative; 341 | } 342 | 343 | .hands .left-hand, 344 | .hands .right-hand { 345 | width: 80px; 346 | height: 80px; 347 | border: 6px solid #000; 348 | border-radius: 25px; 349 | background: rgb(249, 217, 70); 350 | position: absolute; 351 | top: 220px; 352 | left: -23px; 353 | transform: rotate(40deg); 354 | animation: right-hand .8s ease-in-out infinite; 355 | } 356 | 357 | @keyframes right-hand { 358 | 0%, 359 | 50%, 360 | 100% { 361 | transform: rotate(40deg); 362 | } 363 | 30% { 364 | transform: rotate(37deg) translateX(1px); 365 | } 366 | } 367 | 368 | .hands .left-hand { 369 | left: 182px; 370 | top: 220px; 371 | transform: rotate(-40deg); 372 | animation: left-hand .8s ease-in-out infinite; 373 | } 374 | 375 | @keyframes left-hand { 376 | 0%, 377 | 50%, 378 | 100% { 379 | transform: rotate(-40deg); 380 | } 381 | 80% { 382 | transform: rotate(-37deg) translateX(-1px); 383 | } 384 | } 385 | 386 | .hands .left-hand:after, 387 | .hands .right-hand:after { 388 | content: ''; 389 | width: 6px; 390 | border: 3px solid #000; 391 | border-radius: 3px; 392 | position: absolute; 393 | left: 13px; 394 | top: 50px; 395 | transform: rotate(90deg); 396 | } 397 | 398 | .hands .left-hand:after { 399 | left: 53px; 400 | top: 50px; 401 | transform: rotate(-90deg); 402 | } 403 | 404 | .feet { 405 | position: relative; 406 | } 407 | 408 | .feet .left-foot, 409 | .feet .right-foot { 410 | width: 36px; 411 | height: 50px; 412 | border-bottom-right-radius: 6px; 413 | border-bottom-left-radius: 9px; 414 | background: #000; 415 | position: absolute; 416 | top: 406px; 417 | left: 88px; 418 | transform-origin: right top; 419 | animation: right-foot .8s ease-in-out infinite; 420 | } 421 | 422 | @keyframes right-foot { 423 | 0%, 424 | 50%, 425 | 100% { 426 | transform: rotate(0deg); 427 | } 428 | 80% { 429 | transform: rotate(10deg); 430 | } 431 | } 432 | 433 | .feet .left-foot { 434 | border-bottom-right-radius: 9px; 435 | border-bottom-left-radius: 6px; 436 | left: 130px; 437 | transform-origin: left top; 438 | animation: left-foot .8s ease-in-out infinite; 439 | } 440 | 441 | @keyframes left-foot { 442 | 0%, 443 | 50%, 444 | 100% { 445 | transform: rotate(0deg); 446 | } 447 | 30% { 448 | transform: rotate(-10deg); 449 | } 450 | } 451 | 452 | .feet .left-foot:after, 453 | .feet .right-foot:after { 454 | content: ''; 455 | width: 60px; 456 | height: 35px; 457 | border-radius: 20px 10px 21px 15px; 458 | background: #000; 459 | position: absolute; 460 | left: -36px; 461 | top: 14.4px; 462 | transform: rotate(5deg); 463 | } 464 | 465 | .feet .left-foot:after { 466 | border-radius: 10px 20px 15px 21px; 467 | left: 13px; 468 | transform: rotate(-5deg); 469 | } 470 | 471 | .ground-shadow { 472 | width: 200px; 473 | height: 2px; 474 | border-radius: 50%; 475 | background: rgba(0, 0, 0, 0.3); 476 | box-shadow: 0 0 2px 4px rgba(0, 0, 0, 0.3); 477 | position: relative; 478 | top: 455px; 479 | left: 25px; 480 | } --------------------------------------------------------------------------------