Web前端之家-专注Web前端开发，关注用户体验，了解最新前端开发动态

CSS3动画应用：分享一个用纯CSS打造的文本打字特效

2021年10月20日

CSS3动画去控制，实现跟我们敲代码那样的酷炫效果，废话不多说，走起吧。打字机效果的工作方式：打字机动画将通过使用CSS steps()函数逐步将宽度从0更改为100%来显示我们的文本元素。闪烁动画将使“打出”文本的光标动起来。首先我们构建下页面基本框架：<h1>Web前端之家</h1><div class="container"> <div class="typed-out">欢迎来到Web前端之家https://www.jiangweishan.com</div></div>我们先构造一个很简单的HTML。CSS呢，如下操作：body{ background: navajowhite; background-size: cover; font-family: 'Trebuchet MS', sans-serif;}.container{ display: inline-block;}.typed-out{ overflow: hidden; border-right: .30em solid orange; border-radius: 4px; white-space: nowrap; animation: typing 1s steps(20, end) forwards, blinking 1.2s infinite; font-size: 1.6rem; width: 0;}@keyframes typing { from { width: 0 } to { width: 100% }}@keyframes blinking { from { border-color: transparent } to { border-color: green; }}核心的代码是在typing动画属性，通过steps()函数去执行效果。最后打印出来效果如下图所示：我们来看下完整的DEMO效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML&CSS：分享一个用纯CSS打造的文本打字特效 - Web前端之家https://www.jiangweishan.com</title> <style>body{ background: navajowhite; background-size: cover; font-family: 'Trebuchet MS', sans-serif;}.container{ display: inline-block;}.typed-out{ overflow: hidden; border-right: .30em solid orange; border-radius: 4px; white-space: nowrap; animation: typing 1s steps(20, end) forwards, blinking 1.2s infinite; font-size: 1.6rem; width: 0;}@keyframes typing { from { width: 0 } to { width: 100% }}@keyframes blinking { from { border-color: transparent } to { border-color: green; }} </style></head><body> <h1>Web前端之家</h1> <div class="container"> <div class="typed-out">欢迎来到Web前端之家https://www.jiangweishan.com</div> </div></body></html>拓展有的同学预览了上面的效果，发现这里只有一行效果，如果我们有几行或者更多行，应该咋办呢？其实原理都差不多，只要使用CSS3动画的animation-delay属性，去延时动画出现的时间即可。来看下DEMO：HTML：<h1>Web前端之家https://www.jiangweishan.com</h1><div class="box"> <div class="c1"><div class="type">Web前端之家欢迎您！</div></div><br /><br /> <div class="c2"><div class="type2">Web前端之家欢迎您的到来！</div></div><br /><br /> <div class="c3"><div class="type3">请关注Web前端之家！</div></div><br /><br /> <div class="c4"> <div class="type4"><a href="https://www.jiangweishan.com">Web前端之家</a></div> </div></div>看上去我们，实现了多行打字效果，要在第一行打印完，接着开始打印下面的行，这里有个注意点，文字打印到某处的时候，光标也会跟着走的。我们是通过blinking动画去控制的。废话不多说啊，看下CSS的属性如何写：body{ background: #d3ffce; background-size: cover; font-family: Play; } a{ color: mediumseagreen; } .c1{ display: inline-block; } .c2{ display: inline-block; } .c3{ display: inline-block; } .c4{ display: inline-block; } h1{ font-size: 2.8rem; margin-top: 1%; } .box .type{ font-size: 2.5rem; overflow: hidden; border-right: .15em solid orange; white-space: nowrap; width: 0; animation: typing 1.5s steps(30, end) forwards; } .box .type2{ font-size: 2.5rem; overflow: hidden; border-right: .15em solid orange; white-space: nowrap; width: 0; animation: typing 1.5s steps(30, end) forwards; animation-delay: 1.5s; } .box .type3{ font-size: 2.5rem; overflow: hidden; border-right: .15em solid orange; white-space: nowrap; width: 0; animation: typing 2s steps(30, end) forwards; animation-delay: 3s; } .box .type4{ font-size: 2.5rem; overflow: hidden; margin-top: 6%; border-right: .15em solid orange; white-space: nowrap; width: 0; animation: typing 2s steps(30, end) forwards, blink .75s infinite; animation-delay: 5.5s; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink { from { border-color: transparent } to { border-color: orange; } }我们从上面代码发现，动画的定义是没变的，只不过是在对每行进行了时间和延迟处理而已。也就是我们上面提到的delay方法。效果如下：来看下完整的Demo：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML&CSS：分享一个用纯CSS打造的文本打字特效 - Web前端之家https://www.jiangweishan.com</title> <style> body{ background: #d3ffce; background-size: cover; font-family: Play; } a{ color: mediumseagreen; } .c1{ display: inline-block; } .c2{ display: inline-block; } .c3{ display: inline-block; } .c4{ display: inline-block; } h1{ font-size: 2.8rem; margin-top: 1%; } .box .type{ font-size: 2.5rem; overflow: hidden; border-right: .15em solid orange; white-space: nowrap; width: 0; animation: typing 1.5s steps(30, end) forwards; } .box .type2{ font-size: 2.5rem; overflow: hidden; border-right: .15em solid orange; white-space: nowrap; width: 0; animation: typing 1.5s steps(30, end) forwards; animation-delay: 1.5s; } .box .type3{ font-size: 2.5rem; overflow: hidden; border-right: .15em solid orange; white-space: nowrap; width: 0; animation: typing 2s steps(30, end) forwards; animation-delay: 3s; } .box .type4{ font-size: 2.5rem; overflow: hidden; margin-top: 6%; border-right: .15em solid orange; white-space: nowrap; width: 0; animation: typing 2s steps(30, end) forwards, blink .75s infinite; animation-delay: 5.5s; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink { from { border-color: transparent } to { border-color: orange; } } </style></head><body><h1>Web前端之家https://www.jiangweishan.com</h1><div class="box"> <div class="c1"><div class="type">Web前端之家欢迎您！</div></div><br /><br /> <div class="c2"><div class="type2">Web前端之家欢迎您的到来！</div></div><br /><br /> <div class="c3"><div class="type3">请关注Web前端之家！</div></div><br /><br /> <div class="c4"> <div class="type4"><a href="https://www.jiangweishan.com">Web前端之家</a></div> </div></div> </body></html>大家试着预览看下效果。总结本次分享的内容是很基础的，这个打字动画效果，适合用在比较简单的文字，如果文字10行或者更多的话，我们可以去构思下模块化的想法，也可以采用简单的JS去实现，由于时间关系，这里就不多说了，想进一步了解的同学，可以加QQ群讨论。...

CSS3动画：通过Animation实现简单的手指点击动画

2021年07月26日

CSS3动画的知识点了，近期都在忙于后台前端开发项目，难道今天有点时间，分享下关于CSS3动画知识点，今天我们看一个小TIPS：通过Animation实现简单的手指点击动画。鼠标放上去会有个特效。HTML：<div class="wrapper"> <div class="circle"></div> <div class="finger"></div> </div>CSS:.wrapper{position:relative;overflow:hidden;width:500px;height:500px;margin:0 auto;background-color:black} .circle{position:absolute;left:50%;top:50%;margin:-70px 0 0 -46px;　　　　　　background: url("./circle.png") center center no-repeat; width:62px;height:62px;animation:circleHide 1s ease infinite both} .finger{background:url("./finger.png") center center no-repeat;width:100px;height:140px;margin:170px auto;animation:fingerHandle 1s ease infinite both} @keyframes fingerHandle{ 0%{transform:none} 70%{transform:scale3d(.8,.8,.8)} 100%{transform:none} } @keyframes circleHide{ 0%{opacity:0;transform:scale3d(0,0,0)} 70%{opacity:1;transform:scale3d(1.2,1.2,1.2)} 100%{opacity:0;transform:scale3d(0,0,0)} }完整代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <title>CSS3--通过Animation实现简单的手指点击动画</title> <style> .wrapper{position:relative;overflow:hidden;width:500px;height:500px;margin:0 auto;background-color:black} .circle{position:absolute;left:50%;top:50%;margin:-70px 0 0 -46px;　　　　　　background: url("./circle.png") center center no-repeat; width:62px;height:62px;animation:circleHide 1s ease infinite both} .finger{background:url("./finger.png") center center no-repeat;width:100px;height:140px;margin:170px auto;animation:fingerHandle 1s ease infinite both} @keyframes fingerHandle{ 0%{transform:none} 70%{transform:scale3d(.8,.8,.8)} 100%{transform:none} } @keyframes circleHide{ 0%{opacity:0;transform:scale3d(0,0,0)} 70%{opacity:1;transform:scale3d(1.2,1.2,1.2)} 100%{opacity:0;transform:scale3d(0,0,0)} } </style> </head> <body> <div class="wrapper"> <div class="circle"></div> <div class="finger"></div> </div> </body></html>试试吧。大家可以吧circle.png和finger.png图自己放个位置运行即可。...

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

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>...

CSS3动画：圆形脉冲动画

2021年02月08日

CSS3动画：圆形脉冲动画 - Web前端之家https://www.jiangweishan.com</title> <style> body { background: #e1ad01; } .pulse { position: absolute; left: 50%; top: 50%; transform: scale(1.5, 1.5) translate(-50%, -50%); height: 150px; width: 150px; background: #a83f39; border-radius: 50%; } </style></head><body> <div class="pulse"> </div><script> </script></body></html>要创建脉冲动画，我们使用box-shadow属性。如果您从未使用box-shadow过，Mozilla会提供一些出色的文档：@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(168, 63, 57, 0.4); } 70% { box-shadow: 0 0 0 50px rgba(168, 63, 57, 0); } 100% { box-shadow: 0 0 0 150px rgba(168, 63, 57, 0); } }要使用此动画，我们只需将其添加到.pulse：.pulse { .... animation: pulse 2s infinite; }现在，我们创建了脉冲动画。看下完整的DEMO特效。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3动画：圆形脉冲动画 - Web前端之家https://www.jiangweishan.com</title> <style> body { background: #e1ad01; } .pulse { position: absolute; left: 50%; top: 50%; transform: scale(1.5, 1.5) translate(-50%, -50%); height: 150px; width: 150px; background: #a83f39; border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(168, 63, 57, 0.4); } 70% { box-shadow: 0 0 0 50px rgba(168, 63, 57, 0); } 100% { box-shadow: 0 0 0 150px rgba(168, 63, 57, 0); } } </style></head><body> <div class="pulse"> </div><script> </script></body></html>大家试试效果，是不是很酷呢？赶紧应用到你们的项目中去吧！！！！...

CSS3动画：模拟canvas酷炫特效

2020年11月13日

CSS3动画：模拟canvas酷炫特效。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实现发光边框特效 - Web前端之家https://jiangweishan.com/</title> <style> body { margin: 0; width: 100vw; height: 100vh; background: #010326; } .root { --glow_width: 2px; --animation_length: 2s; --delay_factor: 2; position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; transform: translate(-50%, -50%) rotate(45deg); /* Uncomment the line below to see how this system is set up */ /* border: 1px dashed red; */ overflow: hidden; } .side { position: absolute; top: 0; left: 0; } .side.left, .side.right { width: var(--glow_width); height: 0; background: linear-gradient(to bottom, transparent, #c03225, transparent); animation: heightAnim var(--animation_length) linear infinite, hider calc(var(--delay_factor) * var(--animation_length)) var(--animation_length) infinite; } .side.top, .side.bottom { width: 100%; height: var(--glow_width); background: linear-gradient(to left, transparent, #c03225, transparent); animation: widthAnim var(--animation_length) 0s linear infinite, hider calc(var(--delay_factor) * var(--animation_length)) var(--animation_length) infinite; } .side.right { left: auto; right: 0; height: 0; animation-delay: calc(var(--animation_length) / 2); animation-direction: normal, reverse; } .side.bottom { top: auto; bottom: 0; width: 0; animation-delay: calc(var(--animation_length) / 2); animation-direction: normal, reverse; } @keyframes heightAnim { 0% { height: 0px; } 50% { height: 300px; transform: initial; } 100% { transform: translate(0, 300px); } } @keyframes widthAnim { 0% { width: 0px; } 50% { width: 300px; transform: initial; } 100% { transform: translate(300px, 0px); } } @keyframes hider { 0%, 50% { opacity: 0; } 51%, 100% { opacity: 1; } } </style></head><body> <div class="root" style="display: none;"> <div> <div class="side left"></div> <div class="side top"></div> <div class="side right"></div> <div class="side bottom"></div> </div> </div> <script> let template = `<div class="root" style="transform: translate(-50%, -50%) rotate({{ value }})"> <div> <div class="side left"></div> <div class="side top"></div> <div class="side right"></div> <div class="side bottom"></div> </div> </div>` let segments = 9 for(let i = -segments; i < segments; i++){ document.body.innerHTML += template.replace("{{ value }}", 90/segments * i + "deg") } // document.body.innerHTML += template.replace("{{ value }}", 90/segments * 0 + "deg") </script></body></html>...

这些CSS3动画库，您是否都了解和应用过？

2019年12月25日

CSS3动画，现在项目中应用非常广，因为它能拉近跟用户的距离和增强粘合度等，使得我们的产品更加多元化；因此，作为一名Web前端技术人员，需要更多的去学习动画相关的知识。前端网页设计在过去十年中经历了一场革命。在上世纪90年代后期，我们大多数人仍在设计静态杂志版式。如今，我们正在构建具有数以千计的大小调整，协调一致的活动部件的“数字机器”。简而言之，出色的UI设计师也需要成为出色的动画师 -对Web动画技术有扎实的理解。请记住，我们是从精通代码的UI设计器而不是“代码专家”开发人员的角度来看每个库。其中一些库是纯CSS。其他的都是JavaScript，但除了基本的HTML/CSS和/或JavaScript理解之外，没有其他要求才有用。Animate.cssBounce.jsAnimeJSGreenSock(GSAP)MagicAnimationsZDogCSShakeHover.CSSAniJSAnimate.cssAnimate.css是可用的最小，最易用的CSS动画库之一。将Animate库应用到您的项目就像链接CSS并将所需的CSS类添加到HTML元素一样简单。如果愿意，还可以使用jQuery触发特定事件的动画。创作者：DanielEden发行日期：2013当前版本：3.7.2人气：GitHub上的62,284星描述： “跨浏览器的CSS动画库。易用性与易用性一样。”库大小： 56.7kB（最小）GitHub的：https://github.com/daneden/animate.css在撰写本文时，它仍然是最流行和广泛使用的CSS动画库之一，并且其缩小文件足够小，可以包含在移动网站中。Animate.css仍在积极开发中。请注意第4版，它将支持CSS自定义属性（又称CSS变量）。这是最简单，最强大的动画库之一，我们会毫不犹豫地在任何项目中使用它。Bounce.jsBounce.js是一个JavaScript动画库，致力于为您的网站提供一系列独特的，有趣的，华纳兄弟风格的动画。创作者：Tictail发售日：2014当前版本：0.8.2人气：GitHub上的5,975星描述：“立即创建精美的CSS3驱动的动画。”资料库大小：16kBGitHub的：https://github.com/tictail/bounce.jsBounce.js是一个简洁的动画库，其中附带约十个动画预设-因此该库很小。与animate.css一样，动画是平滑无瑕的。如果您的需求集中在“流行和泡泡”风格的动画类型上，并且可以从较低的文件大小开销中受益，则可能要考虑使用此库。AnimeJSAnimeJS是我们列表中的最新成员，但自创建以来已赢得了许多转换。它具有难以置信的通用性和强大功能，并且不会为HTML游戏动画提供支持。唯一真正的问题是“ 它对简单的Web应用程序是否构成过大杀伤力？”也许。但是由于它速度快，体积小且相对容易学习，因此很难发现它的缺点。AnimeJS被描述为具有简单但功能强大的API的“ 轻量级JavaScript动画库 ” 。它与CSS属性，SVG，DOM属性和JavaScript对象一起使用。太棒了该项目可在GitHub上获得。创建者：朱利安·加尼尔（JulianGarnier）发售日期：2016当前版本：3.1.0人气：GitHub上32,605星描述：“JavaScript动画引擎”。程式库大小：16.8kB（最小）GitHub的：https://github.com/juliangarnier/anime最令人印象深刻的是，Anime.JS具有令人惊叹的“文档”，可在漂亮的应用程序环境中演示HTML，JavaScript代码和可用示例。简而言之，如果您对JavaScript动画解决方案感到满意，那么很难找到忽略AnimeJS的理由。GreenSock(GSAP)GreenSock（或GSAP–GreenSock动画平台）是网络动画的瑞士军刀。对于流畅运行的时尚精美动画，GSAP是理想的选择。您可以设置动画，从DOM元素到SVG，其生态系统包括一些令人惊叹的插件，可让您执行各种有趣的工作，例如，对SVG进行变形，绘制SVG描边，滚动功能，加扰文本等等。它是快速的，跨浏览器兼容的，并且其语法简单直观。当前版本：2.1.3GitHub上的流行度：GitHub上的 9,709星Description：“适用于现代网络的超高性能，专业级动画。”库大小：313kB（包含该库轻量级下载文件的最小文件夹）GitHub的：https://github.com/greensock/GreenSock-JS/许可证：标准的免费许可证，与特定功能和插件的付费模型混合在一起。有关更多详细信息，请参见许可页面。GSAP是模块化的，因此您可以选择项目所需的库部分，这对于控制文件大小非常有用。如果您正在寻找功能强大但直观，功能强大的文档和社区支持，我绝对建议您在下一个项目中为这个动画库做个尝试。你会很热情。MagicAnimationsMagicAnimations一直是最令人印象深刻的动画库之一。它具有许多不同的动画，其中许多动画是该库非常独特的。与Animate.css一样，您只需导入CSS文件即可实现Magic。您也可以使用jQuery实现动画。该项目提供了一个特别酷的演示应用程序。当前版本：1.4.1人气：GitHub6,074星描述：“具有特殊效果的CSS3动画”库大小：54.9kB（最小）GitHub的：https://github.com/miniMAC/magic许可证：MIT许可证。与Animate.css相比，MagicAnimation的文件大小适中，并且以其签名动画而著称，例如魔术效果，愚蠢效果和炸弹效果。如果您正在寻找与众不同的东西，那就去吧。您不会失望的。ZdogZdog是一个JavaScript库，用于创建DavidDeSandro制作的3D设计和动画。借助它的帮助，您可以使用<canvas>元素或SVG 绘制设计，并以光滑的3D效果以流畅的动画使它们栩栩如生。当前版本：1.1.0人气：GitHub上的6,940星描述：“适用于画布和SVG的圆形，扁平，设计友好的伪3D引擎”库大小：28kB（最小）GitHub的：https://github.com/metafizzy/zdog许可证：MIT许可证。如果您熟悉JavaScript，您将很快学习Zdog的基础知识：它具有简单易懂的声明性API，出色的文档和大量的学习资源。在SitePoint上查看我对Zdog的介绍。CSShakeCSShake准确地传达了包装盒上所说的内容-一个CSS库，专门用于在您的网页中摇动元素。如您所料，可以使用多种变体来摇动Web组件。当前版本：1.5.0人气：GitHub4,039星库大小：21.9kB（最小版本）GitHub的：https://github.com/elrumordelaluz/csshakeApple普及了UI风格，即当用户输入错误的响应时（例如模仿人摇头）大力摇晃UI元素（对话框，模态框或文本框）。CSShake提供了一系列有趣的“摇动”动画，并且该库中不乏任何变体。Hover.cssHover.css是一个CSS动画库，旨在与您网站中的按钮和其他UI元素一起使用。它具有非常不错的2D过渡，以及许多其他精心制作的动画。当前版本：2.3.2人气：GitHub上21,818星描述：“可以轻松地应用于您自己的元素，进行修改或仅用于启发。”资料库大小：93.0kB（最小）GitHub的：https://github.com/IanLunn/Hover许可证：根据要求，免费的个人/开源许可证和付费的商业许可证。有关详细信息，请阅读GitHub上的许可部分。Hover.css最适合于动画离散页面元素，例如按钮，徽标，SVG组件或特色图像，而不是较大的复杂页面动画。可以说，它最引人注目的动画效果是其独特的气泡和卷曲。AniJS我们的最终库因其独特的方法而很有趣。AniJS是一个动画库，可让您将动画添加到简单的“类似句子”结构的元素中。采用以下格式：如果点击，在广场，待办事项摆动动画要 .container盒<div data-anijs="if: click, do: flipInY, to: .container-box"></div>如果您对JavaScript不太熟悉，那么这可能是步入JS编排动作的好方法。创作者：DarielNoel发售日：2014当前版本：0.9.3人气：GitHub上的3.524星描述：“一个无需编写代码即可提高您的Web设计的库。”资料库大小：10.5kBGitHub的：https://github.com/anijs/anijsAniJS是一个在功能上具有非常合理的大小因数的库。与其他动画库（许多其他动画库可能发现的非常规动画库）相比，它用于实现的格式非常原始且与众不同。但是，该库值得一试，对于您的项目至少要尝试一次。您应该选择哪个库呢？有许多动画库可供您在项目中实施。上面列出的那些是复杂性和稳定性的最佳组合。如果您正在寻找简单易用，功能强大的CSS解决方案，则Animate.css可能是功能最丰富的“ 物有所值 ”选项。如果您正在寻找更完整，功能更强大的JavaScript选项，则很难拆分GreenSock和AnimeJS。尽管在Web应用程序中使用动画库当然可以改善交互性，但是过度使用动画库会破坏目的，并经常使用户感到困惑。请注意并谨慎使用动画。您是否为项目使用动画库？您最喜欢的动画库是什么？...

CSS3动画里的@keyframe的定义和应用

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，就这么多。...

【CSS3动画】生命在于运动

2018年03月20日

用CSS3制作一个跑动的动画，生命在于运动啊。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> @keyframes leftMove { from{ transform: rotate(40deg); } to{ transform: rotate(-50deg); } } @keyframes rightMove { from{ transform: rotate(-50deg); } to{ transform: rotate(40deg); } } @keyframes bodyMove { from{ left:0; } to{ left: 80%; } } body{ overflow: hidden; min-height: 400px; width: 100%; background: linear-gradient(0deg, #999, #fff); background-repeat: no-repeat; } .ab>div { position: absolute; left: 50%; background-color: #111; } .cont { width: 300px; height: 300px; position: absolute; animation: bodyMove 9s infinite; animation-timing-function: linear; } .head{ width: 50px; height: 50px; border-radius: 50%; margin-left: -20px; } .body{ width: 10px; height: 150px; top:50px; } .limb{ transform-origin: 0% 0%; } .hand{ width: 6px; height: 70px; top:80px } .leg{ width: 8px; height: 80px; top:200px; } .left{ transform: rotate(-40deg); } .right{ transform: rotate(40deg); } .leg.left , .hand.left{ animation: leftMove 0.5s infinite ; } .leg.right , .hand.right{ animation: rightMove 0.5s infinite ; } .hand::after{ display: block; content: ' '; width: 6px; height: 50px; position: absolute; top: 95%; background: #111; transform: rotate(-20deg); left: -15%; transform-origin: 0% 0%; } .leg i { display: block; content: ' '; width: 8px; height: 50px; position: absolute; top: 95%; background: #111; transform: rotate(30deg); left: 30%; transform-origin: 0% 0%; } .leg i::before{ display: block; content: ' '; width: 8px; height: 18px; position: absolute; top: 100%; background: #111; transform: rotate(-70deg); transform-origin: 0% 0%; border-bottom-right-radius: 80%; } </style></head><body> <div class="cont ab"> <div class="head"></div> <div class="body "></div> <div class="limb hand left"></div> <div class="limb hand right"></div> <div class="limb leg left"><i></i></div> <div class="limb leg right"><i></i></div> </div></body></html>...

关于H5页面中CSS3动画的性能优化

2017年11月02日

CSS3动画应用很广，尤其是在H5项目中，炫酷的交互效果可以给产品带来更好的体验，更能吸引用户。然而在应用的时候，很多Web前端童鞋可能忽略了一点，就是其性能；不管你是用纯CSS3写的动画，还是结合jQuery，性能很重要。网络上有很多关于“CSS3动画的性能优化”的文章，各抒己见，总而言之，初衷基本一样。今天我主要针对一些比较优秀的文章和自己的一些见解，总结一下H5页面中CSS3动画的性能优化。在CSS3动画制作过程中，提升移动端CSS3动画体验的主要方法大概有几点：1、尽可能多的利用硬件能力，如使用3D变形来开启GPU加速：比如代码：-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0); 一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性；原因：CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recompositePaint通常是其中最花费性能的，尽可能避免使用触发paint的CSS动画属性，这也是为什么我们推荐在CSS动画中使用webkit-transform:translateX(3em)的方案代替使用left:3em，因为left会额外触发layout与paint，而webkit-transform只触发整个页面composite（这也是为什么推荐在CSS动画中使用webkit-transform:translateX(500px)的方案代替使用left:500px）；如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden; -webkit-perspective: 1000;-moz-perspective: 1000;-ms-perspective: 1000;perspective: 1000;2、尽可能少的使用box-shadows与gradientsbox-shadows与gradients往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们.尽可能的让动画元素不在文档流中，以减少重排position: fixed;position: absolute;我们一起来看下CSS3动画其中一些属性性能消耗图：性能消耗图，由此可见最受欢饮和性能最好的莫过于transform和opacity了。以上只是总结了2点关于性能优化，后来参阅了一些其他的文章和自己的研究发现：现代浏览器在使用CSS3动画时，以下四种情形绘制的效率较高（包含了以上2种）。*改变位置*改变大小*旋转*改变透明度我们一起来学习下。层？重绘？回流和重布局？图层重组？首先要了解CSS的图层的概念（Chrome浏览器）浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。在渲染DOM的时候，浏览器所做的工作实际上是：1.获取DOM后分割为多个图层2.对每个图层的节点计算样式结果（Recalculatestyle--样式重计算）3.为每个节点生成图形和位置（Layout--回流和重布局）4.将每个节点绘制填充到图层位图中（PaintSetup和Paint--重绘）5.图层作为纹理上传至GPU6.符合多个图层到页面上生成最终屏幕图像（CompositeLayers--图层重组）Chrome中满足以下任意情况就会创建图层：*3D或透视变换（perspectivetransform）CSS属性*使用加速视频解码的<video>节点*拥有3D（WebGL）上下文或加速的2D上下文的<canvas>节点*混合插件（如Flash）*对自己的opacity做CSS动画或使用一个动画webkit变换的元素*拥有加速CSS过滤器的元素*元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）*元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）需要注意的是，如果图层中某个元素需要重绘，那么整个图层都需要重绘。比如一个图层包含很多节点，其中有个gif图，gif图的每一帧，都会重回整个图层的其他节点，然后生成最终的图层位图。所以这需要通过特殊的方式来强制gif图属于自己一个图层（translateZ(0)或者translate3d(0,0,0)），CSS3的动画也是一样（好在绝大部分情况浏览器自己会为CSS3动画的节点创建图层）层和CSS动画简化一下上述过程，每一帧动画浏览器可能需要做如下工作：1.计算需要被加载到节点上的样式结果（Recalculatestyle--样式重计算）2.为每个节点生成图形和位置（Layout--回流和重布局）3.将每个节点填充到图层中（PaintSetup和Paint--重绘）4.组合图层到页面上（CompositeLayers--图层重组）如果我们需要使得动画的性能提高，需要做的就是减少浏览器在动画运行时所需要做的工作。最好的情况是，改变的属性仅仅印象图层的组合，变换（transform）和透明度（opacity）就属于这种情况现代浏览器如Chrome，Firefox，Safari和Opera都对变换和透明度采用硬件加速，但IE10+不是很确定是否硬件加速触发重布局的属性有些节点，当你改变他时，会需要重新布局（这也意味着需要重新计算其他被影响的节点的位置和大小）。这种情况下，被影响的DOM树越大（可见节点），重绘所需要的时间就会越长，而渲染一帧动画的时间也相应变长。所以需要尽力避免这些属性一些常用的改变时会触发重布局的属性：盒子模型相关属性会触发重布局：*width*height*padding*margin*display*border-width*border*min-height定位属性及浮动也会触发重布局：*top*bottom*left*right*position*float*clear改变节点内部文字结构也会触发重布局：*text-align*overflow-y*font-weight*overflow*font-family*line-height*vertival-align*white-space*font-size这么多常用属性都会触发重布局，可以看到，他们的特点就是可能修改整个节点的大小或位置，所以会触发重布局别使用CSS类名做状态标记如果在网页中使用CSS的类来对节点做状态标记，当这些节点的状态标记类修改时，将会触发节点的重绘和重布局。所以在节点上使用CSS类来做状态比较是代价很昂贵的触发重绘的属性修改时只触发重绘的属性有：*color*border-style*border-radius*visibility*text-decoration*background*background-image*background-position*background-repeat*background-size*outline-color*outline*outline-style*outline-width*box-shadow这样可以看到，这些属性都不会修改节点的大小和位置，自然不会触发重布局，但是节点内部的渲染效果进行了改变，所以只需要重绘就可以了手机就算重绘也很慢在重绘时，这些节点会被加载到GPU中进行重绘，这对移动设备如手机的影响还是很大的。因为CPU不如台式机或笔记本电脑，所以绘画巫妖的时间更长。而且CPU与GPU之间的有较大的带宽限制，所以纹理的上传需要一定时间触发图层重组的属性透明度竟然不会触发重绘？需要注意的是，上面那些触发重绘的属性里面没有opacity（透明度），很奇怪不是吗？实际上透明度的改变后，GPU在绘画时只是简单的降低之前已经画好的纹理的alpha值来达到效果，并不需要整体的重绘。不过这个前提是这个被修改opacity本身必须是一个图层，如果图层下还有其他节点，GPU也会将他们透明化强迫浏览器创建图层在Blink和WebKit的浏览器中，一当一个节点被设定了透明度的相关过渡效果或动画时，浏览器会将其作为一个单独的图层，但很多开发者使用translateZ(0)或者translate3d(0,0,0)去使浏览器创建图层。这种方式可以消除在动画开始之前的图层创建时间，使得动画尽快开始（创建图层和绘制图层还是比较慢的），而且不会随着抗锯齿而导出突变。不过这种方法需要节制，否则会因为创建过多的图层导致崩溃Chrome中的抗锯齿Chrome中，非根图层以及透明图层使用grayscaleantialiasing而不是subpixelantialiasing，如果抗锯齿方法变化，这个效果将会非常显著。如果你打算预处理一个节点而不打算等到动画开始，可以通过这种强迫浏览器创建图层的方式进行。transform变换是你的选择我们通过节点的transform可以修改节点的位置、旋转、大小等。我们平常会使用left和top属性来修改节点的位置，但正如上面所述，left和top会触发重布局，修改时的代价相当大。取而代之的更好方法是使用translate，这个不会触发重布局。JS动画和CSS3动画的比较我们经常面临一个抉择：是使用JavaScript的动画还是使用CSS的动画，下面将对比一下这两种方式。JS动画缺点：JavaScript在浏览器的主线程中运行，而其中还有很多其他需要运行的JavaScript、样式计算、布局、绘制等对其干扰。这也就导致了线程可能出现阻塞，从而造成丢帧的情况。优点：JavaScript的动画与CSS预先定义好的动画不同，可以在其动画过程中对其进行控制：开始、暂停、回放、中止、取消都是可以做到的。而且一些动画效果，比如视差滚动效果，只有JavaScript能够完成。CSS动画缺点：缺乏强大的控制能力。而且很难以有意义的方式结合到一起，使得动画变得复杂且易于出问题。优点：浏览器可以对动画进行优化。它必要时可以创建图层，然后在主线程之外运行。前瞻Google目前正在探究通过JS的多线程（WebWorkers）来提供更好的动画效果，而不会触发重布局及样式重计算。结论动画给予了页面丰富的视觉体验。我们应该尽力避免使用会触发重布局和重绘的属性，以免失帧。最好提前申明动画，这样能让浏览器提前对动画进行优化。由于GPU的参与，现在用来做动画的最好属性是如下几个：*opacity*translate*rotate*scale也许会有一些新的方式使得可以使用JavaScript做出更好的没有限制的动画，而且不用担心主线程的阻塞问题。但在那之前，还是好好考虑下如何做出流畅的动画吧。OK，CSS3动画的性能优化，大概的内容就是这么多，其实这些远远不够，更多的还得我们自己去研究和学习。...

CSS3动画(360度旋转、旋转放大、放大、移动)

2017年03月03日

CSS3动画(360度旋转、旋转放大、放大、移动)，还不错的哟，看看吧：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width:120px; height:120px; line-height:120px; margin: 20px; background-color: #5cb85c; float: left; font-size: 12px; text-align: center; color:orangered; } /*效果一：360°旋转修改rotate(旋转度数)*/ .img1 { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img1:hover { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); } /*效果二：放大修改scale(放大的值)*/ .img2 { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img2:hover { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); } /*效果三：旋转放大修改rotate(旋转度数) scale(放大值)*/ .img3 { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img3:hover { transform: rotate(360deg) scale(1.2); -webkit-transform: rotate(360deg) scale(1.2); -moz-transform: rotate(360deg) scale(1.2); -o-transform: rotate(360deg) scale(1.2); -ms-transform: rotate(360deg) scale(1.2); } /*效果四：上下左右移动修改translate(x轴,y轴)*/ .img4 { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img4:hover { transform: translate(0, -10px); -webkit-transform: translate(0, -10px); -moz-transform: translate(0, -10px); -o-transform: translate(0, -10px); -ms-transform: translate(0, -10px); } </style></head><body><div>效果一：360°旋转 </div><div>效果二：放大</div><div>效果三：旋转放大</div><div>效果四：上下左右移动 </div></body></html>这个网站没DEMO预览功能，只能麻烦大家复制粘贴到页面上看吧...

jQuery Animation实现CSS3动画示例介绍

2017年02月12日

CSS3动画，那么我们只能自已通过setInterval()方法来实现，实现起来比较复杂。其实animate()方法就是基于setInterval()方法进行工作的，但是可以用方便的设置动画速度，还可以设置是匀速还是变速。animate()方法的第二种用法有个step参数规定动画的每一步要执行的函数。我们可以用使用一个不影响元素效果显著的CSS值来触发animate()方法，然后在step回调函数中修改我们想要修改的值，这样就可以间接地实现动画了。请看transform例子:复制代码代码如下:<divid="box"></div>#box{width:100px;height:100px;position:absolute;top:100px;left:100px;text-indent:90px;background-color:red;}$('#box').animate({textIndent:0},{step:function(now,fx){$(this).css('-webkit-transform','rotate('+now+'deg)');},duration:'slow'},'linear');这里使用text-indent属性来触发动画，是因为我们这里没有文字，所以使用text-indent而不会影响到元素的样式效果，这里也可以用font-size等。然后使用animate()方法产生的节奏来实现动画。以此类推，我们就可以实现很多效果了。具体例子请参考这里参考文档•jQuery效果-animate()方法•.animate()...

谈谈CSS3动画转换的基本方法

2016年11月22日

CSS3动画来说，简单回忆下他的一些基本属性，这些我们在平常应用中会经常用到。常用动画属性：transform:translate(x,y);//平移,x代表向又移动距离，y代表向下移动距离；transform:scale(x,y);//缩放，x代表水平缩放倍数，y代表垂直缩放倍数；transform:rotate(x);//旋转，x代表顺时针旋转多少度，如rotate(10deg)；transform:skew(x,y);//倾斜，x\y分别代表沿x轴和y轴的倾斜动画过渡。transition-property列出元素应该过渡的CSS属性，可过度属性包括背景、边框和方框模型属性：transition-duration设置过渡持续时间transition-timing-function设置过渡的速度，可用ease、linear、ease-in、ease-out或ease-in-out之一transition-delay动画延时时间缩写形式：#selector{transition:transform0.2sease}值的顺序必须为以下顺序：transition-property transition-duration transition-function transition-delay实例展示：CSS代码：CSS3转换和过渡图中黄线圈出来的是过渡部分代码，设置了1s内完成相应动画，绿框里面就是转换效果，表示鼠标移至h1标题上时，文字将扩大2.5倍。总而言之，掌握了动画的基础知识，是多么的重要。模仿别人动画后学得吸取别人案例的精华，为己所用。...

【收藏】20款CSS3动画库，你值得“拥有”

2015年12月16日

CSS3动画库，感觉很不错，就收藏了，分享给大家拉。帮助开发者在一定的期限内取得有创造性和创新性的成果。1. Kite Kite是一个灵活的布局助手CSS库。Kite使用`inline-block`而不是最新的CSS语法。它注重实际，易于理解且容易使用。Kite用法与flexbox相似：justify-content,等等。你可以很轻松地创建复杂的模块。Kite是基于OOCSS与MindBEMding，它可以帮助您快速构建自己的组件。Kite支持几乎所有浏览器，它属于MIT许可。2. DynCSS DynCSS将您的CSS解析成-dyn-(attribute)规则。这些规则是模拟浏览器事件(如滚动和缩放)的javascript表达式。其结果会应用到上面指出的CSS属性。你可以将任何CSS属性设置为动态–前提是它对于jQuery的css()方法是可写的。你可以通过附加-dyn-前缀并指定一个引用的javascript表达式来实现。3. ProgressjsProgressJs是一个JavaScript和CSS3库，可以帮助开发者创建和管理页面上所有元素的进度。你可以设计自己的进度条模板并且可以轻松自定义它。你也可以用ProgressJs来为用户显示内容加载（图片，视频等）的进度。它可以用在textbox，textarea甚至整个body上。4. Hover.CSSHover.CSS是一个有用的CSS3悬停效果集合，可用于动作调用，按钮，商标，特性图片等。自定或直接应用到你自己的元素上都非常的简单。hover.css可以用多种方式来使用;可以复制粘贴你喜欢的效果到你自己的样式表里，也可以引用样式表。然后只需向你想要的元素需添加对应效果的class名称即可。如果你只打算使用一个或几个效果，最佳实践是复制粘贴一个效果。5. Spinkit Spinkit是一个酷炫的加载动画CSS集合。Spinkit使用CSS动画来创建吸引人的易于自定义的动画。该集合目标不是提供所有浏览器的解决方案–如果你需要支持哪些还没实现CSS动画属性（像是IE9及之前的版本）的浏览器，你需要检测下这些动画属性并实现一个变通方案。6. MagicCSS3AnimationMagicCSS3Animations是一个特殊效果的CSS3动画库，你可以免费用于你的web项目。简单的引用CSS样式：magic.css或精简版magic.min.css即可。7.Bounce.jsBounce.js是一个用来生成不错的CSS3驱动关键帧动画的工具。用于生成动态动画的JS库是在该工具中投入使用。简单地添加一个组件，选择预设，然后你就会得到一个短URL地址或者导出到CSS。8. ImaCSS Imacss是用来将图像文件转换为数据地址的库和应用。该地址可以用来插入到CSS文件中作为背景图片。本质上来讲，它能让你减少所有你对你设计的图片（如图标等）的HTTP请求，并使之能够单个调用。9.ButtonsButtons是一个可以创建高度自定义、灵活和现代感十足的web按钮的CSS库。该库由Sass+Compass构建，支持正方形、圆角矩形或者圆形的按钮，并且可选是否扁平以及其他自定义的效果（如发光）。所使用到的尺寸、颜色、效果和字体可以通过变量的帮助进行修改，并且可以非常容易的进行扩展。10.OdoMeter OdeMeter是一个用来创建一些我们比较熟悉的如“**里程显示，机场信息板或角子机”等效果或者面板的JavaScript-CSS库。该库是独立式+轻量级（3kb）的，使用CSS为效果进行转换，所以效率极高（当然也有回退设置）。它简单地将一个给定的元素转换到另一个具有单行函数的预定义的值。11. SingleElementCSSSpinnerSingleElementCSSSpinners是一个CSS螺旋动画加载的集合。每个旋转包含一个使用‘loader’class的div，其文本内容为‘Loading…’。文本是为屏幕阅读器使用的且可用作老浏览器的后退的状态。12. Ani.jsAniJS是一个CSS动画的声明处理库，它能够使开发更便利且能提高开发速度。它文档完善且易于上手。13. BeautonsBeautons是一个用来创建漂亮、简洁按钮的易用库。你可以应用各种样式、函数已经其他的更多内容到按键上，包括改变它们的大小，设置它们的可用与否以及更多设置。14. SaffronSaffron是一系列Sass混合器和助手集，能够使添加CSS3的动画和过渡非常简单。只需要包括一个mixin在SASS声明中，然后使用变量和混合参数设置一些配置。使用Saffron，你能够完全控制动画和过渡的行为。15. CSSShakes这是一个能够震动和晃动‘DOM’的CSS类集合。16. Typebase.cssTypebase.css是个最小化的、可定制的字体样式表。它有less和SASS版本，所以能够很容易地修改融入现代的Web项目。它提供了所有排版所必要的基础工具且不需添加其他任何设计内容。它被创建用来完成项目发展和成长期时的修改，能和normalize.css很好的工作。17. Sassline在web上使用Sass&rems设置文本到基线网格。Sassline可以用在博客、prototyping以及其他Web项目。它有建议的基础字体样式和混合比例已达到基线网格的良好配合。为每个断点选择一个modular-scale，其运行响应将会更好。18. TypeSettings一个Sass工具包，基于modularscale有Ems风格，纵向风格，响应比基于headlines。19. TypeRenderingMixTypeRenderingMix是个小型的JavaScript库，它允许只有使用核心文本时（在iOS和OSX上）才应用样式，在实现更一致的渲染同时保持高精度原态。20. Hint.cssHint.css是一个使用SASS构建只使用CSS和HTML的提示库。该库使用数据属性、内容属性、伪元素以及CSS3转换。提示框简洁漂亮，有箭头且可放置在父元素的任何一边。...

CSS3动画基本的转换和过渡

2014年06月24日

CSS3动画来说，简单回忆下他的一些基本属性，这些我们在平常应用中会经常用到。常用动画属性：transform:translate(x,y);//平移,x代表向又移动距离，y代表向下移动距离；transform:scale(x,y);//缩放，x代表水平缩放倍数，y代表垂直缩放倍数；transform:rotate(x);//旋转，x代表顺时针旋转多少度，如rotate(10deg)；transform:skew(x,y);//倾斜，x\y分别代表沿x轴和y轴的倾斜动画过渡。transition-property列出元素应该过渡的CSS属性，可过度属性包括背景、边框和方框模型属性：transition-duration设置过渡持续时间transition-timing-function设置过渡的速度，可用ease、linear、ease-in、ease-out或ease-in-out之一transition-delay动画延时时间缩写形式：#selector{transition:transform0.2sease}值的顺序必须为以下顺序：transition-property transition-duration transition-function transition-delay实例展示：CSS代码：CSS3转换和过渡图中黄线圈出来的是过渡部分代码，设置了1s内完成相应动画，绿框里面就是转换效果，表示鼠标移至h1标题上时，文字将扩大2.5倍。总而言之，掌握了动画的基础知识，是多么的重要。模仿别人动画后学得吸取别人案例的精华，为己所用。...

本站推荐

前端必备工具

2021年10月20日

作者:Web前端之家 | 分类:Html5 | 浏览:1397 | 评论:0

2021年07月26日

作者:Web前端之家 | 分类:Html5 | 浏览:2157 | 评论:0

2021年04月30日

作者:Web前端之家 | 分类:Html5 | 浏览:2452 | 评论:0

2021年02月08日

作者:Web前端之家 | 分类:Html5 | 浏览:2911 | 评论:0

2020年11月13日

作者:Web前端之家 | 分类:HTML/CSS | 浏览:4980 | 评论:0

2019年12月25日

作者:Web前端之家 | 分类:开发工具 | 浏览:6884 | 评论:0

2019年09月25日

作者:andy001 | 分类:HTML/CSS | 浏览:9873 | 评论:0

2018年03月20日

作者:shiji | 分类:HTML/CSS | 浏览:9326 | 评论:0

2017年11月02日

作者:Web前端之家 | 分类:性能优化 | 浏览:31265 | 评论:0

2017年03月03日

作者:商内在 | 分类:移动开发 | 浏览:19651 | 评论:0

2017年02月12日

作者:Web前端之家 | 分类:综合 | 浏览:8792 | 评论:0

2016年11月22日

作者:Web前端之家 | 分类:Html5 | 浏览:10447 | 评论:1

2015年12月16日

作者:Web前端之家 | 分类:Html5 | 浏览:58264 | 评论:0

2014年06月24日

作者:Web前端之家 | 分类:Html5 | 浏览:16216 | 评论:0

每日一学每天一小步 成功一大步！

热门排行

最新留言

热门关键词

关于Web前端之家(个人博客)

相关链接

网站联系方式

每日一学每天一小步成功一大步！