CSS3实现各种表情
效果图：
代码如下，复制即可使用：
1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5 <style type="text/css"> 6 body { 7 text-align: center; 8 margin: 80px auto 0; 9 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 10} 11 12.emoji { 13 width: 120px; 14 height: 120px; 15 margin: 15px; 16 background: #FFDA6A; 17 display: inline-block; 18 border-radius: 50%; 19 position: relative; 20} 21.emoji:after { 22 position: absolute; 23 bottom: -40px; 24 font-size: 18px; 25 width: 60px; 26 left: calc(50% - 30px); 27 color: #8A8A8A; 28} 29 30.emoji__face, .emoji__eyebrows, .emoji__eyes, .emoji__mouth, .emoji__tongue, .emoji__heart, .emoji__hand, .emoji__thumb { 31 position: absolute; 32} 33.emoji__face:before, .emoji__face:after, .emoji__eyebrows:before, .emoji__eyebrows:after, .emoji__eyes:before, .emoji__eyes:after, .emoji__mouth:before, .emoji__mouth:after, .emoji__tongue:before, .emoji__tongue:after, .emoji__heart:before, .emoji__heart:after, .emoji__hand:before, .emoji__hand:after, .emoji__thumb:before, .emoji__thumb:after { 34 position: absolute; 35 content: ''; 36} 37 38.emoji__face { 39 width: inherit; 40 height: inherit; 41} 42 43.emoji--like { 44 background: #548DFF; 45} 46.emoji--like:after { 47 content: 'Like'; 48} 49.emoji--like .emoji__hand { 50 left: 25px; 51 bottom: 30px; 52 width: 20px; 53 height: 40px; 54 background: #FFFFFF; 55 border-radius: 5px; 56 z-index: 0; 57 animation: hands-up 2s linear infinite; 58} 59.emoji--like .emoji__hand:before { 60 left: 25px; 61 bottom: 5px; 62 width: 40px; 63 background: inherit; 64 height: 10px; 65 border-radius: 2px 10px 10px 2px; 66 box-shadow: 1px -9px 0 1px #FFFFFF, 2px -19px 0 2px #FFFFFF, 3px -29px 0 3px #FFFFFF; 67} 68.emoji--like .emoji__thumb { 69 border-bottom: 20px solid #FFFFFF; 70 border-left: 20px solid transparent; 71 top: -25px; 72 right: -25px; 73 z-index: 2; 74 transform: rotate(5deg); 75 transform-origin: 0% 100%; 76 animation: thumbs-up 2s linear infinite; 77} 78.emoji--like .emoji__thumb:before { 79 border-radius: 50% 50% 0 0; 80 background: #FFFFFF; 81 width: 10px; 82 height: 12px; 83 left: -10px; 84 top: -8px; 85 transform: rotate(-15deg); 86 transform-origin: 100% 100%; 87 box-shadow: -1px 4px 0 -1px #FFFFFF; 88} 89 90.emoji--love { 91 background: #F55064; 92} 93.emoji--love:after { 94 content: 'Love'; 95} 96.emoji--love .emoji__heart { 97 left: calc(50% - 40px); 98 top: calc(50% - 40px); 99 width: 80px; 100 height: 80px; 101 animation: heart-beat 1s linear infinite alternate; 102} 103.emoji--love .emoji__heart:before, .emoji--love .emoji__heart:after { 104 left: calc(50% - 20px); 105 top: calc(50% - 32px); 106 width: 40px; 107 height: 64px; 108 background: #FFFFFF; 109 border-radius: 20px 20px 0 0; 110} 111.emoji--love .emoji__heart:before { 112 transform: translate(20px) rotate(-45deg); 113 transform-origin: 0 100%; 114} 115.emoji--love .emoji__heart:after { 116 transform: translate(-20px) rotate(45deg); 117 transform-origin: 100% 100%; 118} 119 120.emoji--haha:after { 121 content: 'Haha'; 122} 123.emoji--haha .emoji__face { 124 animation: haha-face 2s linear infinite; 125} 126.emoji--haha .emoji__eyes { 127 width: 26px; 128 height: 6px; 129 border-radius: 2px; 130 left: calc(50% - 13px); 131 top: 35px; 132 transform: rotate(20deg); 133 background: transparent; 134 box-shadow: -25px 5px 0 0 #000000, 25px -5px 0 0 #000000; 135} 136.emoji--haha .emoji__eyes:after { 137 left: 0; 138 top: 0; 139 width: 26px; 140 height: 6px; 141 border-radius: 2px; 142 transform: rotate(-40deg); 143 background: transparent; 144 box-shadow: -25px -5px 0 0 #000000, 25px 5px 0 0 #000000; 145} 146.emoji--haha .emoji__mouth { 147 width: 80px; 148 height: 40px; 149 left: calc(50% - 40px); 150 top: 50%; 151 background: #000000; 152 border-radius: 0 0 40px 40px; 153 overflow: hidden; 154 z-index: 1; 155 animation: haha-mouth 2s linear infinite; 156} 157.emoji--haha .emoji__tongue { 158 width: 70px; 159 height: 30px; 160 background: #F55064; 161 left: calc(50% - 35px); 162 bottom: -10px; 163 border-radius: 50%; 164} 165 166.emoji--yay:after { 167 content: 'Yay'; 168 animation: yay-reverse 1s linear infinite; 169} 170.emoji--yay .emoji__face { 171 animation: yay 1s linear infinite alternate; 172} 173.emoji--yay .emoji__eyebrows { 174 left: calc(50% - 3px); 175 top: 30px; 176 height: 6px; 177 width: 6px; 178 border-radius: 50%; 179 background: transparent; 180 box-shadow: -6px 0 0 0 #000000, -36px 0 0 0px #000000, 6px 0 0 0 #000000, 36px 0 0 0px #000000; 181} 182.emoji--yay .emoji__eyebrows:before, .emoji--yay .emoji__eyebrows:after { 183 width: 36px; 184 height: 18px; 185 border-radius: 60px 60px 0 0; 186 background: transparent; 187 border: 6px solid black; 188 box-sizing: border-box; 189 border-bottom: 0; 190 bottom: 3px; 191 left: calc(50% - 18px); 192} 193.emoji--yay .emoji__eyebrows:before { 194 margin-left: -21px; 195} 196.emoji--yay .emoji__eyebrows:after { 197 margin-left: 21px; 198} 199.emoji--yay .emoji__mouth { 200 top: 60px; 201 background: transparent; 202 left: 50%; 203} 204.emoji--yay .emoji__mouth:after { 205 width: 80px; 206 height: 80px; 207 left: calc(50% - 40px); 208 top: -75px; 209 border-radius: 50%; 210 background: transparent; 211 border: 6px solid #000000; 212 box-sizing: border-box; 213 border-top-color: transparent; 214 border-left-color: transparent; 215 border-right-color: transparent; 216 z-index: 1; 217} 218.emoji--yay .emoji__mouth:before { 219 width: 6px; 220 height: 6px; 221 background: transparent; 222 border-radius: 50%; 223 bottom: 5px; 224 left: calc(50% - 3px); 225 box-shadow: -25px 0 0 0 #000000, 25px 0 0 0 #000000, -35px -2px 30px 10px #D5234C, 35px -2px 30px 10px #D5234C; 226} 227 228.emoji--wow:after { 229 content: 'Wow'; 230} 231.emoji--wow .emoji__face { 232 animation: wow-face 3s linear infinite; 233} 234.emoji--wow .emoji__eyebrows { 235 left: calc(50% - 3px); 236 height: 6px; 237 width: 6px; 238 border-radius: 50%; 239 background: transparent; 240 box-shadow: -18px 0 0 0 #000000, -33px 0 0 0 #000000, 18px 0 0 0 #000000, 33px 0 0 0 #000000; 241 animation: wow-brow 3s linear infinite; 242} 243.emoji--wow .emoji__eyebrows:before, .emoji--wow .emoji__eyebrows:after { 244 width: 24px; 245 height: 20px; 246 border: 6px solid #000000; 247 box-sizing: border-box; 248 border-radius: 50%; 249 border-bottom-color: transparent; 250 border-left-color: transparent; 251 border-right-color: transparent; 252 top: -3px; 253 left: calc(50% - 12px); 254} 255.emoji--wow .emoji__eyebrows:before { 256 margin-left: -25px; 257} 258.emoji--wow .emoji__eyebrows:after { 259 margin-left: 25px; 260} 261.emoji--wow .emoji__eyes { 262 width: 16px; 263 height: 24px; 264 left: calc(50% - 8px); 265 top: 35px; 266 border-radius: 50%; 267 background: transparent; 268 box-shadow: 25px 0 0 0 #000000, -25px 0 0 0 #000000; 269} 270.emoji--wow .emoji__mouth { 271 width: 30px; 272 height: 45px; 273 left: calc(50% - 15px); 274 top: 50%; 275 border-radius: 50%; 276 background: #000000; 277 animation: wow-mouth 3s linear infinite; 278} 279 280.emoji--sad:after { 281 content: 'Sad'; 282} 283.emoji--sad .emoji__face { 284 animation: sad-face 2s ease-in infinite; 285} 286.emoji--sad .emoji__eyebrows { 287 left: calc(50% - 3px); 288 top: 35px; 289 height: 6px; 290 width: 6px; 291 border-radius: 50%; 292 background: transparent; 293 box-shadow: -40px 9px 0 0 #000000, -25px 0 0 0 #000000, 25px 0 0 0 #000000, 40px 9px 0 0 #000000; 294} 295.emoji--sad .emoji__eyebrows:before, .emoji--sad .emoji__eyebrows:after { 296 width: 30px; 297 height: 20px; 298 border: 6px solid #000000; 299 box-sizing: border-box; 300 border-radius: 50%; 301 border-bottom-color: transparent; 302 border-left-color: transparent; 303 border-right-color: transparent; 304 top: 2px; 305 left: calc(50% - 15px); 306} 307.emoji--sad .emoji__eyebrows:before { 308 margin-left: -30px; 309 transform: rotate(-30deg); 310} 311.emoji--sad .emoji__eyebrows:after { 312 margin-left: 30px; 313 transform: rotate(30deg); 314} 315.emoji--sad .emoji__eyes { 316 width: 14px; 317 height: 16px; 318 left: calc(50% - 7px); 319 top: 50px; 320 border-radius: 50%; 321 background: transparent; 322 box-shadow: 25px 0 0 0 #000000, -25px 0 0 0 #000000; 323} 324.emoji--sad .emoji__eyes:after { 325 background: #548DFF; 326 width: 12px; 327 height: 12px; 328 margin-left: 6px; 329 border-radius: 0 100% 40% 50% / 0 50% 40% 100%; 330 transform-origin: 0% 0%; 331 animation: tear-drop 2s ease-in infinite; 332} 333.emoji--sad .emoji__mouth { 334 width: 60px; 335 height: 80px; 336 left: calc(50% - 30px); 337 top: 80px; 338 box-sizing: border-box; 339 border: 6px solid #000000; 340 border-radius: 50%; 341 border-bottom-color: transparent; 342 border-left-color: transparent; 343 border-right-color: transparent; 344 background: transparent; 345 animation: sad-mouth 2s ease-in infinite; 346} 347.emoji--sad .emoji__mouth:after { 348 width: 6px; 349 height: 6px; 350 background: transparent; 351 border-radius: 50%; 352 top: 4px; 353 left: calc(50% - 3px); 354 box-shadow: -18px 0 0 0 #000000, 18px 0 0 0 #000000; 355} 356 357.emoji--angry { 358 background: linear-gradient(#D5234C -10%, #FFDA6A); 359 background-size: 100%; 360 animation: angry-color 2s ease-in infinite; 361} 362.emoji--angry:after { 363 content: 'Angry'; 364} 365.emoji--angry .emoji__face { 366 animation: angry-face 2s ease-in infinite; 367} 368.emoji--angry .emoji__eyebrows { 369 left: calc(50% - 3px); 370 top: 55px; 371 height: 6px; 372 width: 6px; 373 border-radius: 50%; 374 background: transparent; 375 box-shadow: -44px 5px 0 0 #000000, -7px 16px 0 0 #000000, 7px 16px 0 0 #000000, 44px 5px 0 0 #000000; 376} 377.emoji--angry .emoji__eyebrows:before, .emoji--angry .emoji__eyebrows:after { 378 width: 50px; 379 height: 20px; 380 border: 6px solid #000000; 381 box-sizing: border-box; 382 border-radius: 50%; 383 border-top-color: transparent; 384 border-left-color: transparent; 385 border-right-color: transparent; 386 top: 0; 387 left: calc(50% - 25px); 388} 389.emoji--angry .emoji__eyebrows:before { 390 margin-left: -25px; 391 transform: rotate(15deg); 392} 393.emoji--angry .emoji__eyebrows:after { 394 margin-left: 25px; 395 transform: rotate(-15deg); 396} 397.emoji--angry .emoji__eyes { 398 width: 12px; 399 height: 12px; 400 left: calc(50% - 6px); 401 top: 70px; 402 border-radius: 50%; 403 background: transparent; 404 box-shadow: 25px 0 0 0 #000000, -25px 0 0 0 #000000; 405} 406.emoji--angry .emoji__mouth { 407 width: 36px; 408 height: 18px; 409 left: calc(50% - 18px); 410 bottom: 15px; 411 background: #000000; 412 border-radius: 50%; 413 animation: angry-mouth 2s ease-in infinite; 414} 415 416@keyframes heart-beat { 417 25% { 418 transform: scale(1.1); 419 } 420 75% { 421 transform: scale(0.6); 422 } 423} 424@keyframes haha-face { 425 10% { 426 transform: translateY(25px); 427 } 428 20% { 429 transform: translateY(15px); 430 } 431 30% { 432 transform: translateY(25px); 433 } 434 40% { 435 transform: translateY(15px); 436 } 437 50% { 438 transform: translateY(25px); 439 } 440 60% { 441 transform: translateY(0); 442 } 443 70% { 444 transform: translateY(-10px); 445 } 446 80% { 447 transform: translateY(0); 448 } 449 90% { 450 transform: translateY(-10px); 451 } 452} 453@keyframes haha-mouth { 454 10% { 455 transform: scale(0.6); 456 top: 45%; 457 } 458 20% { 459 transform: scale(0.8); 460 top: 45%; 461 } 462 30% { 463 transform: scale(0.6); 464 top: 45%; 465 } 466 40% { 467 transform: scale(0.8); 468 top: 45%; 469 } 470 50% { 471 transform: scale(0.6); 472 top: 45%; 473 } 474 60% { 475 transform: scale(1); 476 top: 50%; 477 } 478 70% { 479 transform: scale(1.2); 480 top: 50%; 481 } 482 80% { 483 transform: scale(1); 484 top: 50%; 485 } 486 90% { 487 transform: scale(1.1); 488 top: 50%; 489 } 490} 491@keyframes yay { 492 25% { 493 transform: rotate(-15deg); 494 } 495 75% { 496 transform: rotate(15deg); 497 } 498} 499@keyframes wow-face { 500 15%, 25% { 501 transform: rotate(20deg) translateX(-25px); 502 } 503 45%, 65% { 504 transform: rotate(-20deg) translateX(25px); 505 } 506 75%, 100% { 507 transform: rotate(0deg) translateX(0); 508 } 509} 510@keyframes wow-brow { 511 15%, 65% { 512 top: 25px; 513 } 514 75%, 100%, 0% { 515 top: 15px; 516 } 517} 518@keyframes wow-mouth { 519 10%, 30% { 520 width: 20px; 521 height: 20px; 522 left: calc(50% - 10px); 523 } 524 50%, 70% { 525 width: 30px; 526 height: 40px; 527 left: calc(50% - 15px); 528 } 529 75%, 100% { 530 height: 50px; 531 } 532} 533@keyframes sad-face { 534 25%, 35% { 535 top: -15px; 536 } 537 55%, 95% { 538 top: 10px; 539 } 540 100%, 0% { 541 top: 0; 542 } 543} 544@keyframes sad-mouth { 545 25%, 35% { 546 transform: scale(0.85); 547 top: 70px; 548 } 549 55%, 100%, 0% { 550 transform: scale(1); 551 top: 80px; 552 } 553} 554@keyframes tear-drop { 555 0%, 100% { 556 display: block; 557 left: 35px; 558 top: 15px; 559 transform: rotate(45deg) scale(0); 560 } 561 25% { 562 display: block; 563 left: 35px; 564 transform: rotate(45deg) scale(2); 565 } 566 49.9% { 567 display: block; 568 left: 35px; 569 top: 65px; 570 transform: rotate(45deg) scale(0); 571 } 572 50% { 573 display: block; 574 left: -35px; 575 top: 15px; 576 transform: rotate(45deg) scale(0); 577 } 578 75% { 579 display: block; 580 left: -35px; 581 transform: rotate(45deg) scale(2); 582 } 583 99.9% { 584 display: block; 585 left: -35px; 586 top: 65px; 587 transform: rotate(45deg) scale(0); 588 } 589} 590@keyframes hands-up { 591 25% { 592 transform: rotate(15deg); 593 } 594 50% { 595 transform: rotate(-15deg) translateY(-10px); 596 } 597 75%, 100% { 598 transform: rotate(0deg); 599 } 600} 601@keyframes thumbs-up { 602 25% { 603 transform: rotate(20deg); 604 } 605 50%, 100% { 606 transform: rotate(5deg); 607 } 608} 609@keyframes angry-color { 610 45%, 60% { 611 background-size: 250%; 612 } 613 85%, 100%, 0% { 614 background-size: 100%; 615 } 616} 617@keyframes angry-face { 618 35%, 60% { 619 transform: translateX(0) translateY(10px) scale(0.9); 620 } 621 40% { 622 transform: translateX(-5px) translateY(10px) scale(0.9); 623 } 624 45% { 625 transform: translateX(5px) translateY(10px) scale(0.9); 626 } 627 50% { 628 transform: translateX(-5px) translateY(10px) scale(0.9); 629 } 630 55% { 631 transform: translateX(5px) translateY(10px) scale(0.9); 632 } 633} 634@keyframes angry-mouth { 635 25%, 50% { 636 height: 6px; 637 bottom: 25px; 638 } 639} 640 641 </style> 642</head> 643<body> 644 <div class="emoji emoji--like"> 645 <div class="emoji__hand"> 646 <div class="emoji__thumb"></div> 647 </div> 648</div> 649<div class="emoji emoji--love"> 650 <div class="emoji__heart"></div> 651</div> 652<div class="emoji emoji--haha"> 653 <div class="emoji__face"> 654 <div class="emoji__eyes"></div> 655 <div class="emoji__mouth"> 656 <div class="emoji__tongue"></div> 657 </div> 658 </div> 659</div> 660<div class="emoji emoji--yay"> 661 <div class="emoji__face"> 662 <div class="emoji__eyebrows"></div> 663 <div class="emoji__mouth"></div> 664 </div> 665</div> 666<div class="emoji emoji--wow"> 667 <div class="emoji__face"> 668 <div class="emoji__eyebrows"></div> 669 <div class="emoji__eyes"></div> 670 <div class="emoji__mouth"></div> 671 </div> 672</div> 673<div class="emoji emoji--sad"> 674 <div class="emoji__face"> 675 <div class="emoji__eyebrows"></div> 676 <div class="emoji__eyes"></div> 677 <div class="emoji__mouth"></div> 678 </div> 679</div> 680<div class="emoji emoji--angry"> 681 <div class="emoji__face"> 682 <div class="emoji__eyebrows"></div> 683 <div class="emoji__eyes"></div> 684 <div class="emoji__mouth"></div> 685 </div> 686</div> 687</body> 688</html>
如有错误，欢迎联系我改正，非常感谢！！！