所有分类
  • 所有分类
  • 后端开发
当前位置： 正文
CSS3动画：宠物躺着招手动画特效

CSS3动画：宠物躺着招手动画特效

2023-05-11 技术资讯 推广
今天来分享些CSS3动画的应用：宠物躺着招手动画特效。上次我也分享过类似的动画效果，没看过的可以先看看。 CSS3动画：圆形脉冲动画 先下我们今天要分享的宠物动画预览图： 原理解析 对于宠物动画，第一步我们需要先用CSS3画宠物的形状和涂色。 这个是一个比较复杂...

今天来分享些CSS3动画的应用：宠物躺着招手动画特效。上次我也分享过类似的动画效果，没看过的可以先看看。

CSS3动画：圆形脉冲动画

先下我们今天要分享的宠物动画预览图：

aaa.jpg

原理解析

对于宠物动画，第一步我们需要先用CSS3画宠物的形状和涂色。

这个是一个比较复杂的活，我们需要把宠物分很多小块去实现。比如：

<div class="snorlax">
  <div class="snorlax__head">
    <div class="snorlax__head-outline"></div>
    <div class="snorlax__ear snorlax__ear--left"></div>
    <div class="snorlax__ear snorlax__ear--right"></div>
    <div class="snorlax__brow snorlax__brow--left"></div>
    <div class="snorlax__brow snorlax__brow--right"></div>
    <div class="snorlax__eye snorlax__eye--left"></div>
    <div class="snorlax__eye snorlax__eye--right"></div>
    <div class="snorlax__mouth">
      <div class="snorlax__tooth snorlax__tooth--left"></div>
      <div class="snorlax__tooth snorlax__tooth--right"></div>
    </div>
  </div>
  <div class="snorlax__arm-left">
    <div class="snorlax__arm-wrapper">
      <div class="snorlax__claws--left"></div>
      <div class="snorlax__arm-left-arm"></div>
    </div>
  </div>
  <div class="snorlax__arm-right">
    <div class="snorlax__claws--right"></div>
    <div class="snorlax__arm-right-arm"></div>
    <div class="snorlax__claw"></div>
  </div>
  <div class="snorlax__body">
    <div class="snorlax__body-shade"></div>
    <div class="snorlax__belly">
      <div class="snorlax__belly-segment snorlax__belly-segment--one"></div>
      <div class="snorlax__belly-segment snorlax__belly-segment--two"></div>
    </div>
  </div>
  <div class="snorlax__left-foot">
    <div class="snorlax__left-foot-foot"></div>
    <div class="snorlax__foot-claw snorlax__foot-claw--one">
      <div></div>
    </div>
    <div class="snorlax__foot-claw snorlax__foot-claw--two">
      <div></div>
    </div>
    <div class="snorlax__foot-claw snorlax__foot-claw--three">
      <div></div>
    </div>
  </div>
  <div class="snorlax__right-foot">
    <div class="snorlax__right-foot-foot"></div>
    <div class="snorlax__foot-claw snorlax__foot-claw--four">
      <div></div>
    </div>
    <div class="snorlax__foot-claw snorlax__foot-claw--five">
      <div></div>
    </div>
    <div class="snorlax__foot-claw snorlax__foot-claw--six">
      <div></div>
    </div>
  </div>
</div>

然后针对每一小块进行CSS3编译。

 *,
*: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: flex;
  align-items: center;
  background: #177082;
  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%;
  filter: blur(10px);
  opacity: 0.5;
  background: #111;
  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%;
  transform: translate(-50%, -50%);
}
.snorlax__body-shade {
  background: var(--dark-body);
  height: 30%;
  width: 80%;
  bottom: 0;
  border-radius: 50%;
  left: 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%;
  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%;
  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%);
  transform-origin: bottom center;
  transform: scale(0.65);
}
.snorlax__tooth--left {
  left: 0;
}
.snorlax__tooth--right {
  right: 0;
}
.snorlax__head {
  height: 30%;
  width: 45%;
  left: 50%;
  top: 5%;
  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%;
  transform-origin: top center;
  transform: rotate(-67deg) translate(11%, 23%);
}
.snorlax__ear--left {
  left: 4%;
}
.snorlax__ear--right {
  right: 4%;
  top: -15%;
  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;
  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%);
  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);
  transform-origin: 0 100%;
  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%;
  transform: translate(-50%, -81%) rotate(10deg);
}
.snorlax__belly-segment--two {
  height: 90%;
  width: 100%;
  bottom: 0%;
  right: 0%;
  transform-origin: 100% 100%;
  background: var(--dark-belly);
  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%;
  transform-origin: right bottom;
  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%;
  transform: translate(-50%, 31%) rotate(-20deg);
}
.snorlax__arm-left {
  height: 85%;
  width: 24%;
  left: 12%;
  top: 14%;
  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%);
  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%);
  transform-origin: bottom center;
  background: #fff;
  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%;
  transform-origin: 50% 60%;
  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%;
  transform: translate(56%, -50%) rotate(-15deg);
  border-radius: 50%;
  -webkit-clip-path: inset(0 50% 0 0);
  clip-path: inset(0 50% 0 0);
  -webkit-animation: fade 6s infinite linear;
          animation: fade 6s infinite linear;
}
@-webkit-keyframes fade {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes fade {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.snorlax__arm-wrapper {
  -webkit-animation: wave 6s infinite ease;
          animation: wave 6s infinite ease;
  height: 100%;
  width: 100%;
  transform-origin: 56% 41%;
}
@-webkit-keyframes wave {
  0, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-100deg);
  }
}
@keyframes wave {
  0, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-100deg);
  }
}
.snorlax__arm-right {
  height: 50%;
  width: 17%;
  right: 7%;
  top: 28%;
  transform: rotate(-39deg);
}
.snorlax__claw {
  bottom: 0;
  width: 15%;
  height: 9%;
  background: #000;
  transform: translate(109%, 19%) rotate(45deg);
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.snorlax__claw:after {
  content: '';
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  height: 100%;
  width: 100%;
  background: #fff;
  transform: scale(0.5);
}
.snorlax__arm-right-arm {
  height: 100%;
  width: 100%;
  border-radius: 25% 75% 65% 35%/56% 60% 40% 30%;
  background: var(--dark-body);
  overflow: hidden;
  border: calc(2 * var(--unit)) solid #000;
}
.snorlax__arm-right-arm:after {
  content: '';
  height: 100%;
  width: 130%;
  border-radius: 50%;
  background: var(--body);
  bottom: 8%;
  left: -9%;
}
.snorlax__claws--right {
  bottom: -6%;
  left: 25%;
  height: 22%;
  width: 57%;
  background: #000;
  -webkit-clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0);
  clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0);
}
.snorlax__claws--right:after {
  height: 100%;
  width: 100%;
  content: '';
  background: #fff;
  -webkit-clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0);
  clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0);
  transform-origin: top center;
  transform: scaleY(0.85) scaleX(0.85);
}
.snorlax__left-foot {
  height: 34%;
  width: 29%;
  bottom: 0;
  left: 2.5%;
}
.snorlax__left-foot-foot {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: var(--belly);
  border-radius: 60% 40% 55% 40%/60% 45% 55% 40%;
  border: calc(2 * (var(--unit))) solid #000;
  overflow: hidden;
}
.snorlax__left-foot-foot:after,
.snorlax__left-foot-foot:before {
  content: '';
}
.snorlax__left-foot-foot:after {
  border: calc(2 * var(--unit)) solid #000;
  height: 38%;
  width: 49%;
  border-radius: 50%;
  background: var(--foot);
  left: 38%;
  bottom: 11%;
  transform: rotate(-36deg);
}
.snorlax__left-foot-foot:before {
  background: var(--dark-belly);
  height: 73%;
  width: 100%;
  left: 32%;
  bottom: 0;
  transform-origin: left center;
  border-radius: 61% 20% 20% 37%/73% 50% 50% 50%;
  transform: rotate(10deg);
}
.snorlax__foot-claw {
  top: 50%;
  left: 50%;
  width: 20%;
  height: 30%;
}
.snorlax__foot-claw:after {
  content: '';
  background: var(--claws);
  bottom: 12%;
  height: 35%;
  width: 67%;
  left: 15%;
  border-radius: 50%;
}
.snorlax__foot-claw:before {
  content: '';
  bottom: 2%;
  left: 0;
  width: 100%;
  height: 56%;
  border-radius: 50%;
  background: var(--claws);
  border: calc(3 * var(--unit)) solid #000;
}
.snorlax__foot-claw > div {
  width: 100%;
  height: 66%;
  top: 0;
  left: 0;
  background: #000;
  -webkit-clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%);
  clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%);
}
.snorlax__foot-claw > div:after {
  content: '';
  height: 100%;
  width: 100%;
  background: var(--claws);
  bottom: 0;
  left: 0;
  transform-origin: bottom center;
  transform: scale(0.7);
  -webkit-clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%);
  clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%);
}
.snorlax__foot-claw--one {
  --clip-point: 65;
  left: -5%;
  top: 52%;
  transform: rotate(-90deg);
  width: 15%;
  height: 23%;
}
.snorlax__foot-claw--two {
  --clip-point: 50;
  top: 9%;
  left: 3%;
  height: 26%;
  transform: rotate(-45deg);
}
.snorlax__foot-claw--three {
  --clip-point: 20;
  top: -10%;
  left: 34%;
  width: 21%;
  height: 25%;
}
.snorlax__foot-claw--four {
  --clip-point: 20;
  top: -18%;
  left: 49%;
  width: 21%;
  height: 34%;
  transform: rotate(45deg);
}
.snorlax__foot-claw--five {
  --clip-point: 50;
  top: 0%;
  left: 78%;
  width: 21%;
  height: 31%;
  transform: rotate(40deg);
}
.snorlax__foot-claw--six {
  --clip-point: 50;
  top: 37%;
  left: 95%;
  width: 19%;
  height: 27%;
  transform: rotate(90deg);
}
.snorlax__right-foot {
  bottom: 0;
  right: 6.5%;
  width: 28%;
  height: 35%;
}
.snorlax__right-foot-foot {
  height: 100%;
  width: 100%;
  border: calc(2 * var(--unit)) solid #000;
  background: var(--belly);
  overflow: hidden;
  border-radius: 50% 50% 50% 50%/50% 45% 55% 50%;
}
.snorlax__right-foot-foot:before,
.snorlax__right-foot-foot:after {
  content: '';
  bottom: 0;
}
.snorlax__right-foot-foot:before {
  left: 5%;
  border-radius: 50%;
  height: 62%;
  width: 77%;
  background: var(--dark-belly);
}
.snorlax__right-foot-foot:after {
  left: 10%;
  border-radius: 50%;
  border: calc(2 * var(--unit)) solid #000;
  bottom: 14%;
  height: 42%;
  background: var(--foot);
  width: 55%;
}

最后我们，我们根据要求，对宠物需要做动画的部分设置动画效果。完整的DEMO代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS3动画：宠物躺着招手动画特效  |  WEB前端之家https://www.jiangweishan.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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: flex;
  align-items: center;
  background: #177082;
  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%;
  filter: blur(10px);
  opacity: 0.5;
  background: #111;
  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%;
  transform: translate(-50%, -50%);
}
.snorlax__body-shade {
  background: var(--dark-body);
  height: 30%;
  width: 80%;
  bottom: 0;
  border-radius: 50%;
  left: 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%;
  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%;
  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%);
  transform-origin: bottom center;
  transform: scale(0.65);
}
.snorlax__tooth--left {
  left: 0;
}
.snorlax__tooth--right {
  right: 0;
}
.snorlax__head {
  height: 30%;
  width: 45%;
  left: 50%;
  top: 5%;
  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%;
  transform-origin: top center;
  transform: rotate(-67deg) translate(11%, 23%);
}
.snorlax__ear--left {
  left: 4%;
}
.snorlax__ear--right {
  right: 4%;
  top: -15%;
  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;
  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%);
  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);
  transform-origin: 0 100%;
  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%;
  transform: translate(-50%, -81%) rotate(10deg);
}
.snorlax__belly-segment--two {
  height: 90%;
  width: 100%;
  bottom: 0%;
  right: 0%;
  transform-origin: 100% 100%;
  background: var(--dark-belly);
  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%;
  transform-origin: right bottom;
  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%;
  transform: translate(-50%, 31%) rotate(-20deg);
}
.snorlax__arm-left {
  height: 85%;
  width: 24%;
  left: 12%;
  top: 14%;
  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%);
  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%);
  transform-origin: bottom center;
  background: #fff;
  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%;
  transform-origin: 50% 60%;
  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%;
  transform: translate(56%, -50%) rotate(-15deg);
  border-radius: 50%;
  -webkit-clip-path: inset(0 50% 0 0);
  clip-path: inset(0 50% 0 0);
  -webkit-animation: fade 6s infinite linear;
          animation: fade 6s infinite linear;
}
@-webkit-keyframes fade {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes fade {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.snorlax__arm-wrapper {
  -webkit-animation: wave 6s infinite ease;
          animation: wave 6s infinite ease;
  height: 100%;
  width: 100%;
  transform-origin: 56% 41%;
}
@-webkit-keyframes wave {
  0, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-100deg);
  }
}
@keyframes wave {
  0, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-100deg);
  }
}
.snorlax__arm-right {
  height: 50%;
  width: 17%;
  right: 7%;
  top: 28%;
  transform: rotate(-39deg);
}
.snorlax__claw {
  bottom: 0;
  width: 15%;
  height: 9%;
  background: #000;
  transform: translate(109%, 19%) rotate(45deg);
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.snorlax__claw:after {
  content: '';
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  height: 100%;
  width: 100%;
  background: #fff;
  transform: scale(0.5);
}
.snorlax__arm-right-arm {
  height: 100%;
  width: 100%;
  border-radius: 25% 75% 65% 35%/56% 60% 40% 30%;
  background: var(--dark-body);
  overflow: hidden;
  border: calc(2 * var(--unit)) solid #000;
}
.snorlax__arm-right-arm:after {
  content: '';
  height: 100%;
  width: 130%;
  border-radius: 50%;
  background: var(--body);
  bottom: 8%;
  left: -9%;
}
.snorlax__claws--right {
  bottom: -6%;
  left: 25%;
  height: 22%;
  width: 57%;
  background: #000;
  -webkit-clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0);
  clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0);
}
.snorlax__claws--right:after {
  height: 100%;
  width: 100%;
  content: '';
  background: #fff;
  -webkit-clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0);
  clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0);
  transform-origin: top center;
  transform: scaleY(0.85) scaleX(0.85);
}
.snorlax__left-foot {
  height: 34%;
  width: 29%;
  bottom: 0;
  left: 2.5%;
}
.snorlax__left-foot-foot {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: var(--belly);
  border-radius: 60% 40% 55% 40%/60% 45% 55% 40%;
  border: calc(2 * (var(--unit))) solid #000;
  overflow: hidden;
}
.snorlax__left-foot-foot:after,
.snorlax__left-foot-foot:before {
  content: '';
}
.snorlax__left-foot-foot:after {
  border: calc(2 * var(--unit)) solid #000;
  height: 38%;
  width: 49%;
  border-radius: 50%;
  background: var(--foot);
  left: 38%;
  bottom: 11%;
  transform: rotate(-36deg);
}
.snorlax__left-foot-foot:before {
  background: var(--dark-belly);
  height: 73%;
  width: 100%;
  left: 32%;
  bottom: 0;
  transform-origin: left center;
  border-radius: 61% 20% 20% 37%/73% 50% 50% 50%;
  transform: rotate(10deg);
}
.snorlax__foot-claw {
  top: 50%;
  left: 50%;
  width: 20%;
  height: 30%;
}
.snorlax__foot-claw:after {
  content: '';
  background: var(--claws);
  bottom: 12%;
  height: 35%;
  width: 67%;
  left: 15%;
  border-radius: 50%;
}
.snorlax__foot-claw:before {
  content: '';
  bottom: 2%;
  left: 0;
  width: 100%;
  height: 56%;
  border-radius: 50%;
  background: var(--claws);
  border: calc(3 * var(--unit)) solid #000;
}
.snorlax__foot-claw > div {
  width: 100%;
  height: 66%;
  top: 0;
  left: 0;
  background: #000;
  -webkit-clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%);
  clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%);
}
.snorlax__foot-claw > div:after {
  content: '';
  height: 100%;
  width: 100%;
  background: var(--claws);
  bottom: 0;
  left: 0;
  transform-origin: bottom center;
  transform: scale(0.7);
  -webkit-clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%);
  clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%);
}
.snorlax__foot-claw--one {
  --clip-point: 65;
  left: -5%;
  top: 52%;
  transform: rotate(-90deg);
  width: 15%;
  height: 23%;
}
.snorlax__foot-claw--two {
  --clip-point: 50;
  top: 9%;
  left: 3%;
  height: 26%;
  transform: rotate(-45deg);
}
.snorlax__foot-claw--three {
  --clip-point: 20;
  top: -10%;
  left: 34%;
  width: 21%;
  height: 25%;
}
.snorlax__foot-claw--four {
  --clip-point: 20;
  top: -18%;
  left: 49%;
  width: 21%;
  height: 34%;
  transform: rotate(45deg);
}
.snorlax__foot-claw--five {
  --clip-point: 50;
  top: 0%;
  left: 78%;
  width: 21%;
  height: 31%;
  transform: rotate(40deg);
}
.snorlax__foot-claw--six {
  --clip-point: 50;
  top: 37%;
  left: 95%;
  width: 19%;
  height: 27%;
  transform: rotate(90deg);
}
.snorlax__right-foot {
  bottom: 0;
  right: 6.5%;
  width: 28%;
  height: 35%;
}
.snorlax__right-foot-foot {
  height: 100%;
  width: 100%;
  border: calc(2 * var(--unit)) solid #000;
  background: var(--belly);
  overflow: hidden;
  border-radius: 50% 50% 50% 50%/50% 45% 55% 50%;
}
.snorlax__right-foot-foot:before,
.snorlax__right-foot-foot:after {
  content: '';
  bottom: 0;
}
.snorlax__right-foot-foot:before {
  left: 5%;
  border-radius: 50%;
  height: 62%;
  width: 77%;
  background: var(--dark-belly);
}
.snorlax__right-foot-foot:after {
  left: 10%;
  border-radius: 50%;
  border: calc(2 * var(--unit)) solid #000;
  bottom: 14%;
  height: 42%;
  background: var(--foot);
  width: 55%;
}

</style>
</head>
<body>
  
<div class="snorlax">
  <div class="snorlax__head">
    <div class="snorlax__head-outline"></div>
    <div class="snorlax__ear snorlax__ear--left"></div>
    <div class="snorlax__ear snorlax__ear--right"></div>
    <div class="snorlax__brow snorlax__brow--left"></div>
    <div class="snorlax__brow snorlax__brow--right"></div>
    <div class="snorlax__eye snorlax__eye--left"></div>
    <div class="snorlax__eye snorlax__eye--right"></div>
    <div class="snorlax__mouth">
      <div class="snorlax__tooth snorlax__tooth--left"></div>
      <div class="snorlax__tooth snorlax__tooth--right"></div>
    </div>
  </div>
  <div class="snorlax__arm-left">
    <div class="snorlax__arm-wrapper">
      <div class="snorlax__claws--left"></div>
      <div class="snorlax__arm-left-arm"></div>
    </div>
  </div>
  <div class="snorlax__arm-right">
    <div class="snorlax__claws--right"></div>
    <div class="snorlax__arm-right-arm"></div>
    <div class="snorlax__claw"></div>
  </div>
  <div class="snorlax__body">
    <div class="snorlax__body-shade"></div>
    <div class="snorlax__belly">
      <div class="snorlax__belly-segment snorlax__belly-segment--one"></div>
      <div class="snorlax__belly-segment snorlax__belly-segment--two"></div>
    </div>
  </div>
  <div class="snorlax__left-foot">
    <div class="snorlax__left-foot-foot"></div>
    <div class="snorlax__foot-claw snorlax__foot-claw--one">
      <div></div>
    </div>
    <div class="snorlax__foot-claw snorlax__foot-claw--two">
      <div></div>
    </div>
    <div class="snorlax__foot-claw snorlax__foot-claw--three">
      <div></div>
    </div>
  </div>
  <div class="snorlax__right-foot">
    <div class="snorlax__right-foot-foot"></div>
    <div class="snorlax__foot-claw snorlax__foot-claw--four">
      <div></div>
    </div>
    <div class="snorlax__foot-claw snorlax__foot-claw--five">
      <div></div>
    </div>
    <div class="snorlax__foot-claw snorlax__foot-claw--six">
      <div></div>
    </div>
  </div>
</div>
</body>
</html>

原文链接：https://www.icz.com/technicalinformation/web/html/2023/05/9443.html，转载请注明出处~~~
赏 0

猜你喜欢

深入探讨CSS3 transition使用规范
技术资讯

CSS3 transition，制作CSS3动画的基本要素，我们必须掌握的基本知识，今天主...
2023-06-05
【SVG】谈谈SVG中的雪碧图Sprite
技术资讯

Sprite(雪碧图)在Web运用中已不是新技术，但大部分同学都还停留在位图的Sprite运...
2023-06-05
谈谈关于CSS&CSS3中伪类选择器的应用
技术资讯

提到"伪类选器"，在平时的项目中用的太多了，比如:link，:focus，:hover，:af...
2023-06-05
【SVG】SVG中的结构化、分组和引用元素
技术资讯

SVG有自己结构化文档的方式。通过某些SVG元素，我们可以在文档中定义、分组以及引...
2023-06-05
【SVG】欣赏和学习SVG滤镜的艺术
技术资讯

经过近20年的发展，如今的网页排版，以其高密度的显示以及OpenType功能的支持，离...
2023-06-05
【SVG】教你给SVG 的内容添加CSS样式
技术资讯

SVG图形的一个最常见用例是图标系统，其中最常用的SVG sprite技术就是使用SVG<u...
2023-06-02
首页 发现 VIP 我的
注意：请收藏好网址www.icz.com，防止失联！站内免费资源持续上传中…！赞助我们
显示验证码
没有账号？注册  忘记密码？