CSS3制作3D跳动的小球
今天在网上看到一个国外写的CSS3 3D Bouncing Ball(3D反弹球),很有意思,并且实现起来也不难,于是忍不住自己也试写一遍。
大家可以先看看DEMO,http://www.im050.com/im050/memory/demo/css3-bouncing-ball.html
好玩的东西当然要大家一起分享,所以接下来我就简单讲解一下如何实现跳动的效果
<div class="wrap">
<div class="ball">
<div></div>
</div>
<div class="ballshadow"></div>
</div>
首先讲解一下结构,wrap是用来控制小球跳动的区域,ball就是小球啦,ballshadow是用来制作小球的投影,因为小球的运动和投影部分的运动(动画)效果是分开的,所以小球和投影部分要两个div来组成,而wrap设置的高度即为小球运动的高度,此时我们就可以通过top属性来很好的控制小球的位置变化。
小球运动区域CSS
.wrap {
…
最新评论