web前端：CSS过渡与转换

作者:strongerPian更新于： 2020-03-21 21:15:14

　　在css1中，样式通常是基于在html源代码中出现的标记和属性。对于很多设计情景而言这种做法完全可行，但是它无法实现设计者希望获得的一些常见的设计效果。

　　浏览器前缀：

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

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

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

　　浏览器前缀：

　　-wekit- 谷歌

　　-moz- 火狐

　　-ms- IE

　　-o- 欧朋

　　盒子阴影：

　　box-shadow:0px0px0px0pxred;

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

　　css3渐变：由浏览器生成，

　　线性渐变：

　　1、单一方向渐变

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

　　方向：

　　left从左边开始

　　right从右边开始

　　top从上边开始

　　bottom从下边开始

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

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

　　toleft到左边（结束）

　　toright

　　totop

　　tobottom

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

　　2、对角渐变

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

　　lefttop从左上角到右下角渐变

　　leftbottom

　　righttop

　　rightbottom

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

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

　　tolefttop

　　toleftbottom

　　torighttop

　　torightbottom

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

　　3、角度的渐变

　　10deg10度

　　4、默认情况下颜色均分

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

　　background:-wbkit-linear-gradient(left,red10%,green40%,blue);

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

　　background:linear-gradient(toleft,red10px,green,blue);

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

　　径向渐变：（一定要加浏览器前缀）

　　从一个点到四周的渐变

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

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

　　left从左边渐变

　　right

　　top

　　bottom

　　lefttop从左上角到四周渐变

　　leftbottom

　　righttop

　　rightbottom

　　形状：默认椭圆 ellipse

　　正圆 circle

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

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

　　closest-side:最近边;

　　farthest-side:最远边;

　　closest-corner:最近角;

　　farthest-corner:最远角;

　　渐变重复：

　　线性渐变

　　background:repeating-linear-gradient(toleft,black10%,white20%);

　　-wbkit-background:repeating-linear-gradient(right,black10%,white20%);

　　径向渐变

　　background:repeating-radial-gradient:(right,black10%,white20%);

　　【注】渐变用的背景属性是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

　　二维的平面空间

　　css32d属性

　　变形属性transform:;

　　2d变换

　　位移

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

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

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

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

　　旋转

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

　　transform-origin:lefttop; 设置旋转基点

　　transform-origin:5px10px;

　　缩放

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

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

　　transform:scaleX(水平缩放);

　　transform:scaleY(垂直缩放);

　　CSS的识别符也需要用反斜杠"\\"规避特殊字符，这些规避字符遵循IS010646规范。特殊字符的规避方法有两种:第一种方法是遇到特殊字符则在这些字符前直接添加反斜杠，例如，"AT&T"变为"AT\\&T";另一种方法为用反斜杠和Unicode或IS010646等值的十六进制数值一起，规避特殊字符，例如，"AT&T"变为"AT\\26T"。