用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后加上动画名称,里面可以随意设置百分比或者是自己喜欢的其他的样式。

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

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

猜你喜欢

转载自blog.csdn.net/weixin_44541213/article/details/86519171