CSS3-2<渐变/2D、3D转换/动画>-优快云博客

本文详细介绍了CSS3中的线性渐变、径向渐变、2D转换、3D转换等特性，并深入探讨了过渡transition及动画animation的使用方法，包括关键帧的设置、动画属性的具体含义及应用场景。

CSS3线性渐变(background:linear-gradient(方向, 开始颜色, 结束颜色...))

沿着一根轴线改变颜色,从起点到终点进行顺序渐变(从一边到另一边),默认是从上到下.

各个浏览器里的写法

background:-webkit-linear-gradient(开始的方向begin-direction,开始颜色,结束颜色)
background:-moz-linear-gradient(结束的方向end-direction,开始的颜色,结束的颜色)
background:-o-linear-gradient(同shang)
background:linear-gradient(to end 需要到的地方,开始颜色,结束颜色)

background: -webkit-linear-gradient(right,red,green,blue);
background: -moz-linear-gradient(left,red,green,blue);
background: -o-linear-gradient(left,red,green,blue);
background:linear-gradient(to left, red, blue,green);
复制代码

线性渐变还可以使用角度,角度就是指水平线和渐变线之间的角度,逆时针计算,可以在颜色后面加上百分比,来控制分布.
重复渐变,加一个epeating-linear-gradient.

CSS3径向渐变

还是看张鑫旭大神的吧...

##CSS2D转换.

rotate 旋转,正值就是顺时针,负数就是逆时针,单位xxxdeg.前缀加在transform上
translate 平移,traslateX/y根据给的参数,从元素位置移动,单位PX或者%.y轴就是从上到下,正就是下,上就是负,如果省第二个参数,那么y轴为0.
scale 缩放,往中间原点线缩放,如果省略第二个参数,那默认的就是和第一个参数一样,他是一个缩放矢量矩阵,不需要单位.
skew 扭曲,当x轴是正数的时候他是逆时针方向斜切,负数的时候就是顺时针斜切,切成一个平行四边形一样..

3D转换

routateX 这个就像单杠一样可以理解为我们正对着打开一个木箱子,箱子掀起来的时候,就是箱子的X轴在旋转.
routateY就像蔡依林姐姐跳钢管舞,缠着钢管转~
routateZ就是一个转盘沿着Z轴转~
如果写3D简写,一个参数都不可以省略!!!
translateZ就是这个东西靠近我们眼睛有多少~.
scaleZ就是缩放这个盒子的厚度.
transform-origin可以更改设置旋转元素的基点位置：.(三个值,x,y,z)x的值可以是left/center/right/length/%..y的值可以是top/center/bottom/length/%...z的值就是length.默认的值就是50% 50% 0 ..

CSS3扩展属性.

transform-style: flat||preserve-3d;这个3D可以给自己也可以给父类,但是效果是不一样的(单独一个盒子时候效果一样,盒子多就不一样.)
perspective 值得就是观察者与平面的距离,使其具有三维位置变化的元素产生透视效果.
backface-visibility 就是规定元素背面面向用户时是否可见.visible||hidden.第一个就是默认的,第二个就是隐藏的.

CSS3过度 transition允许CSS的属性值在一定的时间区间内平滑的过渡.

transition-property属性,检测或者设置对象中参与过度的属性.有三个值none||all||property(单独设置的元素属性名)
transition-duration 持续的时间
transition-timing-function 属性,设置或者检索对象中过渡的动画类型.语法.ease||ease-in||ease-put||ease-in-out||....贝塞尔曲线.
transition-delay属性.延迟.
transition全简写.先写property让谁过度,再写duration持续多久,再写timing=function贝塞尔曲线,在写延迟多久delay.

CSS动画animation

animation-name 属性检索或者设置对象所占用的动画名称.值:keyframname||none,其中keyframname就是绑定到选择器的关键帧的名称.
animation-duration动画持续多久
animation-timing-fn 贝塞尔曲线.
animation-delay 延迟多久.
animation-iteration-count 设置循环的次数.默认为1,infinite是无限循环.无限循环的第二次时候,不会在延迟.
animation-direction.检索设置是否反响运动.normal(正常)||reverse(反方向)||alternate(先正常然后反向运动交替运行)||alternate-reverse(先反方向然后正航运行交替运行)后面两个以来无限循环!.
animation-fill-mode动画结束的状态.none (不改变默认行为。)| forwards(当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）) | backwards( 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。) | both(向前和向后填充模式都被应用。);，动画执行中四个值的状态是一致的，区别在动画执行前和执行后。

当值为none时 none为默认值，在动画执行前和动画执行后，对元素的样式不会产生影响。从上图可以看到，值为none时，动画执行前和执行后的状态和无动画的状态是一致的，动画执行前和执行后对元素没有产生任何样式影响。动画执行后跳到无动画状态。

当值为forwards时 forwards当使用这个值时，告诉浏览器：动画结束后，元素的样式将设置为动画的最后一帧的样式。从上图可以看出，值为forwards时，动画执行前的状态和无动画状态一致，但是动画执行后状态却不一样，查看动画效果，你会发现他的状态和动画最后一帧的状态相同。

当值为backwards时从CSS样式可以看到，动画我们有设置延迟1s,为了便于观察动画执行前的状态。 backwards当使用这个值时，告诉浏览器：动画开始前，元素的样式将设置为动画的第一帧的样式。从上图可以看出，值为backwards时，动画执行前的状态和无动画状态不一致，可以看出，它的状态和动画第一帧相同，但是动画执行后状态却和无动画时的状态相同。

当值为both时 both当使用这个值时，告诉浏览器：同时使用forwards和backwards两个属性值的效果。从上图可以看出，动画执行前是动画第一帧的效果，动画执行后是动画最后一帧的效果。

最后animation-fill-mode的状态和animation-direction的值有关。 1、当animation-direction为normal 或 alternate时，和上面的状态相同。 2、当animation-direction为alternate-reverse 或reverse 时，状态刚好和上面相反。从100%到0%执行。

animation-play-state:paused(暂停)||running;这个需要搭配js食用.
animation 复合属性.先写name(名称),然后写duration(持续时间),再写timming-fn(贝塞尔曲线),delay(延迟),itemation-count(循环次数),direction(是否是反向),fill-mode(结束状态),pkay-state(是否在运行.)

关键帧.keyframes

小技巧.避免动画卡顿我们应该尽量

使用postion:fixed来代替background-attachment,
带图片的动画元素尽量放在伪类里,
巧用will-change.will-change是增强页面渲染.在CSS3里动画都是浏览器的软件渲染引擎,在transtion,tranform和animation应该把进程给gpu加快速度.使用注意就是不要滥用,尽量提前声明,建议加到hover上...