SOURCE

(function() {
  var openComment, styles, time, writeStyleChar, writeStyles;

  styles = `
/*
pre {
    position: fixed; 
    top: 30px; bottom: 30px; right: 2%;
    transition: left 500ms;overflow: auto;
    background-color: #313744; color: #a6c3d4;border: 1px solid rgba(0,0,0,0.2);
    padding: 24px 12px;box-sizing: border-box;
    width: 48%;
    border-radius: 3px;box-shadow: 0px 4px 0px 2px rgba(0,0,0,0.1);
  } 
  pre em:not(.comment) {font-style:normal; }
  .comment{ color: #707e84; }
  .selector{ color: #c66c75; }
  .selector .key { color: #c66c75; }
  .key{ color: #c7ccd4; }
  .value{ color: #d5927b; }
  .code{text-align: right; }
  .code img {width: 50px;vertical-align: top; }
*/
  pre {
    display:none
  }
  .container {position: relative;margin:240px auto 0;width: 240px;height: 425px;}
    /* HEAD
    ========================================================================== */
    .hold-head {
      position: relative;
      height: 200px; }
      .hold-head .head {
        position: relative;
        margin: 0 auto;
        background-color: #ffe000;
        border: solid 4px #000; }
      .hold-head .head-up {
        border-bottom: 4px solid #ffe000;
        border-radius: 110px 110px 110px 110px;
        height: 195px;
        left: 8px;
        position: absolute;
        top: 2px;
        width: 218px;
        z-index: 1; }
      .hold-head .head-down {
        border-radius: 50%;
        height: 154px;
        left: 2px;
        top: 65px;
        width: 234px; }
      .hold-head .head-middle {
        position: absolute;
        z-index: 2;
        top: 76px;
        left: 8px;
        height: 123px;
        width: 230px;
        border: medium none;
        border-radius: 50%; }
      .hold-head .ear {
        position: absolute;
        background: none repeat scroll 0 0 #ffe000;
        border: 5px solid #000;
        overflow: hidden; }
      .hold-head .ear-left {
        left: -35px;
        top: -65px;
        width: 100px;
        height: 110px;
        border-radius: 5px 125% 0px 125%;
        transform: rotate(-26deg) skewX(25deg) skewY(0deg);
        transform-origin: 100% 100%;
        /* animation */
        animation: ear_left 4.5s infinite linear 0s; }
        .hold-head .ear-left:before {
          background-color: #000;
          content: "";
          height: 60px;
          left: -32px;
          position: absolute;
          top: -5px;
          width: 60px;
          transform: rotate(18deg); }
      .hold-head .ear-right {
        width: 140px;
        height: 80px;
        right: -77px;
        top: 70px;
        border-radius: 10px 125% 10px 125%;
        box-shadow: 11px -9px 0 2px rgba(0, 0, 0, 0.2) inset;
        transform: rotate(-90deg) skewX(27deg) skewY(0deg);
        transform-origin: 0 0;
        /* animation */
        animation: ear_right 3s infinite linear 0s; }
        .hold-head .ear-right:before {
          background-color: #000;
          content: "";
          height: 60px;
          position: absolute;
          right: -5px;
          top: 62px;
          width: 65px;
          transform: rotate(-15deg); }
      .hold-head .hold-face {
        position: absolute;
        z-index: 3;
        height: 222px;
        width: 238px; }
    
    .hold-face {
      /* EYES */
      /* NOSE */
      /* CHEEK */
      /* MOUTH */ }
      .hold-face .eye {
        background-color: #000;
        border-radius: 50%;
        height: 42px;
        overflow: hidden;
        position: absolute;
        top: 84px;
        width: 42px; }
        .hold-face .eye .iris {
          background-color: #fff;
          border-radius: 50%;
          height: 16px;
          position: absolute;
          top: 7px;
          width: 16px; }
        .hold-face .eye .iris-small {
          width: 6px;
          height: 11px; }
      .hold-face .eye-left {
        left: 36px; }
        .hold-face .eye-left .iris-small {
          left: 7px;
          top: 32px;
          transform: rotate(27deg); }
        .hold-face .eye-left .iris-left {
          right: 7px;
          /* animation */
          animation: pisca 3s infinite step-start 0s; }
      .hold-face .eye-right {
        right: 36px; }
        .hold-face .eye-right .iris-small {
          left: 25px;
          top: 33px;
          transform: rotate(-25deg); }
        .hold-face .eye-right .iris-right {
          left: 7px;
          /* animation */
          animation: pisca 3s infinite step-start 0s; }
      .hold-face .eyebrow {
        width: 45px;
        height: 2px;
        background: #000;
        position: absolute;
        top: 85px;
        z-index: 2;
        opacity: 0;
        /* animation */
        animation: angry 5s infinite step-start 2s; }
        .hold-face .eyebrow:before {
          background: #ffe000;
          height: 20px;
          width: 50px;
          content: '';
          position: absolute;
          top: -20px; }
      .hold-face .eyebrow-left {
        left: 35px;
        transform: rotate(22deg); }
      .hold-face .eyebrow-right {
        right: 35px;
        transform: rotate(-22deg); }
      .hold-face .nose {
        position: absolute;
        top: 125px;
        left: 111px;
        width: 17px;
        height: 15px; }
        .hold-face .nose .nose-top {
          position: absolute;
          z-index: 1;
          top: 0;
          width: 100%;
          height: 2px;
          background-color: #000;
          border-radius: 34% 34% 22% 22%; }
        .hold-face .nose .hold-nose-bottom {
          position: absolute;
          top: 1px;
          z-index: 1;
          height: 10px;
          width: 17px;
          overflow: hidden; }
          .hold-face .nose .hold-nose-bottom .nose-bottom {
            position: absolute;
            top: -10px;
            height: 17px;
            width: 16px;
            background-color: #000;
            border-radius: 34% 33% 33% 33%;
            transform: rotate(135deg); }
      .hold-face .cheek {
        background-color: #f00;
        border: 2px solid #000;
        border-radius: 50%;
        height: 50px;
        position: absolute;
        top: 126px;
        width: 50px; }
        .hold-face .cheek .hold-thunder {
          height: 35px;
          position: absolute;
          width: 30px;
          z-index: 1;
          opacity: 0;
          /* animation */
          animation: light 5s infinite step-start 0s; }
          .hold-face .cheek .hold-thunder .thunder {
            position: absolute;
            background: #fff;
            height: 1px; }
          .hold-face .cheek .hold-thunder .thunder1 {
            width: 10px;
            left: 15px;
            top: 28px; }
          .hold-face .cheek .hold-thunder .thunder2 {
            left: 8px;
            top: 25px;
            width: 10px;
            transform: rotate(41deg); }
          .hold-face .cheek .hold-thunder .thunder3 {
            left: 3px;
            top: 24px;
            width: 8px;
            transform: rotate(-40deg); }
        .hold-face .cheek .hold-thunder1 {
          left: 0px;
          top: -4px; }
        .hold-face .cheek .hold-thunder2 {
          left: 25px;
          top: 4px;
          transform: rotate(111deg); }
        .hold-face .cheek .hold-thunder3 {
          left: 25px;
          top: 4px;
          transform: rotate(25deg); }
      .hold-face .cheek-left {
        left: 4px; }
      .hold-face .cheek-right {
        right: -3px; }
      .hold-face .light {
        position: absolute;
        top: 88px;
        width: 130px;
        height: 130px;
        background-image: 
        -webkit-gradient(radial, 50% 50%, 2, 50% 50%, 30, from(#fff), color-stop(0.1, rgba(255, 240, 174, 0.5)), to(rgba(255, 255, 253, 0.1))),
        -webkit-gradient(radial, 50% 50%, 1, 50% 50%, 30, from(#fff), color-stop(0.1, rgba(255, 186, 170, 0.4)), to(transparent)), 
        -webkit-gradient(radial, 50% 50%, 1,50% 50%, 40, from(rgba(255, 255, 255, 0.9)), color-stop(0.05, rgba(251, 255, 186, 0.3)), to(transparent)), 
        -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 30,from(rgba(255, 255, 255, 0.4)), color-stop(0.03, rgba(253, 255, 219, 0.2)), to(transparent));
        opacity: 0;
        /* animation */
        animation: light 5s infinite step-start 0s; 
      }
      .hold-face .light-left {
        left: -35px; }
      .hold-face .light-right {
        right: -43px; }
      .hold-face .hold-mouth {
        position: relative;
        top: 150px;
        left: 70px;
        height: 9px;
        width: 100px;
        overflow: hidden; }
        .hold-face .hold-mouth .mouth {
          position: absolute;
          border: solid 2px #000;
          border-radius: 20px; }
        .hold-face .hold-mouth .mouth-left {
          height: 40px;
          left: 16px;
          top: -35px;
          width: 30px; }
        .hold-face .hold-mouth .mouth-right {
          height: 40px;
          right: 16px;
          top: -35px;
          width: 30px; }
        .hold-face .hold-mouth .mouth-center {
          height: 40px;
          right: 33px;
          top: 0px;
          width: 30px;
          background-color: #ffe000;
          z-index: 2; }
    
    /* BODY
    ========================================================================== */
    .hold-body {
      background-color: #ffe000;
      border: 4px solid #000;
      border-radius: 55% 55% 23% 23%;
      height: 255px;
      left: 12px;
      position: relative;
      top: -70px;
      width: 215px;
      z-index: -1; }
      .hold-body .hand {
        border: 2px solid #000;
        height: 65px;
        position: absolute;
        width: 45px; }
      .hold-body .hand-left {
        top: 100px;
        left: 25px;
        border-radius: 20px 20px 28px 35px;
        transform: rotate(-26deg); }
        .hold-body .hand-left:before {
          background-color: #ffe000;
          content: "";
          height: 15px;
          left: -3px;
          position: absolute;
          top: -3px;
          width: 50px;
          z-index: 2; }
      .hold-body .hand-right {
        top: 100px;
        right: 25px;
        border-radius: 20px 20px 28px 35px;
        transform: rotate(26deg); }
        .hold-body .hand-right:before {
          background-color: #ffe000;
          content: "";
          height: 15px;
          left: -3px;
          position: absolute;
          top: -3px;
          width: 50px;
          z-index: 2; }
    
    .foot {
      position: absolute;
      border: 3px solid #000;
      background: #ffe000;
      height: 25px;
      width: 75px;
      z-index: -2; }
    
    .left-foot {
      border-radius: 65px 20px 10px 15px;
      bottom: 13px;
      left: 5px; }
    
    .right-foot {
      border-radius: 20px 65px 15px 10px;
      bottom: 13px;
      right: -5px; }
    
    /* TAIL
    ========================================================================== */
    .hold-tail {
      position: absolute;
      z-index: -2;
      width: 200px;
      height: 340px;
      left: -165px;
      bottom: 0;
      overflow: hidden; }
      .hold-tail .tail {
        position: absolute;
        border: 3px solid #000;
        background-color: #ffe000; }
      .hold-tail .brown {
        background: #976500; }
      .hold-tail .tail1 {
        z-index: 3;
        border-top: none;
        bottom: 74px;
        height: 25px;
        right: -8px;
        width: 45px;
        transform: skewX(-30deg); }
      .hold-tail .tail2 {
        z-index: 2;
        bottom: 99px;
        height: 23px;
        right: 15px;
        width: 21px;
        border-left: none;
        transform: skewX(-30deg); }
      .hold-tail .tail3 {
        bottom: 99px;
        height: 70px;
        right: 22px;
        width: 25px;
        z-index: 1;
        transform: skewX(-30deg);
        background: #ffe000;
        background: linear-gradient(to bottom, #ffe000 0%, #ffe000 49%, #000 50%, #926512 51%, #926512 100%); }
      .hold-tail .tail4 {
        border-radius: 0 0 0 6px;
        bottom: 140px;
        height: 29px;
        right: 37px;
        width: 63px;
        z-index: 1;
        border-right: none;
        transform: skewX(-30deg); }
      .hold-tail .tail5 {
        border-bottom: medium none;
        border-top: none;
        bottom: 172px;
        height: 51px;
        right: 22px;
        width: 52px;
        z-index: 1;
        transform: skewX(-30deg); }
      .hold-tail .tail6 {
        border-radius: 10px 0 0 10px;
        border-right: none;
        bottom: 220px;
        height: 60px;
        right: 2px;
        width: 135px;
        z-index: 0;
        transform: skewX(41deg); }
    
    /* ANIMATIONS
    ========================================================================== */
    /* PISCA */
    @keyframes pisca {
      0%, 100% {
        opacity: 0; }
      15%, 95% {
        opacity: 1; } }
    
    /* EAR RIGHT */
    @keyframes ear_right {
      0% {
        transform: rotate(-90deg) skewX(27deg) skewY(0deg); }
      50% {
        transform: rotate(-87deg) skewX(27deg) skewY(0deg); }
      100% {
        transform: rotate(-90deg) skewX(27deg) skewY(0deg); } }
    
    /* EAR LEFT */
    @keyframes ear_left {
      0% {
        transform: rotate(-26deg) skewX(25deg) skewY(0deg); }
      50% {
        transform: rotate(-22deg) skewX(25deg) skewY(0deg); }
      100% {
        transform: rotate(-26deg) skewX(25deg) skewY(0deg); } }
    
    /* ANGRY */
    @keyframes angry {
      0% {
        opacity: 0; }
      5% {
        opacity: 1; }
      19% {
        opacity: 1; }
      25% {
        opacity: 0; }
      100% {
        opacity: 0; } }
    
    /* LIGHT */
    @keyframes light {
      0% {
        opacity: 0; }
      5% {
        opacity: 1; }
      10% {
        opacity: 0; }
      15% {
        opacity: 1; }
      20% {
        opacity: 0; }
      100% {
        opacity: 0; } }
    `;

  openComment = false;

  writeStyleChar = function(which) {
    // begin wrapping open comments
    if (which === '/' && openComment === false) {
      openComment = true;
      styles = $('#style-text').html() + which;
    } else if (which === '/' && openComment === true) {
      openComment = false;
      styles = $('#style-text')
        .html()
        .replace(/(\/[^\/]*\*)$/, '<em class="comment">$1/</em>');
      // wrap style declaration
    } else if (which === ':') {
      styles = $('#style-text')
        .html()
        .replace(/([a-zA-Z- ^\n]*)$/, '<em class="key">$1</em>:');
      // wrap style value
    } else if (which === ';') {
      styles = $('#style-text')
        .html()
        .replace(/([^:]*)$/, '<em class="value">$1</em>;');
      // wrap selector
    } else if (which === '{') {
      styles = $('#style-text')
        .html()
        .replace(/(.*)$/, '<em class="selector">$1</em>{');
    } else {
      styles = $('#style-text').html() + which;
    }
    $('#style-text').html(styles);
    return $('#style-tag').append(which);
  };

  writeStyles = function(message, index, interval) {
    var pre;
    if (index < message.length) {
      pre = document.getElementById('style-text');
      pre.scrollTop = pre.scrollHeight;
      writeStyleChar(message[index++]);
      return setTimeout(function() {
        return writeStyles(message, index, interval);
      }, interval);
    }
  };

  // appending the tags I'll need.
  $('body').append(
    `<style id="style-tag"></style>\n<div class="container">
    <div class="hold-head">
        <div class="ear ear-left"></div>
        <div class="ear ear-right"></div>
        <div class="hold-face">
            <div class="eyebrow eyebrow-left"></div>
            <div class="eyebrow eyebrow-right"></div>
            <div class="eye eye-left">
                <div class="iris iris-left"></div>
                <div class="iris iris-small"></div>
            </div>
            <div class="eye eye-right">
                <div class="iris iris-right"></div>
                <div class="iris iris-small"></div>
            </div>
            <div class="nose">
                <div class="nose-top"></div>
                <div class="hold-nose-bottom">
                    <div class="nose-bottom"></div>
                </div>
            </div>
            <div id="open" class="mouth-open">
                <div class="tongue"></div>
            </div>
            <div class="hold-mouth">
                <div class="mouth mouth-left"></div>
                <div class="mouth mouth-center"></div>
                <div class="mouth mouth-right"></div>
            </div>
            <div class="cheek cheek-left">
                <div class="hold-thunder hold-thunder1">
                    <div class="thunder thunder1"></div>
                    <div class="thunder thunder2"></div>
                    <div class="thunder thunder3"></div>
                </div>
                <div class="hold-thunder hold-thunder2">
                    <div class="thunder thunder1"></div>
                    <div class="thunder thunder2"></div>
                    <div class="thunder thunder3"></div>
                </div>
                <div class="hold-thunder hold-thunder3">
                    <div class="thunder thunder1"></div>
                    <div class="thunder thunder2"></div>
                    <div class="thunder thunder3"></div>
                </div>
            </div>
            <div class="cheek cheek-right">
                <div class="hold-thunder hold-thunder1">
                    <div class="thunder thunder1"></div>
                    <div class="thunder thunder2"></div>
                    <div class="thunder thunder3"></div>
                </div>
                <div class="hold-thunder hold-thunder2">
                    <div class="thunder thunder1"></div>
                    <div class="thunder thunder2"></div>
                    <div class="thunder thunder3"></div>
                </div>
                <div class="hold-thunder hold-thunder3">
                    <div class="thunder thunder1"></div>
                    <div class="thunder thunder2"></div>
                    <div class="thunder thunder3"></div>
                </div>
            </div>
            <div class="light light-left"></div>
            <div class="light light-right"></div>
        </div>
        <div class="head head-up"></div>
        <div class="head head-middle"></div>
        <div class="head head-down"></div>
    </div>
    <div class="hold-body">
        <div class="hand hand-left"></div>
        <div class="hand hand-right"></div>
    </div>
    <div class="foot left-foot"></div>
    <div class="foot right-foot"></div>
    <div class="hold-tail">
        <div class="tail brown tail1"></div>
        <div class="tail brown tail2"></div>
        <div class="tail tail3"></div>
        <div class="tail tail4"></div>
        <div class="tail tail5"></div>
        <div class="tail tail6"></div>
    </div>
</div>\n<pre id="style-text"></pre>`,
  );

  // faster typing in small iframe on codepen homepage
  time = window.innerWidth <= 578 ? 4 : 0.1;

  // starting it off
  writeStyles(styles, 0, time);

  /*
Changelog:
1.0.0: i exist!
1.0.1: heart instead of circle
1.0.2: including standard CSS3 transforms and animations
	was only using `-webkit` to be less verbose (standard transforms dont work in safari)
	now works in FF
1.0.3: crossbrowser echo 
	nested `scale()` styles (scaled in scaled) only worked in chrome
	moved echo out of heart to fix
1.0.4: more efficient animations
	`0%, 100% {}` instead of duplicated keyframes
1.0.5: overflwo fix
  `overflow: auto` on the `pre`
*/
}.call(this));
console 命令行工具 X clear

                    
>
console