css动画页面复杂特效.docVIP

1 2d位移 转换属性 Transform： Tanslate（）方法将元素从其当前的位置移动 Tanslate（x）x轴 Translate（x，y）x轴和y轴 单向位移函数 TranslateX（x） 2 2d缩放 Scale（） 根据给定的宽度x轴和高度y轴 可取值 默认值1 缩小 0-1之间的数值 放大 大于1的数值 单向缩放 ScaleX（x） 3 2d旋转 Rotate （） 根据原点，将元素按顺时针旋转给定的角度 允许负值，逆时针 Rotate（deg） 4 2d倾斜 Skew（） 以原点为位置，围绕x轴和y轴按照一定角度旋转 可能改变元素的形状 Skew（x）或者skew（x，y），取值为角度 单向函数 SkewX（x） html head meta charset=UTF-8 title/title style #d1{ width: 100px; height: 100px; background: brown; transform: translate(500px,200px);//向右移动500后向下移动200px transform: scale(2);//宽度和高度放大两倍 transform: rotate(45deg); transform: skew(45deg);//只给一个值只有x轴旋转 向着x轴的左或有产生倾斜的角度实际变换y轴的角度 } /style /head body div id=d1/div /body /htmlPerspective属性定义3D元素距视图的距离，以像素计算 为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身 只影响3D转换元素 值设置的越小离得越近，效果更明显 浏览器兼容 在chrome和safari支持代替的-webkit-perspective属性 3d位移 在2d基础上增加z轴，+离得近，-离得远 TranslateZ(z) Translate3d(x,y,z) 3d旋转 RotateZ（deg）//风车，幸运转盘 RotateY（deg）//围绕中间的杆 html head meta charset=UTF-8 title/title style #d1{ width: 200px; height: 200px; border: 1px solid #333; -webkit-perspective: 1200px;//人眼到电脑屏幕距离 } #d2{ width: 100px; height: 100px; background:red; margin: 50px auto ;//上下居中 垂直居中 transform: rotateX(45deg); } /style /head body div id=d1 div id=d2/div /div /body /htmlTransition-property属性规定过度效果的css属性名称，当指定的css属性改变时候，过度效果开始 语法 Translation-property：none/all/property 可以设置过度的属性 颜色属性 取值为数值的属性 转换属性 渐变属性 Visibility属性 阴影属性 过度时间 transition-duration：s/ms 过度函数 Translation-timing-function 取值为预定义函数或者贝塞尔曲线 语法 Ease：默认值 慢慢开始 快速变化 然后慢慢结束 Linear： 以相同速度开始到结束 Ease-in 以慢速开始 加速效果 Ease-out 以慢速开始，减速效果 Ease-in-out 以慢速开始和结束，先加速再减速 过度延迟transition-delay 规定何时开始 Translation属性一次可以设置四个过度属性 Translation：propert duration timing-function delay html head meta charset=UTF-8 title/title style #d1{ width: 200px; height: 200px; border: 1px solid #333; border-radius: 50%;//边框倒角 圆形 font-weight: bold; text-align: center;//文本水平对齐 line-height: 200px;//变相垂