2021年04月30日
CSS3动画的应用:宠物躺着招手动画特效。上次我也分享过类似的动画效果,没看过的可以先看看。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>...
2019年09月25日
@keyframes规则用于指定动画规则,定义一个CSS动画的一个周期的行为;可通过沿动画序列建立关键帧来指定动画序列循环期间的中间步骤。动画是使用可变的CSS样式创建的;在动画期间,CSS属性可以多次更改。定义动画,必须从@keyframes规则开始。@keyframe规则由关键字“@keyframes”组成,后跟一个标识符,给出动画的名称(将使用animation-name引用),然后是一组样式规则(用大括号分隔)。然后,通过使用标识符作为“animation-name”属性的值,将动画应用于元素。语法:@keyframes animation-name {keyframes-selector {css-styles;}}animation-name:这是必需的,它定义动画名称。keyframes-selector:定义动画的百分比,它介于0%到100%之间。一个动画可以包含许多选择器。/* 定义动画n */@keyframes your-animation-name { /* style rules */}/* 将其应用于元素 */.element { animation-name: your-animation-name; /* 或者使用动画速记属性 */ animation: your-animation-name 1s ...}在大括号内,定义关键帧或路径点,这些关键帧或路径点在动画期间的某些点上指定要设置动画的属性的值。这允许您在动画序列中控制中间步骤。例如,一个简单的动画@keyframe可能如下所示:@keyframes change-bg-color { 0% { background-color: red; } 100% { background-color: blue; }}0%”和“100%”是关键帧选择器,每个都定义了关键帧规则。关键帧规则的关键帧声明块由属性和值组成。还可以使用选择器关键字from和to,而不是分别使用0%和100%,因为它们是等价的。@keyframes change-bg-color { from { background-color: red; } to { background-color: blue; }}关键帧选择器由一个或多个逗号分隔的百分比值或from和to关键字组成。注意,百分比单位说明符必须用于百分比值。因此,'0'是一个无效的关键帧选择器。注意:为了获得浏览器的最佳支持,请始终指定0%和100%选择器。示例1:<!DOCTYPE html><html><head><meta charset="UTF-8"><style>@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);html,body {height: 100%;}body {background-color: #F5F5F5;color: #555;font-size: 1.1em;font-family: 'Gentium Basic', serif;}.container {margin: 20px auto;min-width: 320px;max-width: 500px;height: 100%;overflow: hidden;}.text {font-size: 3em;font-weight: bold;color: #0099cc;-webkit-transform-origin: left center;-ms-transform-origin: left center;transform-origin: left center;-webkit-animation: fall 4s infinite;animation: fall 4s infinite;}@-webkit-keyframes fall {from {-webkit-transform: rotate(0) translateX(0);transform: rotate(0) translateX(0);opacity: 1;}to {-webkit-transform: rotate(90deg) translateX(200px);transform: rotate(90deg) translateX(200px);opacity: 0;}}@keyframes fall {from {-webkit-transform: rotate(0) translateX(0);transform: rotate(0) translateX(0);opacity: 1;}to {-webkit-transform: rotate(90deg) translateX(200px);transform: rotate(90deg) translateX(200px);opacity: 0;}}</style></head><body style="text-align: center"><div class="container"><p class="text">Falling Text</p></div></body></html>示例2:<!DOCTYPE html><html><head><meta charset="UTF-8"><style>@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);body {background-color: #F5F5F5;color: #555;font-size: 1.1em;font-family: 'Gentium Basic', serif;}.container {margin: 50px auto;min-width: 320px;max-width: 500px;}.text {font-size: 3em;font-weight: bold;color: #0099cc;-webkit-transform-origin: left center;-ms-transform-origin: left center;transform-origin: left center;-webkit-animation: fall 4s infinite;animation: fall 4s infinite;}@-webkit-keyframes fall {from,15% {-webkit-transform: rotate(0) translateX(0);transform: rotate(0) translateX(0);opacity: 1;-webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);}50%,60% {-webkit-transform: rotate(90deg) translateX(0);transform: rotate(90deg) translateX(0);opacity: 1;-webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);animation-timing-function: cubic-bezier(.13, .84, .82, 1);}85%,to {-webkit-transform: rotate(90deg) translateX(200px);transform: rotate(90deg) translateX(200px);opacity: 0;}}@keyframes fall {from,15% {-webkit-transform: rotate(0) translateX(0);transform: rotate(0) translateX(0);opacity: 1;-webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);}50%,60% {-webkit-transform: rotate(90deg) translateX(0);transform: rotate(90deg) translateX(0);opacity: 1;-webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);animation-timing-function: cubic-bezier(.13, .84, .82, 1);}85%,to {-webkit-transform: rotate(90deg) translateX(200px);transform: rotate(90deg) translateX(200px);opacity: 0;}}</style></head><body style="text-align: center"><div class="container"><p class="text">Falling Text</p></div></body></html>OK,就这么多。...