51工具盒子今天来分享些CSS3动画的应用：宠物躺着招手动画特效。上次我也分享过类似的动画效果，没看过的可以先看看。
先下我们今天要分享的宠物动画预览图：
原理解析
对于宠物动画，第一步我们需要先用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>
