css添加过渡色,CSS过渡与转换

浏览器前缀：

css3属性：预览版，还没有最终版，所以有很多兼容性问题，浏览器不识别。

浏览器为了使这些属性兼容，每个浏览器厂商都提供了一个属于自己浏览器的语法规则，浏览器兼容前缀。

主流浏览器：谷歌，IE，欧朋，火狐，苹果

浏览器前缀：

-wekit- 谷歌

-moz- 火狐

-ms- IE

-o- 欧朋

盒子阴影：

box-shadow:0px 0px 0px 0px red;

水平偏移量，垂直偏移量，模糊度，影子大小，颜色

css3渐变：由浏览器生成，

线性渐变：

1、单一方向渐变

background:-wbkit-linear-gradient(方向，颜色1，颜色2，颜色3);

方向：

left 从左边开始

right 从右边开始

top 从上边开始

bottom 从下边开始

【注】需要添加浏览器前缀

background:linear-gradient(to 方向，颜色1，颜色2，颜色3);

to left 到左边(结束)

to right

to top

to bottom

【注】不要添加浏览器前缀

2、对角渐变

background:-wbkit-linear-gradient(方向 方向，颜色1，颜色2，颜色3);

left top 从左上角到右下角渐变

left bottom

right top

right bottom

【注】需要添加浏览器前缀

background:linear-gradient(to 方向 方向，颜色1，颜色2，颜色3);

to left top

to left bottom

to right top

to right bottom

【注】不要添加浏览器前缀

3、角度的渐变

10deg 10度

4、默认情况下颜色均分

可以指定颜色分布的百分比

background:-wbkit-linear-gradient(left,red 10%,green 40%,blue);

从10%开始渐变，前10%都是red

background:linear-gradient(to left,red 10px,green,blue);

从10px处开始渐变，前10px都是red

径向渐变：(一定要加浏览器前缀)

从一个点到四周的渐变

background:-wbkit-radial-gradient(渐变位置，形状，大小，颜色1，颜色2，颜色3);

渐变位置：默认从中心到四周

left 从左边渐变

right

top

bottom

left top 从左上角到四周渐变

left bottom

right top

right bottom

形状：默认椭圆 ellipse

正圆 circle

【注】元素是正方形，则都是正圆

大小：size，渐变的大小，即渐变到哪里停止，它有四个值

closest-side:最近边;

farthest-side:最远边;

closest-corner:最近角;

farthest-corner:最远角;

渐变重复：

线性渐变

background:repeating-linear-gradient(to left,black 10%,white 20%);

-wbkit-background:repeating-linear-gradient(right,black 10%,white 20%);

径向渐变

background:repeating-radial-gradient:(right,black 10%,white 20%);

【注】渐变用的背景属性是background-image:;

过渡：让元素的动画产生平滑的效果

1、什么属性在做动画 transition-property:属性1，属性2，...；

2、过渡时间需要多久 transition-duration:0.5s;

3、延迟时间(选写) transition-delay:2s;

4、动画类型(默认匀速) transition-timing-function:;

综合写法：

transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型

css3中的2d

二维的平面空间

css3 2d属性

变形属性transform:;

2d变换

位移

transform:translate(水平位移，垂直位移); 一个值默认只有水平位移

transform:translateX(10px); 水平位移

transform:translateY(10px); 垂直位移

【注】正值，从上往下从左往右

旋转

transform:rotate(); 默认中心旋转

transform-origin:left top; 设置旋转基点

transform-origin:5px 10px;

缩放

transform:scale(水平垂直都缩放的倍数); 一个值

transform:scale(水平缩放，垂直缩放); 两个值

transform:scaleX(水平缩放);

transform:scaleY(垂直缩放);

倾斜：

transform:skew(水平倾斜); 一个值

transform:skew(水平倾斜，垂直倾斜); 两个值

transform:skewX();

transform:skewY();