transition过渡 transition-duration:; 运动时间 transition-delay:; 延迟时间 transition-timing-function:; 运动形式 ease 逐渐变慢 (默认) linear 匀速 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速 cubic-bezier 贝塞尔曲线(x1,y1,x2,y2) 通过控制曲线走势来改变运动效果 注:多样式同时进行过渡(需要异步过渡 则需在完成时间后再加一个参数:延迟时…

1.transition 语法:transition: property duration timing-function delay; transition-property 设置过渡效果的css 属性名称 语法: transition-property: none | all | property none 没有属性会获得过度效果 all 所有属性都将获得过度效果. property 定义应用过度效果css 属性名称列表,列表以逗号分割. indent 元素属性名称 transition-d…

写css3的属性的时候,最好加上浏览器内核标识,进行兼容. -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Firefox */ -webkit-transform:scale(2,4); /* Safari and Chrome */ -o-transform:scale(2,4); /* Opera */ 1.圆角(常用:略)   2.边框阴影 box-shadow 属性向框添加一个或多个阴影. box-s…

transformtransform的中文翻译就是变换,改变,改观,转换的意思 在css中的主要作用就是对一个div或元素进行样式的改变. 他的属性(变换方式)有:平移,旋转,缩放,扭曲translate(10px,20px;)   指定对象的2D平移,第一个参数对应X轴,第二个参数对应Y轴.如果第二个参数未提供,则默认值为0 translateX:10px;   指定对象X轴(水平方向)的平移 translateY:20px;   指定对象Y轴(垂直方向)的平移rotate(30deg);  …

浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容,需要在样式属性前加上内核前缀. 内核前缀: transtion(css3的过渡属性) 谷歌:-webkit-transition opera:-o-transition Firefox:-moz-transition Ie:-ms-transition css3中的过渡属性 transition:…

过渡 转换 2D转换 2D转换包括四个方面:位移,缩放,旋转,倾斜 位移[让元素移动位置] transform: translate(100px,100px); 备注: 1. 如果只设置一个值,那么代表在水平方向移动 2. 如果设置两个值,那么第一个值代表水平方向,第二个值代表垂直方向 3. 可以设置负数,负数代表相反方向 4. 通过translate移动元素位置的时候,是相对元素自己本身,可以设置百分比. 缩放[放大缩小]: transform: scale(2,1); 备注: 1. 如果设置…

css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X轴负方向的旋转,视觉上呈现盒子宽度上的变化.css2D旋转:translate(a,b):a,b,均大于0时,a表示是在水平方向的位移(从左向右),b是垂直方向的位移(从上往下),rotate(a):a>0,在水平面上顺时针旋转的度数,a<0时,在水平面上逆时针旋转度数.scale(x,y):x是…

CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用于在一个属性中设置4个过渡属性 3 transition-property 规定应用过渡的css属性的名称 3 transition-duration 定义过渡效果所花费的时间.默认为0 3 transition-timing-function 规定过渡效果的时间曲线.默认是“ease” 3 transition-del…

高大上网站-CSS3总结1-图片2D处理以及BUG修复 一,前言: 现在的前端UI相对JS来说,重视并不够. 但是CSS3提供的新特性,将现在的网站赤裸裸的划分为两类:一类还在写着老旧样式,或者通过bootstrap来蹭点CSS3动画.另一类,是用CSS3写着各种特效的网站. 也许国内还感觉不是很明显.但是在国外的网站真的很明显能看出来这些.也许很多时候,国内大部分公司都不愿意将时间和精力放在这上面.另外,愿意这样写的前端工程师也偏少.(你能指望一个实习生写这个?) 但是,这里我要说但是了. 一…

原文:http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/ 原文中有demo展示及下载. 翻译开始: 可能你和我一样,每当看到一个新潮的令人过目不忘的css3特效,就迫不及待的想要应用到自己的网站中去.然后,你就会发现这些新特性只能在一到两个主流浏览器(而且绝不可能是IE)中正常显示,于是乎,你选择了搁置这个特效,开始遥遥无期的等待.现在我有一个好消息要告诉你:在最新版本的浏览器中,不少帅气的C…