写在前面：java作为一门世界级编程语言金字塔顶尖的语言。需要大量的练习、练习、练习来巩固自己所获得的知识。冰冻三尺非一日之寒，希望大家在学习java的日子里一定一定要坚持不懈，严格要求。多练，多问，多百度。祝大家早日成为一名优秀的软件工程师！
首先，我们来看元素的渐变，我先上代码：
效果如下：
这里的transition:all1sease;就是渐变的作用，我来解释一下这句代码的各种元素的意义：
transition是css3中一个新的css样式，作用是渐变，all代表渐变所有的元素，1s代表渐变的时间，ease代表匀速渐变。
这里的all可以用width,height,或者background代替，但前提是一定要在元素中有这个样式，才能对这个样式进行渐变式的改变。
我们看到，在.box和.box:hover的地方都加上了这个代码，为什么2边都要加呢？
在.box:hover中加入这行代码的意义是用于当鼠标移动上去时所产生的渐变效果，在.box中加入这行代码的意义是用于当鼠标移开时所产生的渐变效果，如果有一方不加，则会导致不加的那一方在进行样式变化的时候不会产生渐变的效果，如图：
如果我去掉了.box中的transition:all1sease：
效果如图：
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代表的是倾斜的角度。
互动：原创不容易，很多人看完文章没有点赞留言的习惯，请大家支持我为文章点赞、分享。蕊蕊才有动力写更好的文章分享给大家。要有一万鍖椾含鐧界櫆椋庝笓绉戝尰闄㈡�庝箞璧?鐧界櫆椋庣殑璇婃柇