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

css布局实现动物打鼾动画效果

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