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