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(垂直缩放);

原文链接:https://www.cnblogs.com/strongerPian/p/12468414.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有