css动画页面复杂特效

1、12d位移转换属性Transform：Tanslate()方法将元素从其当前的位置移动Tanslate(x)x轴Translate(x,y)x轴和y轴单向位移函数TranslateX(x)2d缩放Scale()根据给定的宽度x轴和高度y轴可取值默认值1缩小0-1之间的数值放大大于1的数值单向缩放ScaleX(x)2d旋转Rotate()根据原点，将元素按顺时针旋转给定的角度允许负值，逆时针Rotate(deg)2d倾斜Skew()以原点为位置，围绕x轴和y轴按照一定角度旋转可能改变元素的形状Skew(x)或者skew(x，y)，取值为角度单向函数SkewX(x)#d1width:100px;h

2、eight:100px;background:brown;transform:translate(500px,200px);/向右移动500后向下移动200pxtransform:scale(2);/宽度和高度放大两倍transform:rotate(45deg);transform:skew(45deg);/只给一个值只有x轴旋转向着x轴的左或有产生倾斜的角度实际变换y轴的角度3d转换Perspective属性定义3D元素距视图的距离，以像素计算为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身只影响3D转换元素值设置的越小离得越近，效果更明显浏览器兼容在chro

3、me和safari支持代替的-webkit-perspective属性3d位移在2d基础上增加z轴，+离得近，-离得远TranslateZ(z)Translate3d(x,y,z)3d旋转RotateZ(deg)风车，幸运转盘RotateY(deg)围绕中间的杆#d1width:200px;height:200px;border:1pxsolid#333;-webkit-perspective:1200px;/人眼到电脑屏幕距离#d2width:100px;height:100px;background:red;margin:50pxauto;/上下居中垂直居中transform:rotate

4、X(45deg);过度使得css的属性值在一段时间内平滑的过度比如，鼠标悬停后，背景颜色在1s内，由白色平滑过度为红色指定四个要素指定过度属性如background，color等指定多度所需时间指定过度函数速度或方式指定延迟时间开始执行时间过度属性Transition-property属性规定过度效果的css属性名称，当指定的css属性改变时候，过度效果开始语法Translation-property：none/all/property可以设置过度的属性颜色属性取值为数值的属性转换属性渐变属性Visibility属性阴影属性过度时间transition-duration：s/ms过度函数Tra

5、nslation-timing-function取值为预定义函数或者贝塞尔曲线语法己50：默认值慢慢开始快速变化然后慢慢结束Linear：以相同速度开始到结束Ease-in以慢速开始加速效果Ease-out以慢速开始，减速效果Ease-in-out以慢速开始和结束，先加速再减速过度延迟transition-delay规定何时开始Translation属性一次可以设置四个过度属性Translation：propertdurationtiming-functiondelay#d1width:200px;height:200px;border:1pxsolid#333;border-radius:5

6、0%;/边框倒角圆形font-weight:bold;text-align:center;/文本水平对齐line-height:200px;/变相垂直对齐方式transition:transform3slinear;/transfrom改变相应改变#d1:hovertransform:rotate(720deg);欢光临迎动画浏览器兼容Chrome和safari需要前缀-webkit-Firefox需要前缀moz-Opera需要前缀-o-1声明动画创建一个已经命名的动画使用keyframe声明动画的关键帧2调用动画Animation调用动画设置动画的播放次数和播放时间Animation-nam

7、e调用动画，规定需要绑定的选择器的keyframe的名称Animation-duration时间Animation-timing-function动画速度曲线Animation-delay延迟时间Animation-iteration-count播放次数Animation-direction动画播放次数Animation-play-state规定动画正在运行还是暂停常用于结合jacascript代码使用，实现在播放过程中暂停动画Paused动画暂停Running播放Animation-fill-mode属性规定动画播放之前或结束之后，动画效果是否可见可取值None：不改变默认值Forwards

8、当动画完成后，保持最后一个属性值Backwards动画显示之前，应用开始属性值Both向前或向后填充模式都被应用边框组成Border1边框粗细1px2边框的样子Solid实线Dashed虚线Dotted点画线3边框颜色Red英文单词#ccc颜色的16进制表示法Rgba(255,0,0,0.5)最后一个透明度Border-with：2px粗细设置Border-style第二个值soliddashed背景颜色Background背景Background-color背景颜色Background-image背景图片Background-repeat背景图片重复Background-position背景

9、图片位置Background-attachment：背景图片是否滚动scroll背景图片跟随滚动条滚动（默认）fixed背景图片不会跟随滚动条而滚动Background-position50px100px背景图片离左上角的距离向右走50px向下走100pxleft紧贴容器最左边Line-height如果行高值与容器高度相等文字垂直居中Font：italic斜体26px/50pxfont-size/line-height写在一起font：font-weightfont-stylefont-size/line-heightfont-family文本Text-decoration:underline

10、/overline/line=through文本修饰Letter-spacing字母间距Word-spacing单词间距White-space:nowrap强制不换行Word-break:break-word/break-all单词换行/所有都不换行Em大小等于1个字体大小边距Padding与margin的区别Padding作用是在元素里面，拉开的距离会显示元素的背景Margin作用在元素外面，拉开距离不会显示元素的背景父级与子级距离，给父级加padding设置同级之间的距离，给margin设置Margin传递的问题只有上下会传递左右不会传递子级会把margin-top与margin-bottom传递给父级解决办法给父级加上一个边框margin上下叠压（只有上下叠压，左右不叠压）上边元素的margin-bottom与下边元素的margi