css布局实现一个摆动的小猫动画效果代码-html代码-BFW代码库

css布局实现一个摆动的小猫动画效果代码

代码语言：html

所属分类：动画

代码描述：css布局实现一个摆动的小猫动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html><head><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;
  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: 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;
  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;
  transform-origin: top center;
}

.cat-upper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  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: 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;
  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;
  transform-origin: top center;
}
.cat-lower:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background-image: radial-gradient(circle at 10px 50px, white, white 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;
  transform-origin: top center;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-image: linear-gradient(to right, white, #D5E8F8, #8B9BD9);
}
.cat-lower > .cat-leg {
  b.........完整代码请登录后点击上方下载按钮下载查看