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

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

代码语言：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-.........完整代码请登录后点击上方下载按钮下载查看