Max—— 前端攻城狮 's Blog

A Simple pure blog generated by jekyll

CSS3的一些应用

<< Back

CSS3背景颜色渐变

对于背景渐变每个浏览器都没有达成统一的解析语法,所以我们不得不为各个浏览器写不同的样式规则:

Webkit引擎

语法结构:-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
	

其实规则很好记,也很好理解,多写几遍就熟悉了:

  • 渐变的类型 —— (linear)
  • 渐变开始的X Y 轴坐标 —— (0 0 – 或者left top)
  • 渐变结束的X Y 轴坐标 —— (0 100% 或者left bottom)
  • 开始的颜色 —— (from(red) 或者form(#3a3a3a))
  • 结束的颜色 —— (to(blue) 或者to(#6c6c6c))

Mozilla引擎

语法结构:-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]
background: -moz-linear-gradient(top, red, blue);
	

规则更简单了:

  • 请注意我们将渐变的类型 —— linear —— 放到了属性前缀中了
  • 渐变从哪里开始 —— (top – 我们也可以使用度数,比如-45deg)
  • 开始的颜色 —— (red) 或者(#3a3a3a))
  • 结束的颜色 —— (blue) 或者(#6c6c6c))

IE引擎

IE并不支持CSS渐变,但是提供了渐变滤镜,可以实现最简单的渐变效果:

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000' grandientType=1); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000')"; /* IE8 */
	
  • startColorstr —— 渐变起始位置的颜色
  • endColorstr —— 渐变终止位置的颜色
  • grandientType —— 渐变的类型(0:代表竖向渐变,1:代表横向渐变)

CSS3 transition的应用

一般来说,transition有下列几种参数

	transition-property : all;
transition-duration : 2s;
transition-timing-function : linear;
transition-delay : 1s;

	

transition-property:变换延续的时间

transition-duration:在延续时间段

transition-timing-function:变换速度变化,它的值允许你根据时间的推进去改变属性值的变换速率,有6个可能值:

  • 1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0);
  • 2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0);
  • 3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0);
  • 4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0);
  • 5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0);
  • 6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

transition-delay:变化延迟时间

参考CSS3中的Transition属性详解

发表于: 08 Sep 2014