html弹跳动画效果,CSS弹跳动画效果的实现方法

这是只用了一个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%;

}