内容简介:这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴影的部分也会随着正方形升高而缩小,至于到底该怎么完成呢?让我们继续看下去。由于只使用了一个div,要同时达到正方形旋转与阴影缩放的效果,这里必须使用两个伪元素(before与after)来完成,严格来说,虽然只有一个div,但是却是把这个div当作外框,让伪元素before作为旋转的正方形,让伪元素after作为阴影。
这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴影的部分也会随着正方形升高而缩小,至于到底该怎么完成呢?让我们继续看下去。
利用伪元素
由于只使用了一个div,要同时达到正方形旋转与阴影缩放的效果,这里必须使用两个伪元素(before与after)来完成,严格来说,虽然只有一个div,但是却是把这个div当作外框,让伪元素before作为旋转的正方形,让伪元素after作为阴影。
.box{ position:relative; } .box:before{ content:''; position:absolute; z-index:2; top:60px; left:50px; width:50px; height:50px; background:#c00; border-radius:2px; transform: rotate(45deg); } .box:after{ content:''; position:absolute; z-index:1; top:128px; left:52px; width:44px; height:3px; background:#eaeaea; border-radius:100%; }
CSS动画
画出正方形与阴影之后,再来就是要做动画了,为了避免太过复杂,这里我们先不要旋转,先单纯让正方形上下跳动,然后阴影会放大缩小,下面的示例的动画,又新增了20%与80%的keyframe,目的是为了让接触的时候角落才会变圆,不然就会变成刚开始移动时尖角就变圆,就会很怪异了。
.box:before{ content:''; position:absolute; z-index:2; top:60px; left:50px; width:50px; height:50px; background:#c00; border-radius:2px; transform: rotate(45deg); -webkit-animation:box .8s infinite ; } @-webkit-keyframes box{ 0%{ top:50px; } 20%{ border-radius:2px; /*从20%的地方才开始变形*/ } 50%{ top:80px; border-bottom-right-radius:25px; } 80%{ border-radius:2px; /*到80%的地方恢复原状*/ } 100%{ top:50px; } } .box:after{ content:''; position:absolute; z-index:1; top:128px; left:52px; width:44px; height:3px; background:#eaeaea; border-radius:100%; -webkit-animation:shadow .8s infinite ; } @-webkit-keyframes shadow{ 0%,100%{ left:54px; width:40px; background:#eaeaea; } 50%{ top:126px; left:50px; /*让阴影保持在原位*/ width:50px; height:7px; background:#eee; } }
加入旋转效果
了解原理之后,我们只要再加上旋转的属性,就可以达到弹跳起来的时候有旋转的效果,不过这里又有用到一个小技巧,就是落下的时候是90度转到45度,弹上去的时候从45旋转到0度,然后在这一瞬间从0度变成90度(100%到0%),如此一来我们就会产生错觉,感觉好像一直在旋转了。
@-webkit-keyframes box{ 0%{ top:50px; transform: rotate(90deg); /**/ } 20%{ border-radius:2px; } 50%{ top:80px; transform: rotate(45deg); border-bottom-right-radius:25px; } 80%{ border-radius:2px; } 100%{ top:50px; transform: rotate(0deg); } }
举一反三,我们也可以把角度反转,就会往另外一边弹跳。
如果我们把动画里头添加linear,就会变成线性的连续方式喔。
以上所述就是小编给大家介绍的《有趣的CSS弹跳动画》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 【Android 动画】动画详解之属性动画(三)
- 【Android 动画】动画详解之属性动画(五)
- Flutter 动画全解析(动画四要素、动画组件、隐式动画组件原理等)
- 【Android 动画】动画详解之补间动画(一)
- 系统学习iOS动画之一:视图动画
- 初识属性动画——使用Animator创建动画
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
神一样的产品经理
闫荣 / 电子工业出版社 / 2012-6-1 / 79.00元
这是一本系统阐述移动与互联网产品从无到有、从有到优的产品经理实践案例著作。《神一样的产品经理:基于移动与互联网产品实践》贯穿着“人如产品,产品如人”、“产品的根基和源泉来自现实生活”的写作理念,表达了产品的成功需要神一样的产品经理管理的观点。 《神一样的产品经理:基于移动与互联网产品实践》由浅入深、循序渐进地阐述了产品经理、产品需求、用户体验、项目管理、产品运营和产品团队管理的内容,理论与实......一起来看看 《神一样的产品经理》 这本书的介绍吧!