css3背景渐变+2D

● css3背景渐变
○ background：linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);线性渐变
○ background：repeating-linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);重复线性渐变：
■ <point>：[ left | right ]? [ top | bottom ]? || <angle>?
■ <color-stop>：<color> [ <length> | <percentage> ]?
● right/left/top/bottom设置哪边为渐变起点的横坐标值。
● <angle>：用角度值指定渐变的方向（或角度）。
● <color-stop>：指定渐变的起止颜色。
● <color-stop><color>：指定颜色。请参阅颜色值
● <length>：用长度值指定起止色位置。不允许负值
● <percentage>：用百分比指定起止色位置。
○ background: radial-gradient(center, shape size, start-color, ..., last-color);径向渐变
○ background: radial-gradient(red 5%, green 15%, blue 60%);不均匀径向渐变
○ background:repeating-radial-gradient()重复径向渐变
● css3过渡
○ transition-property规定应用过渡的 CSS 属性的名称。
○ transition-duration定义过渡效果花费的时间。默认是 0。
○ transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。
■ ease规定慢速开始，然后变快，然后慢速结束的过渡效果
■ linear规定以相同速度开始至结束的过渡效果
■ ease-in规定以慢速开始的过渡效果
■ ease-out规定以慢速结束的过渡效果
■ ease-in-out规定以慢速开始和结束的过渡效果
○ transition-delay规定过渡效果何时开始。默认是 0。
○ transition ：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]简写属性，用于在一个属性中设置四个过渡属性。
注释：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：
1.规定把效果添加到哪个 CSS 属性上
2.规定效果的时长
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
Internet Explorer 9 以及更早的版本，不支持 transition 属性。 Chrome 25 以及更早的版本，需要前缀 -webkit-。

css 2D转换
○ translate() 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数 例：
■ transform: translate(50px,100px);
■ translateX(n)水平位移，translateY(n)垂直位移，可以负值;
○ rotate()元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转 例：
■ transform: rotate(30deg);
○ scale()元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数 例：
■ transform: scale(2,4);
■ scaleX(n)根据宽度尺寸增加,scaleY(n)根据高度尺寸增加
○ skew()元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数 例：
■ transform: skew(30deg,20deg);
■ skewX()给定根据X轴的角度，skewY()给定根据Y轴的角度

转载于:https://www.cnblogs.com/RuMengkai/articles/6198367.html