用Css3实现简单的变形和动画

我们不使用js或者是jquery，纯css3来制作我们简单的小案例，以下我们使用transform和transition来举例子，可以实行简单的图片变形和动画，可以看下面的截图

 

 

 

 

 

 

 

给你想创建的对象设置了相应的样式之后，如果说你想让它旋转，可以在相应的对象给它写入transform:rotate（deg），旋转的度数可以自己设定；或者skew ，scale,translate,matrix这些属性也是可以写入的。以哪个点为中心旋转可以用top left,top right, bottom left,bottom right,center这些值。根据自己的实际需要去设置动画要持续运行的时间，动画延迟时间，过渡函数，运行次数。如果当transition的值设置为all,那么初始设置的属性都会跟着改变。

 

再如我们使用animation和keyframes来看一下效果

先给对象要运用的动画随便命名，@keyframes后加上动画名称，里面可以随意设置百分比或者是自己喜欢的其他的样式。

再给相应的对象附加上动画运动的时间，速度，次数，名称，或者延迟的时间。

如果觉得代码有点多,使用一句就可以了。