CSS3的过渡效果

在CSS2的世界中,过渡常常是非常单薄的,要么是从一种颜色变成另一种颜色、要么是从不透明变到透明,总而言之就是由一种状态变到另外一种状态。这就导致了很多页面给人的感觉很突兀,没有一个平滑的过渡。

虽然我们可以使用DHTML或者诸如jQuery等其他第三方的库文件来完成过渡效果,但是为了完成一个简单的效果我们就需要大量的编码。

我们所需要的就是用一种简单的方法来实现这些过渡,因为我相信在今后的WEB应用中,平滑的过渡越来越成为一种标准的展现形式。

CSS3现在已经添加到了Webkit中,现在 Apple Safari 和 Google Chrome 都已经开始支持。再往前推几个月,那个时候人们还在争论是否将这些过渡写在CSS3中,一些人坚持认为过渡并不是一种样式属性,应当用脚本来进行处理。经过众多人的努力,样式不仅限于静态的样式,动态的样式也是非常需要的。于是过渡的样式终于开始写入CSS3的官方文档中。

废话少说,进入正题。

本文的例子需要支持CSS3的浏览器,所以你最好使用 Safari 或者 Chrome 来测试。

过渡、状态和动作

我们知道,CSS中都是通过伪类来实现页面中的一个元素与用户互动的。例如,用户鼠标的悬停和移动。下面列出了几个伪类:

Dynamic Pseudo Class

Elements Affected

Description

:link

Links only

Unvisited links

:visited

Links only

Visited links

:hover

All elements

Mouse cursor over element

:active

All elements

Mouse clicks element

:focus

All elements that can be selected

Element is selected

None

All elements

Default state of all elements

过渡包含哪些元素

一个从蓝色变成红色的动态过渡包含哪些元素呢,我们先看一个实例:

#css3tr a:link {     display:block;     height:30px;     line-height:30px;     width:100px;     border:5px solid #cccccc;     text-align:center;     -webkit-transition:width .25s ease-in-out, background-color .25s linear;     transitiona:width .25s ease-in-out, background-color .25s linear; } #css3tr a:hover {     color:red;     background-color:#e9e9e9;     width:200px;     -webkit-transition: width .25s ease-in-out, background-color .25s linear;     transition:width .25s ease-in-out, background-color .25s linear; }

由此可见,transition 属性中包含了三个基本的属性:样式属性(CSS property)、持续时间(Duration)、计时函数(Timing Function)、延时(Delay)

看到这个图,大家对于这几个参数的作用应该了解了吧。很简单的几个参数设置,实现了我们之前需要用大量js脚本实现的效果,那么有什么理由不期待CSS3的到来呢。

可以应用过渡的元素:

CSS Property

What Changes

background-color

Color

background-image

Only gradients

background-position

Percentage, length

border-bottom-color

Color

border-bottom-width

Length

border-color

Color

border-left-color

Color

border-left-width

Length

border-right-color

Color

border-right-width

Length

border-spacing

Length

border-top-color

Color

border-top-width

Length

border-width

Length

bottom

Length, percentage

color

Color

crop

Rectangle

font-size

Length, percentage

font-weight

Number

grid-*

Various

height

Length, percentage

left

Length, percentage

letter-spacing

Length

line-height

Number, length, percentage

margin-bottom

Length

margin-left

Length

margin-right

Length

margin-top

Length

max-height

Length, percentage

max-width

Length, percentage

min-height

Length, percentage

min-width

Length, percentage

opacity

Number

outline-color

Color

outline-offset

Integer

outline-width

Length

padding-bottom

Length

padding-left

Length

padding-right

Length

padding-top

Length

right

Length, percentage

text-indent

Length, percentage

text-shadow

Shadow

top

Length, percentage

vertical-align

Keywords, length, percentage

visibility

Visibility

width

Length, percentage

word-spacing

Length, percentage

z-index

Integer

zoom

Number

过渡的时间和延时:

Name

How It Works

cubic-bezier(x1, y1, x2, y2)

X and Y values are between 0 and 1 to define the shape of a bezier curve used for the timing function.

linear

Constant speed

ease

Gradual slowdown

ease-in

Speed up

ease-out

Slow down

ease-in-out

Speed up and then slow down

现在,就期待CSS3早日全面普及吧。

Technorati 标签: css3,ui

参考资料

1、CSS Transitions 101

2、CSS Transitions Module Level 3

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端小作坊

CSS3着重符及其fallback

在中文里面,我们一般会在文字下方加上圆形符号。在日语中会在文字上方加上小顿号。在CSS3中如下属性可以控制着重符号:

11620
来自专栏Android知识点总结

D5-Android绘图之让图形动起来

12120
来自专栏GopherCoder

『Go 内置库第一季:time』

时间的操作在项目中使用的非常频繁,比如说数据库中,经常有时间的操作,比如根据时间进行划分,统计之类的功能。

12630
来自专栏ytkah

excel判断单元格包含指定内容的函数用=IF(COUNTIF(A1,"*内容*"),"0","1")

  前面我们聊过怎样将Excel包含某字符的单元格填充颜色,这边我们用另外一种方法来实现:excel判断单元格包含指定内容的函数   选中需要显示结果的单元格,...

1.2K60
来自专栏哲学驱动设计

OEA 中 WPF 树型表格虚拟化设计方案

    最近用 OEA 做的仓库管理系统中,许多界面的都需要使用表格控件来显示数据。一是这些表格的列非常多,有的甚至达到了 200 列,而且一个模块的界面中可能...

21570
来自专栏python3

scrapy选择器css

CSS是网页代码中非常重要的一环,即使不是专业的Web从业人员,也有必要认真学习一下

9520
来自专栏Flutter&Dart

Flutter之DataTable使用详解

57530
来自专栏mathor

第六届蓝桥杯决赛B组C/C++——完美正方形

17550
来自专栏老司机的简书

CoreText实现图文混排

也好久没来写博客了,主要是最近也工作了,手头的事有点多,一时间也就断了,闲下来了我就来补博客了,刚好最近也做了很多东西,放在这里也算给自己做个笔记吧。

20720
来自专栏数说工作室

【SAS Says】基础篇:ODS的使用(下)

特别说明:本节【SAS Says】基础篇:SAS软件入门(下),用的是数说君学习《The little SAS book》时的中文笔记,我们认为这是打基础的最好...

28940

扫码关注云+社区

领取腾讯云代金券