当前位置:首页 > CSS3学习笔记

CSS3过渡 transition

之前我们整理了CSS3中的动画属性 Transform 转换,今天我们接着一起来看看CSS3中的另一个动画属性 Transition 过渡。 W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改 ...

阅读全文
CSS3学习笔记 311 次阅读 抢沙发

CSS3实现多行文本溢出显示省略号(…)

大家应该都知道用 text-overflow:ellipsis 属性,来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 实现方法: { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 效果如图(或点击这里查看demo): 但是这个属性只支持单行文本的溢出显示省略号,如 ...

阅读全文
CSS3学习笔记 371 次阅读 抢沙发

CSS3 新版弹性盒子模型(Flex Box)

传统布局方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

2009年,W3C 提出了一种新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

Flex 布局是什么?】

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器内包含了一个或多个弹性子元素。

阅读全文
CSS3学习笔记 501 次阅读 抢沙发

CSS3 Transform 转换(制作旋转、位移、缩放等效果详解)

CSS3 transform 是什么? transform 字面上是:变换;改变,使…变形;转换的意思。 在CSS3中 transform 的属性包括:旋转 rotate()、位移 translate()、缩放 scale()和扭曲(倾斜) skew()以及矩阵变形 matrix()。下面我们一起来看看CSS3中具体如何实现的吧。 语法: transform : none | <transform-function> ...

阅读全文
CSS3学习笔记 2,610 次阅读 抢沙发

CSS3边框 —— 用border-radius 属性制作圆角矩形

在CSS2中添加圆角矩形,我们必须在每个圆角使用不同的图片作为背景。而CSS3中border-radius的出现,让我们创建圆角变的非常容易。其优点:一、减少网站维护的工作量(图片制作,代码替换等);二、提高网站的性能,少了图片的http请求;三、增加视觉美观性。 既然border-radius有这么多好处,我们就从它的语法、属性和属 ...

阅读全文
CSS3学习笔记 1,014 次阅读 抢沙发

CSS3选择器

CSS 元素选择符 属性 版本 简介 * CSS2 CSS2 通配选择符(*),所有元素对象。 E CSS1 CSS1 类型选择符(E),以文档语言对象类型作为选择符。 E#myid) CSS1 CSS1 ID选择符(E#id),以唯一标识符id属性等于myid的E对象作为选择符。 E.myclass CSS2 CSS1 类选择符(E.class),以class属性包含myclass的E对象作为选 ...

阅读全文
CSS3学习笔记 732 次阅读 抢沙发

CSS3网页响应式布局

响应式布局

什么是响应式布局?

也即是响应式Web设计。响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,随着现在各种终端的快速发展,做出一些能够适应不同分辨率、不同平台、不同屏幕大小的网页尤为重要,这不仅使得自己的网站适应不同终端的能力更强,同时也为用户带来了良好的体验。而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。

阅读全文
CSS3学习笔记 1,283 次阅读 抢沙发