css3中transition和animation都能够实现动画效果，所谓动画本质就是物体的一种状态变换成另外一种状态的过程呈现，我们可以结合2D或者3D变换做出很多酷炫的动画，下面针对这四部分分别做一个用法上的小结。一、Transition过渡1.定义过渡动画：是从一个状态渐渐地过渡到另外一个状态经常:hover等等一起搭配使用，也就是说一般会经过一个动作触发之后，再进行变换。2.用法transition:要过渡的属性花费时间运动曲线何时开始;属性：想要变换的css属性，宽度、高度、背景颜色、内外边距都可以，如果想要所有的属性都变化过渡。花费时间：单位是秒（必须写单位）比如0.5s运动曲线：

css3中transition和animation都能够实现动画效果，所谓动画本质就是物体的一种状态变换成另外一种状态的过程呈现，我们可以结合2D或者3D变换做出很多酷炫的动画，下面针对这四部分分别做一个用法上的小结。一、Transition过渡1.定义过渡动画：是从一个状态渐渐地过渡到另外一个状态经常:hover等等一起搭配使用，也就是说一般会经过一个动作触发之后，再进行变换。2.用法transition:要过渡的属性花费时间运动曲线何时开始;属性：想要变换的css属性，宽度、高度、背景颜色、内外边距都可以，如果想要所有的属性都变化过渡。花费时间：单位是秒（必须写单位）比如0.5s运动曲线：

radial-gradientradial-gradient()是径向渐变，指的是一个中心点向四周扩撒的渐变效果，其中包括波的扩散和光的扩散中都有径向渐变的特征。css中我们使用radial-gradient()函数表示径向渐变，语法比较复杂，所以我们可以从简单的径向渐变开始看：.warpper{width:250px;heigth:125px;background-image:radial-gradient(blue,red);}上面展示的是一个椭圆渐变效果，径向渐变的方向由中心往外部的，默认终止于元素的边框内边缘。其实所有径向渐变语法都是围绕改变径向渐变的半径值、中心点坐标、渐变颜色的起点

radial-gradientradial-gradient()是径向渐变，指的是一个中心点向四周扩撒的渐变效果，其中包括波的扩散和光的扩散中都有径向渐变的特征。css中我们使用radial-gradient()函数表示径向渐变，语法比较复杂，所以我们可以从简单的径向渐变开始看：.warpper{width:250px;heigth:125px;background-image:radial-gradient(blue,red);}上面展示的是一个椭圆渐变效果，径向渐变的方向由中心往外部的，默认终止于元素的边框内边缘。其实所有径向渐变语法都是围绕改变径向渐变的半径值、中心点坐标、渐变颜色的起点

box-shadowbox-shadow表示盒阴影，可以给元素设置阴影效果，如果我们设置向下的阴影效果:.wrapper{position:fixed;left:0;top:0,bottom:0,right:0,background-color:red;box-shadow:03px5pxrgba(0,0,0,.3)}以上box-shadow中的0表示水平偏移，3px表示垂直偏移，5px表示模糊大小，​​rgba(0,0,0,0.3)​​表示投影的颜色。常用的投影效果主要由偏移、模糊、颜色组成。无论是投影效果还是盒阴影，光源都默认在左上角，所以水平偏移如果是整数则表示投影偏右，如果是负数则表示

box-shadowbox-shadow表示盒阴影，可以给元素设置阴影效果，如果我们设置向下的阴影效果:.wrapper{position:fixed;left:0;top:0,bottom:0,right:0,background-color:red;box-shadow:03px5pxrgba(0,0,0,.3)}以上box-shadow中的0表示水平偏移，3px表示垂直偏移，5px表示模糊大小，​​rgba(0,0,0,0.3)​​表示投影的颜色。常用的投影效果主要由偏移、模糊、颜色组成。无论是投影效果还是盒阴影，光源都默认在左上角，所以水平偏移如果是整数则表示投影偏右，如果是负数则表示