CSS教程

首页>前端教程>CSS教程

CSS3第十二课:强大的多时间段animation动画!

animation动画与transition过渡动画有两个明显的区别:1、transition过渡动画只能执行一个时间段的动画,从初始到结束。而且必须有事件触发,比如hover事件,或者添加了新的class属性等。2、animation动画可以分时间段执行,比如第一个时间段执行一段动画,第二个时间段...

CSS3第十一课:transform2D变形,注意多个变形的执行顺序!

用过ps的童鞋几乎都知道ctrl+T自由变换工具,我觉得CSS3 transform就汲取了ps变形的精华,好好地继承了这三板斧精神。一、transform变形实现对元素的缩放、移动、旋转、倾斜,分别对应以下几个方法。注意:变形只能针对块状对象,行内元素需要变成块状对象才能实现变形效果。1、scal...

CSS3第十课:transition过渡动画(内附神器!)

在十年前,我用flash做动画的时候,总结了一下flash的运动规律,主要有形状、大小、位置、角度、颜色、透明度、加减速等变化。没想到移动端异军突起,似乎一夜之间,flash就没落了。想起自己曾经每天必逛的闪吧,在2012年也停止更新,虽然现在网站还在, 但也只是一个象征了,偶尔回去悼念一下,怀念过...

CSS3第九课:重复放射性渐变repeating-radial-gradient

repeating-radial-gradient重复性放射渐变和radial-gradient放射渐变的参数都是一样的,差别在于是否利用渐变单元扩展至整个容器。可以先看看这篇详细介绍放射性渐变的文章↓CSS3教程:background-image之放射性渐变(radial-gradient)详解一...

CSS3第八课:重复线性渐变repeating-linear-gradient

很早以前写过一篇线性渐变的文章,如果还没有掌握CSS3中的线性渐变,建议先看一下。CSS3教程:background-image之线性渐变(linear-gradient)最in版!时隔一年半,再把它的姐妹篇——重复线性渐变搞定,才算是真正完结了吧。忍不住感叹,How time flies!这个属性...

CSS3第七课:background多重背景及新增属性

关于CSS3的边框、圆角、阴影等新特性,在以前的CSS3教程里面已经详细介绍过,在这个系列里面就不再啰嗦,有兴趣的可以直接查看CSS3教程系列。 这篇文章详细讲解一下CSS3多重背景这个新特性,真的是很强大。 一、多重背景的用法 ba...

CSS3第六课:web中的颜色值以及rgba和opacity的区别

每次听一些web前端开发大神讲公开课或者看录制的视频,很多时候脱离了UI设计稿,大神们自己做案例的时候,都是用RGB三原色来搭配,或者直接red/blue/yellow/gray等颜色值,看得我眼睛火辣辣的痛,强烈建议web前端们也要把自己的审美,特别是色彩审美提高一下。审美教育必须从娃娃抓起!1、...

CSS3第五课:rem、em、vh、vw等新增单位的用法

很早以前,大家都习惯用像素(px)这个单位来控制大小,但是随着响应式布局和跨平台跨设备的web应用的兴起,很多具有百分比性质的单位其实更灵活。浏览器都允许用户重新设置文字的大小,如图:但是很多网页在body的样式上直接写死了文字大小,比如为14px或者16px,这样用户修改浏览器的字号是没法改变网页...

CSS3第四课:伪元素选择器,::before和::after就是左膀右臂!

讲完了伪类选择器,还有一个兄弟叫伪元素的选择器也把它搞定吧。它们都有一个伪字,说明都是不存在的,但是它们也有区别:伪类是一种状态,伪对象是不真正存在于HTML文档中的标签对象,但是它是以html对象的方式虚拟出现,并且可以通过css控制的对象。在最新的CSS3标准中,把伪对象的格式改成了双冒号,即:...

CSS3第三课:伪类选择器,为什么有一个伪字?

拖了好久的教程终于等到授课结束了,便开始马不停蹄的准备更新~~~今年自学了很多关于UI类的内容,在审美上又有了一些提高,以后做的案例更美美哒!一、CSS3新增伪类选择器在CSS1版本的时候,几乎都是:hover的天下,在CSS2版本的时候,增加了:focus这个常用的,CSS3版本就增加了:nth-...

从CSS Reset到Normalize.css

几年前为了重置样式,或者说为了让元素的浏览器默认样式不影响到页面的效果,我一般使用CSS Reset直接全部重置,当然,我是反对通配符*{margin:0;padding:0}这种写法的,但是CSS Reset全部归零了所有样式,后面有些样式又要自己贱兮兮的重新写回来,感觉也是做了无用功。直到发现了...

CSS3第二课:与家庭伦理有关的组合选择器

在CSS2时代,组合选择器中用的最多的是后代选择器,比如#nav li a等。因为这是CSS1版本就有的,IE6都毫无压力地支持。可是,在CSS2中新增的子元素选择器等,IE6就支持不友好了。不过,现在新版本的浏览器几乎都支持这些选择器了。一、组合选择器选择器举例含义版本element e...
Top