你知道吗,那些使用CSS transform属性添加进HTML的元素是可以实现动画效果的。我们可以使用transition属性和@keyframe动画来实现这个效果,但是 更炫酷的是,我们可以使用cubic-bezier()这个timing function,给动画添加一些反弹特效,从而让它看上去更好看。
简单来说,CSS中的cubic-bezier(),就是一个用来创建过渡效果的timing function。它可以定义过渡的速度和其他一些指标,它也可以用来创建动画中的反弹特效。
在这篇文章中,我们首先将会创建一个简单的变换动画,然后我们给它添加cubic-bezier()。在读完这篇文章之后,你将会了解如何创建一个同时使用了扇出效果和反弹特效的动画。
1. 制作扇叶
这个扇出效果是由5个扇叶所组成的。我们需要使用CSS的圆角(border-radius )属性来制作这些扇叶。具体请参看下图:
圆角属性有很多种不同的语法。在这里我们将会使用一种比较复杂的语法:
border-radius: htl htr hbr hbl / vtl vtr vbr vbl;
在这个语法中,横向和纵向的半径被放在了一起;h和v分别代表了横向半径和纵向半径,t、l、b和r分别代表的是顶部(top)、左侧(left)、底部(bottom)和右侧(right)。例如,vbl代表的左下角的纵向半径。
如果你给横向或是纵向半径只设定了一个值,那么浏览器会将这个值复制到其他所有的横向或是纵向半径。
为了做出竖直的椭圆形状,你需要在所有角上让横向半径保持50%的比例,然后调节纵向半径,直到你获得了满意的形状。横向半径只会使用一个值:50%。
左上角和右上角上,纵向半径为30%,左下角和右下角上,纵向半径的值为70%。
HTML
CSS
.pinStarLeaf {