css布局实现动物打鼾动画效果-html代码-BFW代码库

代码语言：html
代码描述：css布局实现动物打鼾动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*,
*:after,
*:before {
  box-sizing: border-box;
}
:root {
  --size: 60;
  --unit: calc((var(--size) / 300) * 1vmin);
  --belly: #f1debb;
  --dark-belly: #b59c78;
  --body: #355a50;
  --dark-body: #162c37;
  --foot: #965b3c;
  --claws: #fafafa;
}
body {
  min-height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  background: #177082;
  -webkit-box-pack: center;
          justify-content: center;
}
.snorlax {
  height: calc(237 * var(--unit));
  width: calc(300 * var(--unit));
  position: relative;
}
.snorlax *,
.snorlax *:after,
.snorlax *:before {
  position: absolute;
}
.snorlax:before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20%;
  border-radius: 50%;
  -webkit-filter: blur(10px);
          filter: blur(10px);
  opacity: 0.5;
  background: #111;
  -webkit-transform: translate(-50%, 25%);
          transform: translate(-50%, 25%);
  left: 50%;
}
.snorlax__body {
  border-radius: 50% 45% 50% 50%/68% 50% 28% 30%;
  height: 74%;
  width: 79%;
  border: calc(2 * var(--unit)) solid #000;
  background: var(--body);
  overflow: hidden;
  top: 60%;
  left: 47%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.snorlax__body-shade {
  background: var(--dark-body);
  height: 30%;
  width: 80%;
  bottom: 0;
  border-radius: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}
.snorlax__body-shade:after {
  content: '';
  position: absolute;
  width: 25%;
  height: 150%;
  border-radius: 50%;
  background: var(--dark-body);
  left: 9%;
  bottom: 24%;
  -webkit-transform: rotate(-22deg);
          transform: rotate(-22deg);
}
.snorlax__brow {
  background: var(--belly);
}
.snorlax__brow--left {
  width: 50%;
  height: 100%;
  left: 5%;
  top: 11%;
  border-radius: 65% 47% 0 50%/70% 39% 0 44%;
}
.snorlax__brow--right {
  width: 54%;
  height: 100%;
  right: 4%;
  top: 10%;
  overflow: hidden;
  border-radius: 45% 80% 0 50%/72% 77% 0 44%;
}
.snorlax__brow--right:before {
  content: '';
  right: 0;
  height: 100%;
  width: 32%;
  bottom: 0;
  background: var(--dark-belly);
  z-index: 2;
}
.snorlax__brow--right:after {
  content: '';
  right: 16%;
  height: 100%;
  width: 32%;
  bottom: 36%;
  background: var(--belly);
  z-index: 3;
  border-radius: 0 0 75% 0/0 0 36% 0;
}
.snorlax__eye {
  height: calc(2 * var(--unit));
  width: 15%;
  background: #000;
  top: 33%;
  z-index: 5;
}
.snorlax__eye--left {
  left: 21%;
}
.snorlax__eye--right {
  right: 25%;
}
.snorlax__mouth {
  height: calc(2 * var(--unit));
  width: 30%;
  background: #000;
  top: 52%;
  left: 48%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.snorlax__tooth {
  background: #000;
  height: 235%;
  width: 20%;
  bottom: 100%;
  -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.snorlax__tooth:after {
  content: '';
  background: var(--claws);
  height: 100%;
  width: 100%;
  -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-transform: scale(0.65);
          transform: scale(0.65);
}
.snorlax__tooth--left {
  left: 0;
}
.snorlax__tooth--right {
  right: 0;
}
.snorlax__head {
  height: 30%;
  width: 45%;
  left: 50%;
  top: 5%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.snorlax__head-outline {
  background: var(--body);
  height: 100%;
  width: 100%;
  border: calc(2 * var(--unit)) solid #000;
  border-radius: 75% 75% 25% 25%/110% 110% 0% 0%;
  overflow: hidden;
}
.snorlax__head-outline:after {
  content: '';
  right: -5%;
  height: 110%;
  width: 15%;
  border-radius: 50%/50%;
  top: -5%;
  background: var(--dark-body);
}
.snorlax__ear {
  height: 64%;
  border: calc(2 * var(--unit)) solid #000;
  background: var(--body);
  top: -14%;
  width: 35%;
  position: absolute;
  overflow: hidden;
  border-radius: 15% 85% 0 10%/20% 100% 0 80%;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 18%, 0 90%);
  clip-path: polygon(0 0, 100% 0, 100% 18%, 0 90%);
}
.snorlax__ear:before {
  content: '';
  top: 0;
  left: 0;
  background: var(--body);
  position: absolute;
  z-index: 2;
  height: 100%;
  width: 15%;
  border-radius: 28%;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform: rotate(-67deg) translate(11%, 23%);
          transform: rotate(-67deg) translate(11%, 23%);
}
.snorlax__ear--left {
  left: 4%;
}
.snorlax__ear--right {
  right: 4%;
  top: -15%;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.snorlax__ear--right:after {
  content: '';
  left: -10%;
  width: 25%;
  background: var(--dark-body);
  height: 100%;
  top: -10%;
  border-radius: 50%/50%;
}
.snorlax__belly {
  position: absolute;
  height: 50%;
  width: 82%;
  left: 50%;
  top: 0;
  -webkit-transform: translate(-49%, 0%);
          transform: translate(-49%, 0%);
}
.snorlax__belly:after {
  content: '';
  position: absolute;
  width: 58%;
  height: 50%;
  border-top: calc(10 * var(--unit)) solid var(--belly);
  top: 90%;
  left: 50%;
  -webkit-clip-path: polygon(5% 0, 79% 0, 90% 100%, 5% 100%);
          clip-path: polygon(5% 0, 79% 0, 90% 100%, 5% 100%);
  -webkit-transform: translate(-50%, -26%);
          transform: translate(-50%, -26%);
  z-index: 3;
  border-radius: 50% 50% 0 0/50% 50% 50% 50%;
}
.snorlax__belly-segment--one {
  height: 83%;
  width: 100%;
  bottom: 0%;
  left: 0%;
  background: var(--belly);
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: translate(6.5%, 13%) rotate(-20deg);
          transform: translate(6.5%, 13%) rotate(-20deg);
  border-radius: 40% 55% 0 17%/60% 100% 0% 40%;
  -webkit-clip-path: polygon(0 0, 75% 0, 75% 100%, 0 100%);
  clip-path: polygon(0 0, 75% 0, 75% 100%, 0 100%);
  z-index: 2;
}
.snorlax__belly-segment--one:before {
  content: '';
  position: absolute;
  top: 100%;
  background: var(--belly);
  left: 50%;
  height: 80%;
  width: 80%;
  border-radius: 10%;
  -webkit-transform: translate(-50%, -81%) rotate(10deg);
          transform: translate(-50%, -81%) rotate(10deg);
}
.snorlax__belly-segment--two {
  height: 90%;
  width: 100%;
  bottom: 0%;
  right: 0%;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  background: var(--dark-belly);
  -webkit-transform: translate(-7%, 14%) rotate(20deg);
          transform: translate(-7%, 14%) rotate(20deg);
  border-radius: 0% 34% 34% 0/0% 60% 40% 0%;
  -webkit-clip-path: polygon(30% 0, 100% 0, 100% 150%, 30% 150%);
  clip-path: polygon(30% 0, 100% 0, 100% 150%, 30% 150%);
}
.snorlax__belly-segment--two:after {
  content: '';
  position: absolute;
  right: 10%;
  top: -4%;
  width: 100%;
  height: 102%;
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: rotate(-2deg);
          transform: rotate(-2deg);
  background: var(--belly);
  z-index: 3;
  border-radius: 0 14% 19% 0/0 50% 50% 0;
}
.snorlax__belly-segment--two:before {
  content: '';
  background: var(--belly);
  position: absolute;
  z-index: 2;
  height: 50%;
  width: 50%;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 31%) rotate(-20deg);
          transform: translate(-50%, 31%) rotate(-20deg);
}
.snorlax__arm-left {
  height: 85%;
  width: 24%;
  left: 12%;
  top: 14%;
  -webkit-transform: rotate(-21deg);
          transform: rotate(-21deg);
}
.snorlax__claws--left {
  background: #000;
  top: -4%;
  width: 60%;
  height: 10%;
  left: 48%;
  -webkit-clip-path: polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%);
  clip-path: polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%);
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.snorlax__claws--left:after {
  content: '';
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%);
  clip-path: polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  background: #fff;
  -webkit-transform: scaleY(0.8) scaleX(0.95);
          transform: scaleY(0.8) scaleX(0.95);
}
.snorlax__arm-left-arm {
  background: var(--body);
  height: 68%;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: 44% 54% 50% 50%/50% 60% 40% 50%;
  -webkit-transform-origin: 50% 60%;
          transform-origin: 50% 60%;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  overflow: hidden;
  border: calc(2 * var(--unit)) solid #000;
}
.snorlax__arm-left-arm:after {
  content: '';
  right: 0;
  width: 50%;
  background: var(--dark-body);
  height: 120%;
  top: 50%;
  -webkit-transform: translate(56%, -50%) rotate(-15deg);
          transform: tra.........完整代码请登录后点击上方下载按钮下载查看