CSS进阶之画企鹅

<style>
    /* 根选择器，一般为HTML */
    :root {
        /* 定义变量 */
      --penguin-size: 300px;
      --penguin-skin: gray;
      --penguin-belly: white;
      --penguin-beak: orange;
    }
  
    @media (max-width: 350px) {
      :root {
        --penguin-size: 200px;
        --penguin-skin: black;
      }
    }
  
    .penguin {
      position: relative;
      margin: auto;
      display: block;
      margin-top: 5%;
      width: var(--penguin-size, 300px);
      height: var(--penguin-size, 300px);
      /* 阴影边框部分 */
      box-shadow: 0 26px 10px rgba(0, 0, 0, 0.1),0px 0px 0px rgba(0, 0, 0, 0.1);
        /* 旋转整个页面 */
      transform: rotate(0.5 turn);
    }
  
    .right-cheek {
      top: 15%;
      left: 35%;
      background: var(--penguin-belly, white);
      width: 60%;
      height: 70%;
      border-radius: 70% 70% 60% 60%;
    }
  
    .left-cheek {
      top: 15%;
      left: 5%;
      background: var(--penguin-belly, white);
      width: 60%;
      height: 70%;
      border-radius: 70% 70% 60% 60%;
    }
  
    .belly {
      top: 60%;
      left: 2.5%;
      background: var(--penguin-belly, white);
      width: 95%;
      height: 100%;
      border-radius: 120% 120% 100% 100%;
    }
  
    .penguin-top {
      top: 10%;
      left: 25%;
      background: var(--penguin-skin, gray);
      width: 50%;
      height: 45%;
      border-radius: 70% 70% 60% 60%;
    }
  
    .penguin-bottom {
      top: 40%;
      left: 23.5%;
      background: var(--penguin-skin, gray);
      width: 53%;
      height: 45%;
      border-radius: 70% 70% 100% 100%;
    }
  
    .right-hand {
      top: 5%;
      left: 25%;
      background: var(--penguin-skin, black);
      width: 30%;
      height: 60%;
      border-radius: 30% 30% 120% 30%;
      transform: rotate(130deg);
      z-index: -1;
      animation-duration: 3s;
      animation-name: wave;
      animation-iteration-count: infinite;
      transform-origin:0% 0%;
      animation-timing-function: linear;
    }
  
    @keyframes wave {
        10% {
          transform: rotate(110deg);
        }
        20% {
          transform: rotate(130deg);
        }
        30% {
          transform: rotate(110deg);
        }
        40% {
          transform: rotate(130deg);
        }
      }
  
    .left-hand {
      top: 0%;
      left: 75%;
      background: var(--penguin-skin, gray);
      width: 30%;
      height: 60%;
      border-radius: 30% 30% 30% 120%;
      transform: rotate(-45deg);
      z-index: -1;
    }
  
    .right-feet {
      top: 85%;
      left: 60%;
      background: var(--penguin-beak, orange);
      width: 15%;
      height: 30%;
      border-radius: 50% 50% 50% 50%;
      transform: rotate(-80deg);
      z-index: -2222;
    }
  
    .left-feet {
      top: 85%;
      left: 25%;
      background: var(--penguin-beak, orange);
      width: 15%;
      height: 30%;
      border-radius: 50% 50% 50% 50%;
      transform: rotate(80deg);
      z-index: -2222;
    }
  
    .right-eye {
      top: 45%;
      left: 60%;
      background: black;
      width: 15%;
      height: 17%;
      border-radius: 50%;
    }
  
    .left-eye {
      top: 45%;
      left: 25%;
      background: black;
      width: 15%;
      height: 17%;
      border-radius: 50%;
    }
  
    .sparkle {
      top: 25%;
      left:-23%;
      background: white;
      width: 150%;
      height: 100%;
      border-radius: 50%;
    }
  
    .blush-right {
      top: 65%;
      left: 15%;
      background: pink;
      width: 15%;
      height: 10%;
      border-radius: 50%;
    }
  
    .blush-left {
      top: 65%;
      left: 70%;
      background: pink;
      width: 15%;
      height: 10%;
      border-radius: 50%;
    }
  
    .beak-top {
      top: 60%;
      left: 40%;
      background: var(--penguin-beak, orange);
      width: 20%;
      height: 10%;
      border-radius: 50%;
    }
  
    .beak-bottom {
      top: 65%;
      left: 42%;
      background: var(--penguin-beak, orange);
      width: 16%;
      height: 10%;
      border-radius: 50%;
    }
  
    body {
      background:#c6faf1;
    }
  
    .penguin * {
      position: absolute;
    }
    .a {
        width: 100px;
        height: 100px;
        top: 300px;
        margin: 50px auto;
        text-align: center; 
        transform: rotate(0.125turn);
        border-radius: 30px;
        background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
    }

    .b {
    border-radius: 20px;
    width: 100px;
    height: 100px;
    top: 500px;
    margin:  50 auto;
    background: repeating-linear-gradient(
      45deg,
      yellow 0px,
      yellow 4px,
      black 4px,
      black 8px
    );
    }
  </style>
  <div class="penguin">
    <div class="penguin-bottom">
      <div class="right-hand"></div>
      <div class="left-hand"></div>
      <div class="right-feet"></div>
      <div class="left-feet"></div>
    </div>
    <div class="penguin-top">
      <div class="right-cheek"></div>
      <div class="left-cheek"></div>
      <div class="belly"></div>
      <div class="right-eye">
        <div class="sparkle"></div>
      </div>
      <div class="left-eye">
        <div class="sparkle"></div>
      </div>
      <div class="blush-right"></div>
      <div class="blush-left"></div>
      <div class="beak-top"></div>
      <div class="beak-bottom"></div>
      <div class="a">٩( 'ω' )و get！</div>
      <div class="b">(ˉ▽￣～) 切~~</div>
    </div>
  </div>