css3之元素的缩放、渐变、旋转和平移
首先,我们来看元素的渐变,我先上代码:
效果如下:
这里的transition:all 1s ease;就是渐变的作用,我来解释一下这句代码的各种元素的意义:
transition 是css3中一个新的css样式,作用是渐变,all代表渐变所有的元素,1s代表渐变的时间,ease代表匀速渐变。
这里的all可以用width,height,或者background代替,但前提是一定要在元素中有这个样式,才能对这个样式进行渐变式的改变。
我们看到,在.box 和 .box:hover的地方都加上了这个代码,为什么2边都要加呢?
在.box:hover中加入这行代码的意义是用于当鼠标移动上去时所产生的渐变效果,在.box中加入这行代码的意义是用于当鼠标移开时所产生的渐变效果,如果有一方不加,则会导致不加的那一方在进行样式变化的时候不会产生渐变的效果,如图:
如果我去掉了.box中的transition:all 1s ease:
效果如图:
transition的第3个属性有很多,分别为linear,ease,ease-in,ease-out,ease-in-out,
为了方便比对,我们先定义一些div:
我们先来看一下效果:
在上图的gif中,我们可以很清楚的看到这些不同样式的区别,下面我来详细的解释一下:
linear:匀速运动
ease:从初始状态过渡到终止状态,由快到慢,逐渐变慢
ease-in:从初始到终止速度越来越快,呈一种加速状态
ease-out:从初始到终止速度越来越慢,呈一种减速状态
ease-in-out:先加速再减速
接下来,我们来讲一下transform 动画:
transform里有缩小(scale),旋转(rotate),平移(translate),倾斜(skew)
我们先定义一张图片:
效果如下:
之后,我们结合元素过渡来进行图片的缩放:
transform:scale(0.9) 这句代码的效果就是缩小元素 0.9代表当触发时,图片变成原来的0.9倍。若该值>1,则进行放大,若<0 并且 <1,则缩小。
下面我们来看一下transform的旋转:rotate:
transform:rotate(x)代表旋转,x代表旋转的角度。
rotate可以单独的对旋转进行设置,分别为rotateX,rotateY,rotateZ。rotate跟哪一个轴,就围绕哪一个轴旋转,这个大家可以自己去实现一下,这里就不再做更多解释了。
接下来我们来看一下transform下的平移效果,代码如下:
那么transform:translate(x,y) , x代表的是平移X轴,y代表的是平移y轴,同样,translate也可以结合scale和rotate 进行连写。中间用空格区分开。
最后呢,我们来看一下transform的最后一个样式,倾斜(skew),先上代码:
transform:skew(xdeg) ,其中x代表的是倾斜的角度。
以前所有效果都没有通过gif的图片展示出来,是因为很多gif动图的大小都不符合上传的标准,所以干脆就都不上传了,大家代码写出来了自己运行一下效果即可。