正在加载中，请稍后
author 首页 关于 笔记

按回车搜索更多
404 500等错误页面静态H5模板 - 可爱风格的猫抓毛线球
2018-08-25 阅读 {{counts.readCount}} 评论 {{counts.commentCount}}


附上演示地址: https://cdn1.zzzmh.cn/blog/error/cat.html

猫抓毛线球是很久以前看到一个网上大神用CSS写的代码，并非我的原创哈

我这次需要写个Nginx的错误页面，忽然想到了毛抓毛线球，拿来稍作修改。

 

效果图

 

 

 

为了节约空间，css html js三合一到一起，直接缩成一行，最终压缩到22k。背后的字是透明白色字的背景图。对应代码位置是background: #333333 url("cat.png")，建议找出来，替换成类似七牛云oss的线上位置。实在不行，就把cat.png和cat.html放在同目录也可以


cat.html代码如下，   附上背景图片cat.png  cat.png

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>网站维护中</title>
    <style type="text/css">
      button,
      hr,
      input {
        overflow: visible;
      }
      audio,
      canvas,
      progress,
      video {
        display: inline-block;
      }
      progress,
      sub,
      sup {
        vertical-align: baseline;
      }
      html {
        font-family: sans-serif;
        line-height: 1.15;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
      }
      body {
        margin: 0;
      }
      menu,
      article,
      aside,
      details,
      footer,
      header,
      nav,
      section {
        display: block;
      }
      h1 {
        font-size: 2em;
        margin: 0.67em 0;
      }
      figcaption,
      figure,
      main {
        display: block;
      }
      figure {
        margin: 1em 40px;
      }
      hr {
        box-sizing: content-box;
        height: 0;
      }
      code,
      kbd,
      pre,
      samp {
        font-family: monospace, monospace;
        font-size: 1em;
      }
      a {
        background-color: transparent;
        -webkit-text-decoration-skip: objects;
      }
      a:active,
      a:hover {
        outline-width: 0;
      }
      abbr[title] {
        border-bottom: none;
        text-decoration: underline;
        text-decoration: underline dotted;
      }
      b,
      strong {
        font-weight: bolder;
      }
      dfn {
        font-style: italic;
      }
      mark {
        background-color: #ff0;
        color: #000;
      }
      small {
        font-size: 80%;
      }
      sub,
      sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
      }
      sub {
        bottom: -0.25em;
      }
      sup {
        top: -0.5em;
      }
      audio:not([controls]) {
        display: none;
        height: 0;
      }
      img {
        border-style: none;
      }
      svg:not(:root) {
        overflow: hidden;
      }
      button,
      input,
      optgroup,
      select,
      textarea {
        font-family: sans-serif;
        font-size: 100%;
        line-height: 1.15;
        margin: 0;
      }
      button,
      input {
      }
      button,
      select {
        text-transform: none;
      }
      [type="submit"],
      [type="reset"],
      button,
      html [type="button"] {
        -webkit-appearance: button;
      }
      [type="button"]::-moz-focus-inner,
      [type="reset"]::-moz-focus-inner,
      [type="submit"]::-moz-focus-inner,
      button::-moz-focus-inner {
        border-style: none;
        padding: 0;
      }
      [type="button"]:-moz-focusring,
      [type="reset"]:-moz-focusring,
      [type="submit"]:-moz-focusring,
      button:-moz-focusring {
        outline: ButtonText dotted 1px;
      }
      fieldset {
        border: 1px solid silver;
        margin: 0 2px;
        padding: 0.35em 0.625em 0.75em;
      }
      legend {
        box-sizing: border-box;
        color: inherit;
        display: table;
        max-width: 100%;
        padding: 0;
        white-space: normal;
      }
      progress {
      }
      textarea {
        overflow: auto;
      }
      [type="checkbox"],
      [type="radio"] {
        box-sizing: border-box;
        padding: 0;
      }
      [type="number"]::-webkit-inner-spin-button,
      [type="number"]::-webkit-outer-spin-button {
        height: auto;
      }
      [type="search"] {
        -webkit-appearance: textfield;
        outline-offset: -2px;
      }
      [type="search"]::-webkit-search-cancel-button,
      [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
      }
      ::-webkit-file-upload-button {
        -webkit-appearance: button;
        font: inherit;
      }
      summary {
        display: list-item;
      }
      [hidden],
      template {
        display: none;
      }
      .all-wrap {
        -webkit-animation: bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
        animation: bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
      }
      .all {
        top: 10rem;
        left: calc(50% - 2.5rem);
        position: absolute;
        width: 5rem;
        height: 5rem;
        -webkit-transform-origin: center -20rem;
        transform-origin: center -20rem;
        -webkit-animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
        animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
      }
      .all:before {
        height: 20rem;
        width: 2px;
        background-color: #db242a;
        left: calc(50% - 1px);
        bottom: 20rem;
      }
      .yarn {
        position: absolute;
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-image: -webkit-radial-gradient(
          top left,
          circle,
          #e97c7f,
          #db242a 50%,
          #af1d22
        );
        background-image: radial-gradient(
          circle at top left,
          #e97c7f,
          #db242a 50%,
          #af1d22
        );
        z-index: 1;
      }
      .yarn:before,
      .yarn:after {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: white;
        top: -1px;
      }
      .yarn:before {
        left: calc(50% + 7px);
        background-color: #b1bce6;
      }
      .yarn:after {
        right: calc(50% + 7px);
        background-color: #d5e8f8;
      }
      .cat-wrap {
        position: absolute;
        top: 0;
        left: calc(50% - 45px);
        width: 90px;
        height: 130px;
        -webkit-animation: reverse-swing 7s cubic-bezier(0.5, 0, 0.5, 1)
          infinite both;
        animation: reverse-swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
        -webkit-transform-origin: top center;
        transform-origin: top center;
      }
      .cat {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-animation: swing 7s 0.2s infinite both;
        animation: swing 7s 0.2s infinite both;
        -webkit-transform-origin: top center;
        transform-origin: top center;
      }
      .cat-upper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transform-origin: top center;
        transform-origin: top center;
        z-index: 1;
      }
      .cat-upper .cat-leg {
        position: absolute;
        width: 20px;
        height: 100%;
        background-color: white;
        z-index: -1;
        background-image: -webkit-linear-gradient(
          left,
          #d5e8f8,
          #d5e8f8 20%,
          #8b9bd9
        );
        background-image: linear-gradient(
          to right,
          #d5e8f8,
          #d5e8f8 20%,
          #8b9bd9
        );
      }
      .cat-upper .cat-leg:nth-child(1) {
        border-top-left-radius: 100px;
        left: 10px;
      }
      .cat-upper .cat-leg:nth-child(1):after {
        left: 50%;
      }
      .cat-upper .cat-leg:nth-child(2) {
        border-top-left-radius: 0;
        border-top-right-radius: 100px;
        right: 10px;
      }
      .cat-upper .cat-leg:nth-child(2):after {
        right: 50%;
      }
      .cat-lower-wrap {
        height: 90%;
        width: 100%;
        position: absolute;
        top: 100%;
        width: 75px;
        left: calc(50% - 37.5px);
        -webkit-animation: reverse-swing 7s 0.2s infinite both;
        animation: reverse-swing 7s 0.2s infinite both;
        -webkit-transform-origin: top center;
        transform-origin: top center;
      }
      .cat-lower {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-animation: swing 7s 0.5s infinite both;
        animation: swing 7s 0.5s infinite both;
        -webkit-transform-origin: top center;
        transform-origin: top center;
      }
      .cat-lower:after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 100px;
        background-image: -webkit-radial-gradient(
          10px 50px,
          circle,
          #ffffff,
          #ffffff 40%,
          #d5e8f8 65%,
          #8b9bd9
        );
        background-image: radial-gradient(
          circle at 10px 50px,
          #ffffff,
          #ffffff 40%,
          #d5e8f8 65%,
          #8b9bd9
        );
        z-index: 1;
      }
      .cat-lower .cat-leg,
      .cat-lower .cat-paw {
        z-index: -1;
        position: absolute;
        height: 20px;
        width: 20px;
        -webkit-animation: swing-leg 7s 0.3s infinite both;
        animation: swing-leg 7s 0.3s infinite both;
        z-index: 1;
        -webkit-transform-origin: top center;
        transform-origin: top center;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        background-image: -webkit-linear-gradient(
          left,
          white,
          #d5e8f8,
          #8b9bd9
        );
        background-image: linear-gradient(to right, white, #d5e8f8, #8b9bd9);
      }
      .cat-lower > .cat-leg {
        bottom: 20px;
      }
      .cat-lower > .cat-leg .cat-leg {
        top: 25%;
      }
      .cat-lower > .cat-leg + .cat-leg {
        right: 0;
      }
      .cat-lower .cat-paw {
        top: 50%;
        border-radius: 50%;
        background-color: #fff;
      }
      .cat-lower .cat-tail {
        position: absolute;
        height: 15px;
        width: 10px;
        -webkit-animation: swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite
          both;
        animation: swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
        -webkit-transform-origin: top center;
        transform-origin: top center;
        z-index: 0;
        background-image: -webkit-linear-gradient(
          left,
          white,
          #d5e8f8,
          #8b9bd9
        );
        background-image: linear-gradient(to right, white, #d5e8f8, #8b9bd9);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }
      .cat-lower .cat-tail > .cat-tail {
        top: 50%;
      }
      .cat-lower > .cat-tail {
        left: calc(50% - 5px);
        top: 95%;
      }
      .cat-head {
        width: 90px;
        height: 90px;
        background-image: -webkit-radial-gradient(
          10px 10px,
          circle,
          #ffffff,
          #ffffff 40%,
          #d5e8f8 65%,
          #8b9bd9
        );
        background-image: radial-gradient(
          circle at 10px 10px,
          #ffffff,
          #ffffff 40%,
          #d5e8f8 65%,
          #8b9bd9
        );
        border-radius: 50%;
        top: calc(100% - 45px);
      }
      .cat-face {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        -webkit-animation: face 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
        animation: face 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-perspective: 100px;
        perspective: 100px;
      }
      .cat-ears {
        position: absolute;
        top: 0;
        left: 0;
        height: 50%;
        width: 100%;
        z-index: -1;
      }
      .cat-ear {
        width: 20px;
        height: 100%;
        position: absolute;
        border-radius: 5px;
        top: -10px;
      }
      .cat-ear:first-child {
        left: 0;
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-transform: skewY(40deg);
        transform: skewY(40deg);
        background-color: white;
      }
      .cat-ear:first-child:before {
        left: 0;
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        background-color: #d7ebfb;
      }
      .cat-ear:last-child {
        right: 0;
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-transform: skewY(-40deg);
        transform: skewY(-40deg);
        background-color: #d1e6f7;
      }
      .cat-ear:last-child:before {
        right: 0;
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        background-color: #e0f0fc;
      }
      .cat-ear:before {
        width: 60%;
        height: 100%;
        top: 10px;
        position: absolute;
        background-color: #fff;
      }
      .cat-eyes {
        position: absolute;
        top: 50%;
        width: 100%;
        height: 6px;
        -webkit-animation: blink 7s step-end infinite both;
        animation: blink 7s step-end infinite both;
      }
      .cat-eyes:before,
      .cat-eyes:after {
        position: absolute;
        height: 6px;
        width: 6px;
        border-radius: 50%;
        background-color: #4b4d75;
      }
      .cat-eyes:before {
        left: 20px;
      }
      .cat-eyes:after {
        right: 20px;
      }
      .cat-mouth {
        position: absolute;
        width: 12px;
        height: 8px;
        background-color: #4b4d75;
        top: 60%;
        left: calc(50% - 6px);
        border-top-left-radius: 50% 30%;
        border-top-right-radius: 50% 30%;
        border-bottom-left-radius: 50% 70%;
        border-bottom-right-radius: 50% 70%;
        -webkit-transform: translateZ(10px);
        transform: translateZ(10px);
      }
      .cat-mouth:before,
      .cat-mouth:after {
        position: absolute;
        width: 90%;
        height: 100%;
        border: 2px solid #9fa2cb;
        top: 80%;
        border-radius: 100px;
        border-top-color: transparent;
        z-index: -1;
      }
      .cat-mouth:before {
        border-left-color: transparent;
        right: calc(50% - 1px);
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
      }
      .cat-mouth:after {
        border-right-color: transparent;
        left: calc(50% - 1px);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
      }
      .cat-whiskers {
        width: 50%;
        height: 8px;
        position: absolute;
        bottom: 25%;
        left: 25%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-perspective: 60px;
        perspective: 60px;
      }
      .cat-whiskers:before,
      .cat-whiskers:after {
        position: absolute;
        height: 100%;
        width: 30%;
        border: 2px solid #9fa2cb;
        border-left: none;
        border-right: none;
      }
      .cat-whiskers:before {
        right: 100%;
        -webkit-transform-origin: right center;
        transform-origin: right center;
        -webkit-transform: rotateY(70deg) rotateZ(-10deg);
        transform: rotateY(70deg) rotateZ(-10deg);
      }
      .cat-whiskers:after {
        left: 100%;
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: rotateY(-70deg) rotateZ(10deg);
        transform: rotateY(-70deg) rotateZ(10deg);
      }
      @-webkit-keyframes bob {
        0% {
          -webkit-transform: translateY(0.4rem);
          transform: translateY(0.4rem);
        }
        6.25% {
          -webkit-transform: translateY(-0.4rem);
          transform: translateY(-0.4rem);
        }
        12.5% {
          -webkit-transform: translateY(0.4rem);
          transform: translateY(0.4rem);
        }
        18.75% {
          -webkit-transform: translateY(-0.4rem);
          transform: translateY(-0.4rem);
        }
        25% {
          -webkit-transform: translateY(0.4rem);
          transform: translateY(0.4rem);
        }
        31.25% {
          -webkit-transform: translateY(-0.4rem);
          transform: translateY(-0.4rem);
        }
        37.5% {
          -webkit-transform: translateY(0.4rem);
          transform: translateY(0.4rem);
        }
        43.75% {
          -webkit-transform: translateY(-0.4rem);
          transform: translateY(-0.4rem);
        }
        50% {
          -webkit-transform: translateY(0.4rem);
          transform: translateY(0.4rem);
        }
        56.25% {
          -webkit-transform: translateY(-0.4rem);
          transform: translateY(-0.4rem);
        }
        62.5% {
          -webkit-transform: translateY(0.4rem);
          transform: translateY(0.4rem);
        }
        68.75% {
          -webkit-transform: translateY(-0.4rem);
          transform: translateY(-0.4rem);
        }
        75% {
          -webkit-transform: translateY(0.4rem);
          transform: translateY(0.4rem);
        }
        81.25% {
          -webkit-transform: translateY(-0.4rem);
          transform: translateY(-0.4rem);
        }
        87.5% {
          -webkit-transform: translateY(0.4rem);
          transform: translateY(0.4rem);
        }
        93.75% {
          -webkit-transform: translateY(-0.4rem);
          transform: translateY(-0.4rem);
        }
        100% {
          -webkit-transform: translateY(0.4rem);
          transform: translateY(0.4rem);
        }
      }
      @keyframes bob {
        0% {
          -webkit-transform: translateY(0.4rem);
          transform: translateY(0.4rem);
        }
        6.25% {
          -webkit-transform: translateY(-0.4rem);
          transform: translateY(-0.4rem);
        }
        12.5% {
          -webkit-transform: translateY(0.4rem);
          transform: translateY(0.4rem);
        }
        18.75% {
          -webkit-transform: translateY(-0.4rem);
          transform: translateY(-0.4rem);
        }
        25% {
          -webkit-transform: translateY(0.4rem);
          transform: translateY(0.4rem);
        }
        31.25% {
          -webkit-transform: translateY(-0.4rem);
          transform: translateY(-0.4rem);
        }
        37.5% {
          -webkit-transform: translateY(0.4rem);
          transform: translateY(0.4rem);
        }
        43.75% {
          -webkit-transform: translateY(-0.4rem);
          transform: translateY(-0.4rem);
        }
        50% {
          -webkit-transform: translateY(0.4rem);
          transform: translateY(0.4rem);
        }
        56.25% {
          -webkit-transform: translateY(-0.4rem);
          transform: translateY(-0.4rem);
        }
        62.5% {
          -webkit-transform: translateY(0.4rem);
          transform: translateY(0.4rem);
        }
        68.75% {
          -webkit-transform: translateY(-0.4rem);
          transform: translateY(-0.4rem);
        }
        75% {
          -webkit-transform: translateY(0.4rem);
          transform: translateY(0.4rem);
        }
        81.25% {
          -webkit-transform: translateY(-0.4rem);
          transform: translateY(-0.4rem);
        }
        87.5% {
          -webkit-transform: translateY(0.4rem);
          transform: translateY(0.4rem);
        }
        93.75% {
          -webkit-transform: translateY(-0.4rem);
          transform: translateY(-0.4rem);
        }
        100% {
          -webkit-transform: translateY(0.4rem);
          transform: translateY(0.4rem);
        }
      }
      @-webkit-keyframes swing {
        0% {
          -webkit-transform: rotate(5deg);
          transform: rotate(5deg);
        }
        12.5% {
          -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
        }
        25% {
          -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
        }
        37.5% {
          -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
        }
        50% {
          -webkit-transform: rotate(23deg);
          transform: rotate(23deg);
        }
        62.5% {
          -webkit-transform: rotate(-23deg);
          transform: rotate(-23deg);
        }
        75% {
          -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
        }
        87.5% {
          -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
        }
        100% {
          -webkit-transform: rotate(5deg);
          transform: rotate(5deg);
        }
      }
      @keyframes swing {
        0% {
          -webkit-transform: rotate(5deg);
          transform: rotate(5deg);
        }
        12.5% {
          -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
        }
        25% {
          -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
        }
        37.5% {
          -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
        }
        50% {
          -webkit-transform: rotate(23deg);
          transform: rotate(23deg);
        }
        62.5% {
          -webkit-transform: rotate(-23deg);
          transform: rotate(-23deg);
        }
        75% {
          -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
        }
        87.5% {
          -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
        }
        100% {
          -webkit-transform: rotate(5deg);
          transform: rotate(5deg);
        }
      }
      @-webkit-keyframes swing-leg {
        0% {
          -webkit-transform: rotate(0.5deg);
          transform: rotate(0.5deg);
        }
        12.5% {
          -webkit-transform: rotate(-1deg);
          transform: rotate(-1deg);
        }
        25% {
          -webkit-transform: rotate(1deg);
          transform: rotate(1deg);
        }
        37.5% {
          -webkit-transform: rotate(-1.5deg);
          transform: rotate(-1.5deg);
        }
        50% {
          -webkit-transform: rotate(2.3deg);
          transform: rotate(2.3deg);
        }
        62.5% {
          -webkit-transform: rotate(-2.3deg);
          transform: rotate(-2.3deg);
        }
        75% {
          -webkit-transform: rotate(1.5deg);
          transform: rotate(1.5deg);
        }
        87.5% {
          -webkit-transform: rotate(-1deg);
          transform: rotate(-1deg);
        }
        100% {
          -webkit-transform: rotate(0.5deg);
          transform: rotate(0.5deg);
        }
      }
      @keyframes swing-leg {
        0% {
          -webkit-transform: rotate(0.5deg);
          transform: rotate(0.5deg);
        }
        12.5% {
          -webkit-transform: rotate(-1deg);
          transform: rotate(-1deg);
        }
        25% {
          -webkit-transform: rotate(1deg);
          transform: rotate(1deg);
        }
        37.5% {
          -webkit-transform: rotate(-1.5deg);
          transform: rotate(-1.5deg);
        }
        50% {
          -webkit-transform: rotate(2.3deg);
          transform: rotate(2.3deg);
        }
        62.5% {
          -webkit-transform: rotate(-2.3deg);
          transform: rotate(-2.3deg);
        }
        75% {
          -webkit-transform: rotate(1.5deg);
          transform: rotate(1.5deg);
        }
        87.5% {
          -webkit-transform: rotate(-1deg);
          transform: rotate(-1deg);
        }
        100% {
          -webkit-transform: rotate(0.5deg);
          transform: rotate(0.5deg);
        }
      }
      @-webkit-keyframes swing-tail {
        0% {
          -webkit-transform: rotate(-2deg);
          transform: rotate(-2deg);
        }
        12.5% {
          -webkit-transform: rotate(4deg);
          transform: rotate(4deg);
        }
        25% {
          -webkit-transform: rotate(-4deg);
          transform: rotate(-4deg);
        }
        37.5% {
          -webkit-transform: rotate(6deg);
          transform: rotate(6deg);
        }
        50% {
          -webkit-transform: rotate(-9.2deg);
          transform: rotate(-9.2deg);
        }
        62.5% {
          -webkit-transform: rotate(9.2deg);
          transform: rotate(9.2deg);
        }
        75% {
          -webkit-transform: rotate(-6deg);
          transform: rotate(-6deg);
        }
        87.5% {
          -webkit-transform: rotate(4deg);
          transform: rotate(4deg);
        }
        100% {
          -webkit-transform: rotate(-2deg);
          transform: rotate(-2deg);
        }
      }
      @keyframes swing-tail {
        0% {
          -webkit-transform: rotate(-2deg);
          transform: rotate(-2deg);
        }
        12.5% {
          -webkit-transform: rotate(4deg);
          transform: rotate(4deg);
        }
        25% {
          -webkit-transform: rotate(-4deg);
          transform: rotate(-4deg);
        }
        37.5% {
          -webkit-transform: rotate(6deg);
          transform: rotate(6deg);
        }
        50% {
          -webkit-transform: rotate(-9.2deg);
          transform: rotate(-9.2deg);
        }
        62.5% {
          -webkit-transform: rotate(9.2deg);
          transform: rotate(9.2deg);
        }
        75% {
          -webkit-transform: rotate(-6deg);
          transform: rotate(-6deg);
        }
        87.5% {
          -webkit-transform: rotate(4deg);
          transform: rotate(4deg);
        }
        100% {
          -webkit-transform: rotate(-2deg);
          transform: rotate(-2deg);
        }
      }
      @-webkit-keyframes reverse-swing {
        0% {
          -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
        }
        12.5% {
          -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
        }
        25% {
          -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
        }
        37.5% {
          -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
        }
        50% {
          -webkit-transform: rotate(-23deg);
          transform: rotate(-23deg);
        }
        62.5% {
          -webkit-transform: rotate(23deg);
          transform: rotate(23deg);
        }
        75% {
          -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
        }
        87.5% {
          -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
        }
        100% {
          -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
        }
      }
      @keyframes reverse-swing {
        0% {
          -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
        }
        12.5% {
          -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
        }
        25% {
          -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
        }
        37.5% {
          -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
        }
        50% {
          -webkit-transform: rotate(-23deg);
          transform: rotate(-23deg);
        }
        62.5% {
          -webkit-transform: rotate(23deg);
          transform: rotate(23deg);
        }
        75% {
          -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
        }
        87.5% {
          -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
        }
        100% {
          -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
        }
      }
      @-webkit-keyframes face {
        0% {
          -webkit-transform: translateX(-2.5px);
          transform: translateX(-2.5px);
        }
        12.5% {
          -webkit-transform: translateX(5px);
          transform: translateX(5px);
        }
        25% {
          -webkit-transform: translateX(-5px);
          transform: translateX(-5px);
        }
        37.5% {
          -webkit-transform: translateX(7.5px);
          transform: translateX(7.5px);
        }
        50% {
          -webkit-transform: translateX(-11.5px);
          transform: translateX(-11.5px);
        }
        62.5% {
          -webkit-transform: translateX(11.5px);
          transform: translateX(11.5px);
        }
        75% {
          -webkit-transform: translateX(-7.5px);
          transform: translateX(-7.5px);
        }
        87.5% {
          -webkit-transform: translateX(5px);
          transform: translateX(5px);
        }
        100% {
          -webkit-transform: translateX(-2.5px);
          transform: translateX(-2.5px);
        }
      }
      @keyframes face {
        0% {
          -webkit-transform: translateX(-2.5px);
          transform: translateX(-2.5px);
        }
        12.5% {
          -webkit-transform: translateX(5px);
          transform: translateX(5px);
        }
        25% {
          -webkit-transform: translateX(-5px);
          transform: translateX(-5px);
        }
        37.5% {
          -webkit-transform: translateX(7.5px);
          transform: translateX(7.5px);
        }
        50% {
          -webkit-transform: translateX(-11.5px);
          transform: translateX(-11.5px);
        }
        62.5% {
          -webkit-transform: translateX(11.5px);
          transform: translateX(11.5px);
        }
        75% {
          -webkit-transform: translateX(-7.5px);
          transform: translateX(-7.5px);
        }
        87.5% {
          -webkit-transform: translateX(5px);
          transform: translateX(5px);
        }
        100% {
          -webkit-transform: translateX(-2.5px);
          transform: translateX(-2.5px);
        }
      }
      @-webkit-keyframes fade-in {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      @keyframes fade-in {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      @-webkit-keyframes blink {
        from,
        to,
        10%,
        25%,
        80% {
          -webkit-transform: scaleY(1);
          transform: scaleY(1);
        }
        8%,
        23%,
        78% {
          -webkit-transform: scaleY(0.1);
          transform: scaleY(0.1);
        }
      }
      @keyframes blink {
        from,
        to,
        10%,
        25%,
        80% {
          -webkit-transform: scaleY(1);
          transform: scaleY(1);
        }
        8%,
        23%,
        78% {
          -webkit-transform: scaleY(0.1);
          transform: scaleY(0.1);
        }
      }
      body,
      html {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        background: #333333 url("cat.png") no-repeat center 100%;
      }
      *,
      *:before,
      *:after {
        box-sizing: border-box;
        position: relative;
        -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
        animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
      }
      *:before,
      *:after {
        content: "";
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="all-wrap">
      <div class="all">
        <div class="yarn"></div>
        <div class="cat-wrap">
          <div class="cat">
            <div class="cat-upper">
              <div class="cat-leg"></div>
              <div class="cat-leg"></div>
              <div class="cat-head">
                <div class="cat-ears">
                  <div class="cat-ear"></div>
                  <div class="cat-ear"></div>
                </div>
                <div class="cat-face">
                  <div class="cat-eyes"></div>
                  <div class="cat-mouth"></div>
                  <div class="cat-whiskers"></div>
                </div>
              </div>
            </div>
            <div class="cat-lower-wrap">
              <div class="cat-lower">
                <div class="cat-leg">
                  <div class="cat-leg">
                    <div class="cat-leg">
                      <div class="cat-leg">
                        <div class="cat-leg">
                          <div class="cat-leg">
                            <div class="cat-leg">
                              <div class="cat-leg">
                                <div class="cat-leg">
                                  <div class="cat-leg">
                                    <div class="cat-leg">
                                      <div class="cat-leg">
                                        <div class="cat-leg">
                                          <div class="cat-leg">
                                            <div class="cat-leg">
                                              <div class="cat-leg">
                                                <div class="cat-paw"></div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="cat-leg">
                  <div class="cat-leg">
                    <div class="cat-leg">
                      <div class="cat-leg">
                        <div class="cat-leg">
                          <div class="cat-leg">
                            <div class="cat-leg">
                              <div class="cat-leg">
                                <div class="cat-leg">
                                  <div class="cat-leg">
                                    <div class="cat-leg">
                                      <div class="cat-leg">
                                        <div class="cat-leg">
                                          <div class="cat-leg">
                                            <div class="cat-leg">
                                              <div class="cat-leg">
                                                <div class="cat-paw"></div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="cat-tail">
                  <div class="cat-tail">
                    <div class="cat-tail">
                      <div class="cat-tail">
                        <div class="cat-tail">
                          <div class="cat-tail">
                            <div class="cat-tail">
                              <div class="cat-tail">
                                <div class="cat-tail">
                                  <div class="cat-tail">
                                    <div class="cat-tail">
                                      <div class="cat-tail">
                                        <div class="cat-tail">
                                          <div class="cat-tail">
                                            <div class="cat-tail">
                                              <div class="cat-tail -end"></div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
提交
评论区空空如也，赶紧添加一条评论吧 评论 {{counts.commentCount}}
{{comment.name}} {{comment.os}} {{comment.browser}}
{{dateFormatter(comment.createTime)}}

{{comment.message}}

{{comment.reply.name}} {{comment.reply.os}} {{comment.reply.browser}}
{{dateFormatter(comment.reply.createTime)}}

{{comment.reply.message}}

 zzzmh
关于我 留言板

网址导航
{{alert.message}}
留言板 * 站长不经常查看信箱 若有重要事宜联系邮箱 admin@zzzmh.cn 取消 发送
云朵 ChungZH 起航天空 yiranzai 前端大爆炸 Web前端之家 前端博客 shirmy 小宁博客 pdbn LOGI 鄢云峰
Copyright © 2024 上海藏原羚工作室 沪ICP备18011999号 沪公网安备31010602005070号
微信公众号