2020-05-27

css3渐变，过渡与动画

（1）渐变的分类：线性渐变，是指以直线的方向来填充渐变色；径向渐变，是指以圆形的方式，以圆心为中心，沿半径向外渐变；重复渐变，是指将线性渐变或径向渐变重复几次实现渐变填充。
（2）设置元素的background-image属性，取值为一个linear-gradient（）命令，可实现线性渐变。Linear-gradient（）命令完整语法结构为linear-gradient（角度，色标1，色标2，…）。
（3）渐变角度取值有两种情况：使用关键词取值，例如，to top从下向上、to bottom从上向下、to left从右向左、to right从左向右；使用角度取值，单位是deg。（4）background-image：linear-gradient（60deg，red 0%，yellow 40%，pink 80%）；表示顺时针偏转60°，自左下向右上渐变。整个渐变过程经过3个色标，分别是起点（0%）位置的红色色标、40%位置的黄色色标以及80%位置的粉色色标。渐变过程为先从红色线性渐变为黄色，再从黄色渐变为粉色。80%到100%的过程不发生渐变，是纯粉色填充。
（5）修改background-image属性值为radial-gradient（）命令，可实现径向渐变。Radial-gradient（）命令的语法格式为radial-gradient（［半径长at圆心位置］，色标1，色标2，…）。
（6）径向渐变的圆心位置有3种设置方式：x，y方式，直接使用距左上角的距离坐标；x%，y%方式，使用元素宽和高的百分比来定位圆心坐标；使用关键词（x方向上可使用left、center、right，y方向上可使用top、center、bottom）。
（7）修改background-image的值为repeating-linear-gradient（）命令可实现重复线性渐变。修改background-image的值为repeating-radial-gradient（）命令可实现重复径向渐变。
（8）对于不支持渐变属性的浏览器版本，可以通过增加浏览器前缀的方式，让浏览器支持渐变。浏览器前缀是指为特定浏览器设定的属性前缀。特定的浏览器只能解析与之对应的特定前缀的属性。Firefox浏览器，可在属性前加-moz-前缀。Chrome和Safari浏览器，可在属性前加-webkit-前缀。IE浏览器，可在属性前加-ms-。Opera浏览器，可在属性前加-o-。新版Opera浏览器也改为用-webkit-前缀。
（9）转换原点是指在转换过程中，位置不发生改变的点。默认的转换原点为元素的中心点。可使用transform-origin属性修改转换原点的位置。语法格式为transform-origin：x y。其中，x、y可以是数字，也可以是百分比，还可以是表示位置的关键词。三维空间中设置转换原点的位置，需要3个值：transform-origin：x y z。
（10）定义元素的transform属性时执行translate（）函数，可让元素发生位移。translate（x）指定元素在x轴上的位移。若取值为正，元素右移；若取值为负，元素左移。translate（x，y），指定元素同时在x轴和y轴上发生的位移。其中，y指元素在y轴上的位移。若取值为正，元素下移；若取值为负，元素上移。translateX（x）和translateY（y），分别设置元素在x轴和y轴上的位移。
（11）定义元素的transform属性时执行scale（）函数，可让元素发生缩放。scale（value）可让元素横向和纵向同时等比缩放。value指缩放比例，默认值为1，表示不缩放。若value>1，表示放大；若value<1，表示缩小。若value为负数，则表示水平和垂直方向都翻转180°。scale（x，y）可同时设置元素在x和y两个方向上的不同缩放比例。scaleX（x）和scaleY（y）可分别设置元素在x和y两个方向上的缩放比例。
（12）设置元素的transform属性时，执行rotate（）函数就可让元素以转换原点为圆心，旋转一定角度。语法格式为：transform：rotate（ndeg）。若n为正，顺时针旋转；若n为负，逆时针旋转。旋转时默认的转换原点是图形的中心点。
（13）设置元素的transform属性时，执行skewX（xdeg）和skewY（ydeg）函数可让元素倾斜。
（14）视距是模拟人的眼睛到3D转换元素之间的距离。模拟人眼所在位置，距转换元素越远，元素在显示器投影平面上的像越小，三维转换越不明显。反之，模拟人眼所在位置，距转换元素越近，元素在显示器投影平面上的像越大，三维转换越明显。修改要执行3D变换的父元素的perspective属性，可调整视距。
（15）设置元素的transform属性时，执行rotate系列函数，可让元素3D旋转。rotate系列函数包括：rotateX（xdeg）、rotateY（ydeg）、rotateZ（zdeg）、rotate3D（x，y，z，ndeg）。
（16）若希望修改某个CSS属性值时变化平缓，可使用CSS的transition-property属性。其值可以是一个或多个具体属性名。多个属性名之间用空格分隔。如果希望所有CSS属性都平缓变化，可设置transition-property属性值为all。
（17）可使用transition-duration属性设置变化持续的时间。其值为一个带单位的数字，单位可以是秒（s）或毫秒（ms）。
（18）transition-timing-function属性指定过渡的速度变化曲线。其取值可以是：ease，默认值，表示变化从慢速开始，快速变快，最后慢速结束；linear，使用最多，表示匀速变化；ease-in，表示慢速开始，加速结束；ease-out，表示快速开始，慢速结束；ease-in-out，表示慢速开始和结束，中间先加速后减速。（19）过渡属性有一种简写形式，可通过一条语句设置多个过渡属性的特性：transition：属性名持续时间速度变化曲线延迟时间。
（20）CSS中定义复杂动画，其实就是定义一组关键帧的集合，并起一个统一的名字。语法结构如下：@keyframes动画名称{/*定义动画所有的关键帧 */0%{/*动画开始时元素的样式CSS属性 */}…100%{/*动画结束时的样式CSS属性 */}}
（21）定义好的动画，必须调用才执行。调用动画也有简写形式。语法如下为：animation:动画名 持续时间 速度变化曲线 延迟时间 反复执行次数 执行方向;（22）CSS中使用animation-play-state属性，可定义动画播放或暂停。值有两个：paused，暂停；running，播放。