当前位置：青柠资源网 > 网页素材 > 网页特效 > CSS3特效猫挂在线球上左右摇摆动画
  • 最近更新：2023年11月2日

CSS3特效猫挂在线球上左右摇摆动画

83。
2023-11-02 青柠哥 已收录 已售次 关注83次
1青币 优惠信息:免费

关注公众号

演示地址 QQ咨询
  • 免费售后咨询
  • 免费安装指导
    •
  • 付费安装主题
  • 付费BUG修复
    •
  • 付费网站迁移
    •
  • 付费全包建站
    •

注册会员根据级别享有相关下载优惠，请仔细辨别。所有资源均收集于互联网仅供学习、参考和研究，请理解这个概念，所以不能保证每个细节都符合你的需求，也可能存在未知的BUG与瑕疵， 你下载的资源和程序源码组件因其特殊性均为可复制品，所以不支持任何理由的退款兑现，请认真阅读本站声明和相关条款后再点击支付下载。
  • 正文概述
  • 售后服务

    • CSS3特效猫挂在线球上左右摇摆动画是一款用CSS3做出的动画摇摆效果

    <head>
    <meta charset=\”utf-8\”>
    <title>css3猫挂在线球上左右摇摆动画特效</title>

    <style>
    .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-color: #1F1F3C;
      overflow: hidden;
    }

    *, *: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;
    }

    CSS3特效猫挂在线球上左右摇摆动画 网页特效 第1张

    青柠资源网专注于CMS网站模板,主流语言整站网站源码下载,网站建设相关教程分享,好用的软件素材整合下载,提供一站式便捷自助服务。
    1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
    2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
    3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
    4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
    5. 如有链接无法下载、失效或广告，请联系管理员处理！
    6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
    7. 如遇到加密压缩包，默认解压密码为"www.qnziyw.cn",如遇到无法解压的请联系管理员！


    青柠资源网 » CSS3特效猫挂在线球上左右摇摆动画

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用？
    本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍
    提示下载完但解压或打开不了？
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。 若排除这种情况，可在对应资源底部留言，或 联络我们。
    找不到素材资源介绍文章里的示例图片？
    对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单
    青柠哥

    青柠哥 普通

    分享到：

    发表回复

    相关推荐

    青柠资源网 www.qnziyw.cn

    国内极具人气的网络源码资源交流学习平台
    下载源码文章，学软件教程，找灵感素材，尽在青柠资源网
    按Ctrl+D收藏本站

    青柠资源网共享中心

    www.qnziyw.cn