首页 > 分享 > CSS3动画：宠物躺着招手动画特效

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

萌宠菠菠乐园
2024-12-27 23:45

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

CSS3动画：圆形脉冲动画

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

原理解析

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

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

然后针对每一小块进行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.jiangweishan.com/article/css3html520210430.html

温馨提示：本文作者系Terry ，经Web前端之家编辑修改或补充，转载请注明出处和本文链接：
https://www.jiangweishan.com/article/css3html520210430.html