div+css实现可爱小狗蹦蹦跳跳行走动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现可爱小狗蹦蹦跳跳行走动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @charset "UTF-8";
:root {
  --color-fur: #ffb141;
  --color-fur-dark: #F5832C;
  --color-spot: #F9584C;
  --color-snout: #544258;
  --color-collar: #3EAB6C;
  --duration: .7s;
  --semi-duration: calc(var(--duration) / 2);
  --easing: cubic-bezier(.5, 0, .5, 1);
  --stagger: calc(-1 * var(--semi-duration) / 2);
}

*, *:before, *:after {
  -webkit-animation-timing-function: var(--easing) !important;
          animation-timing-function: var(--easing) !important;
}

[class=🐕] {
  z-index: 1;
  height: 300px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
[class=🐕] * {
  position: absolute;
  will-change: transform;
}
[class=🐕]:before {
  content: "";
  position: absolute;
  bottom: 13.3333333333%;
  left: 0;
  width: 100%;
  height: 3.3333333333%;
  background-color: #D3D1D1;
  border-radius: 2px;
  -webkit-animation: shadow calc(1 * var(--semi-duration)) infinite;
          animation: shadow calc(1 * var(--semi-duration)) infinite;
}
@-webkit-keyframes shadow {
  from, to {
    transform: scaleX(0.75);
  }
  45%, 55% {
    transform: scaleX(0.5);
  }
}
@keyframes shadow {
  from, to {
    transform: scaleX(0.75);
  }
  45%, 55% {
    transform: scaleX(0.5);
  }
}

.neck {
  width: 50%;
  height: 100px;
  right: -5px;
  bottom: calc(100% - 10px);
  transform-origin: center bottom;
  transform: rotate(15deg);
  z-index: 2;
}
.neck > .fur {
  border-bottom-left-radius: 10px;
  height: 100%;
  width: 100%;
}
.neck > .fur:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 100%;
  background-color: var(--color-fur-dark);
  z-index: 1;
  transform-origin: right bottom;
  transform: rotate(15deg);
}

.collar {
  width: calc(100% + 10px);
  height: 15%;
  background-color: var(--color-collar);
  left: -5px;
  bottom: 30px;
  border-radius: 5px;
  -webkit-animation: collar var(--semi-duration) calc(var(--semi-duration) / 4) infinite;
          animation: collar var(--semi-duration) calc(var(--semi-duration) / 4) infinite;
  z-index: 2;
}
@-webkit-keyframes collar {
  from, to {
    transform: none;
  }
  50% {
    transform: translateY(-25%);
  }
}
@keyframes collar {
  from, to {
    transform: none;
  }
  50% {
    transform: translateY(-25%);
  }
}
.collar:after {
  content: "";
  width: 18%;
  height: 120%;
  border-radius: 50%;
  background: var(--color-snout);
  position: absolute;
  right: 0%;
  top: 110%;
  transform-origin: center top;
  -webkit-animation: tag var(--semi-duration) infinite both;
          animation: tag var(--semi-duration) infinite both;
}
@-webkit-keyframes tag {
  from, to {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(-15deg) scaleY(1.5);
  }
}
@keyframes tag {
  from, to {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(-15deg) scaleY(1.5);
  }
}

.head {
  height: 80%;
  width: 145%;
  left: -2%;
  bottom: 50%;
  transform-origin: left center;
  z-index: 2;
  -webkit-animation: head var(--semi-duration) calc(var(--semi-duration) / 4) infinite;
          animation: head var(--semi-duration) calc(var(--semi-duration) / 4) infinite;
}
@-webkit-keyframes head {
  from, to {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(-15deg);
  }
}
@keyframes head {
  from, to {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(-15deg);
  }
}
.head > .fur {
  height: 100%;
  width: 100%;
  border-bottom-right-radius: 80px;
}
.head > .fur:before {
  content: "";
  position: absolute;
  top: -80%;
  left: -30%;
  width: 100%;
  height: 0;
  padding-top: 100%;
  background-color: var(--color-spot);
  z-index: 1;
  border-radius: 50%;
}

.snout {
  --color: var(--color-snout);
  width: 25%;
  height: 0;
  padding-top: 25%;
  background-color: var(--color);
  top: 0;
  right: -5px;
  border-bottom-left-radius: 100%;
  z-index: 1;
}

.ears {
  bottom: 40%;
  height: 100%;
  width: 30%;
  left: 0;
  z-index: -1;
}

.ear {
  --color: var(--color-spot);
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  transform-origin: left bottom;
  transform: rotate(-10deg);
  -webkit-animation: ear-front calc(var(--duration) / 2) infinite;
          animation: ear-front calc(var(--duration) / 2) infinite;
}
@-webkit-keyframes ear-front {
  50% {
    transform: rotate(-15deg);
  }
}
@keyframes ear-front {
  50% {
    transform: rotate(-15deg);
  }
}
.ear:before {
  content: "";
  position: absolute;
  height: 25px;
  width: 15px;
  z-index: 2;
  top: -2px;
  right: -7px;
  border-top-left-radius: 100%;
  border-width: 2px;
  border-color: transparent;
  border-style: solid;
  border-left: 2px solid var(--color-snout);
  transform-origin: bottom left;
  -webkit-animation: ear-mark var(--semi-duration) calc(-1 * var(--semi-duration)) infinite;
          animation: ear-mark var(--semi-duration) calc(-1 * var(--semi-duration)) infinite;
}
@-webkit-keyframes ear-mark {
  from, to {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(25deg);
  }
}
@keyframes ear-mark {
  from, to {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(25deg);
  }
}
.ear > .fur {
  border-top-left-radius: 100%;
  height: 100%;
  width: 100%;
}
.ear:nth-child(2) {
  left: 15px;
  bottom: 5px;
  transform: rotate(-5deg);
  --color: var(--color-fur);
  z-index: -1;
  -webkit-animation: ear-back calc(var(--duration) / 2) infinite both;
          animation: ear-back calc(var(--duration) / 2) infinite both;
}
@-webkit-keyframes ear-back {
  from, to {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-10deg);
  }
}
@keyframes ear-back {
  from, to {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-10deg);
  }
}

.eye {
  --size: 6%;
  --color: var(--color-snout);
  width: var(--size);
  height: 0;
  padding: var(--size);
  left: 35%;
  top: 20%;
  border-radius: 50%;
  background-color: var(--color);
  z-index: 1;
}
.eye:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--color);
  z-index: 1;
}
.eye:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: -50%;
  top: -50%;
  border-top-left-radius: 100%;
  border-width: 2px;
  border-color: var(--color);
  border-style: solid;
  border-bottom-color: var(--color-spot);
  border-right-color: var(--color-spot);
  transform: scale(1.25);
  z-index: 0;
}

.torso {
  width: 56.6666666667%;
  height: 33.3333333333%;
  -webkit-animation: torso var(--semi-duration) both infinite;
          animation: torso var(--semi-duration) both infinite;
}
@-webkit-keyframes torso {
  from, to {
    transform: none;
  }
  50% {
    transform: translateY(15%);
  }
}
@keyframes torso {
  from, to {
    transform: none;
  }
  50% {
    transform: translateY(15%);
  }
}
.torso > .fur {
  height: 100%;
  width: 185px;
  border-top-left-radius: 40px;
  transform-origin: left center;
  transform: rotate(-20deg) translateY(10px);
  z-index: 1;
}
.torso > .fur:after {
  height: 100%;
  width: 100%;
  border-bottom-left-radius: 200px 85px;
  border-bottom-right-radius: 100px;
}
.torso > .legs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.torso .spot {
  width: 120px;
  height: 120px;
  bottom: 40px;.........完整代码请登录后点击上方下载按钮下载查看