1.过渡
属性介绍：
//过渡属性
1\. transition-property:width，height,(all)
2\. transition-duration:2s //过渡时间
3\. transition-delay :1s,2s;//延时时间
---------------------------------------------------
4\. transition-timing-function：//
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
联写方式：
transition: property duration timing-function delay;
或者:transition: property duration delay timing-function ;
2.圆角属性（border-radius）：
演示代码：
li{
width: 200px;
height: 40px;
border: 1px solid gray;
background-color: skyblue;
margin: 10px 0;
}
li:nth-child(1){
/* 一次设置 全部生效 */
border-radius: 10px;
}
li:nth-child(2){
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 40px;
}
li:nth-child(3){
/* 如果设置了两个 第一个对应到 左上 右下 第二个对应 右上 左下 */
border-radius: 10px 50px;
}
li:nth-child(4){
/* 如果设置了三个 第一个对应到 左上 第二个对应 右上 左下 第三个对应到 右下 */
border-radius: 10px 50px 90px;
}
li:nth-child(5){
/* 如果设置了是个 从 左上 右上 右下 左下 */
border-radius: 10px 20px 30px 40px;
}
li:nth-child(6):hover{
border-radius: 10px 50px;
transition: all 1s;
}
设置值得单位：可是使用em,%进行设置，如果设置成为50%就是圆角
3. 2D，或3D 变换(transform)
相关属性：
//移动
translate(x,y) |定义 2D 转换。
translate3d(x,y,z) |定义 3D 。
translateX(x) |定义转换，只是用 X 轴的值。
translateY(y) |定义转换，只是用 Y 轴的值。
translateZ(z) |定义 3D 转换，只是用 Z 轴的值。
//缩放
scale(x,y) | 定义 2D 缩放转换。
scale3d(x,y,z) |定义 3D 缩放转换。
scaleX(x) |通过设置 X 轴的值来定义缩放转换。
scaleY(y) |通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) |通过设置 Z 轴的值来定义 3D 缩放转换。
//旋转
rotate(angle) |定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) |定义 3D 旋转。
rotateX(angle) |定义沿着 X 轴的 3D 旋转。
rotateY(angle) |定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) |定义沿着 Z 轴的 3D 旋转。
//倾斜
skew(x-angle,y-angle) |定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) |定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) |定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) |为 3D 转换元素定义透视视图。
注意: 使用单位： 角度单位（deg）,距离单位（px）
（1）设置变换参考点（transform-origin）：
transform-origin: x-axis y-axis z-axis;
x-axis 定义视图被置于 X 轴的何处。可能的值：
left
center
right
length
%
y-axis 定义视图被置于 Y 轴的何处。可能的值：
top
center
bottom
length
%
z-axis 定义视图被置于 Z 轴的何处。可能的值：
length
案例：
.pkSingle{
display: block;
width: 100px;
height: 150px;
margin: 20px auto;
/* 添加过渡属性 */
transition: all 1s;
/* 设置 变换的 参照点 */
transform-origin: bottom right;
额外内容：
（3）backface-visibility： 定义元素在不面对屏幕时是否可见。
**语法**
backface-visibility: visible|hidden;值
visible 背面是可见的。
hidden 背面是不可见的。
注意:过渡无法使用在渐变的颜色上
网友评论