transform 旋转(transform是没有动画效果,你改变了它的值,元素的样子就唰的改变了.其中的位移的函数名就叫translate,所以说,translate是transform的一部分.) transition 平滑过渡(是 过渡,指的是某个CSS属性值如何平滑的进行改变,就是平常说的 动效.) transition语法 transition: [属性名] [持续时间] [速度曲线] [延迟时间]; 案例 transition: height 2s ease .5s; transit…
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢? 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位: 3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核). px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为…
今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在国外网站中经常被使用.那么px,em怎样区分呢? 1.px像素(Pixel),相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 2.em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(16px) 任意浏览器的默认字体高都是1…
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局. 对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素. rem中的r意思是root(根源),这也就不难理解了. em 子元素字体大小的em是相对于父元素字体大小 元素的width/height/padding/margin用em的话是相对于该元素的fo…
原文:http://www.admin10000.com/document/6267.html     在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位,也就是可调的.没错,px比em更加容易使用,大部分读者不知道em为何物或者它相当于多少 px.国外人士如此重视网站易用性(Accessibility),不仅因为其根生蒂固的人文精神,直接原因可能是…
写动画经常会用到这几个属性,他们之间有什么区别呢? 1.transform 每每演示transform属性的,看起来好像都是带动画.这使得小部分直觉化思维的人(包括我)认为transform属性是动画属性.而恰恰相反,transform属性是静态属性.它其实只是一个静态属性,需要配合transition和animation才能展现出动画效果.你可以把它看成是跟left.top等属性一样,只是一个静态样式而已. 它可以让元素偏移.伸缩.变形.旋转等. 具体的给设计师改变元素样式用的属性则有以下五个…
出处:http://blog.csdn.net/dyllove98/article/details/8957232   CSS3中和动画有关的属性有三个  transform. transition 和 animation.下面来一一说明:   transform     从字面来看transform的释义为改变,使…变形:转换 .这里我们就可以理解为变形.那都能怎么变呢? none 表示不进行变换: rotate 旋转            transform:rotate(20deg) 旋转…
transform 静态属性,一旦写进style里面,会立即显示作用,无任何变化过程.(类似于left, right, top, bottom这类属性) 主要用来做元素的变形 改变元素样式的属性主要有以下五个 translate3d(x,y,z) 用来控制元素在页面的三轴上的位置 rotate(10deg) 是用来控制元素旋转角度(度deg) skewx,y 制作斜度,2d里面创建3d透视图的必备属性 scale3d(2, 1.5, -6) 用来放大缩小效果,属性是比值 matrix3d css…
我们知道在网页中引用外部CSS有两种方式:@import和link 我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗? 继续往下看 link:link就是把外部CSS与网页连接起来. @importimport文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件. 为什么使用@import大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式.另一个主要的原因…
我们都知道在html中引入外部的CSS 有2种方式,link标签和@import,他们又什么区别呢? 1.从属关系区别@import是 CSS 提供的语法规则,只有导入样式表的作用:link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS.rel 连接属性等. 2.加载顺序区别加载页面时,link标签引入的 CSS 被同时加载:@import引入的 CSS 将在页面加载完毕后被加载. 3.兼容性区别@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别:li…