4
12
2013
0

[摘录]js中escape,encodeURI,encodeURIComponent

相信作为开发人员,一定对于乱码、编码等问题很是困扰,部分原因是因为对这类知识不了解,还有就是未能正确使用相关技术。

一下是我从网上摘录来的关于javascript提供的原生的3个编码方法,特别实用。

Category: Web摘记 | Tags: javascript 编码
3
9
2012
1

javascript的getComputedStyle方法获取节点的计算后的CSS样式

取自:www.cnblogs.com/yunfour/archive/2012/02/25/2367895.html

今天在做东西的时候,遇到一个问题:想获取节点style指定的CSS属性,如:ele.style.display属性,如果在节点中没有设置其style.display属性的话则通过ele.style.display这种方式获取的值为空字符串。

如果节点ele是一个块状元素的话,通过上述方式返回的display的值则应该为:block的,而其得到的值为空字符串并非我想得到的,在网上 查找了了一下,浏览器中提供了一个方法:window.getComputedStyle()的方法可以得到节点的计算后样式,该方法有两个参数,第一个 是要所要获取的样式的节点,第二个参数不知道是什么作用,网上给出的例子都将设置成null;即是这样调用 的:window.getComputedStyle(node,null),其返回值为一个对象,为计算后的样式的属性值对的集合。

但是IE浏览器中不支持该方法,不过在IE中,元素节点有一个属性对应的也是该节点计算后的方法,例如,在IE中节点node计算后的样式 为:node.currentStyle,该属性是一个对象,也是计算后的样式的属性值对的集合。为了兼容性我们可以将其封装改写一下,提供一个统一的方 法getCurrentStyle(node),如下:

// 参数node:将要获取其计算样式的元素节点
function getCurrentStyle(node) {
    var style = null;
    
    if(window.getComputedStyle) {
        style = window.getComputedStyle(node, null);
    }else{
        style = node.currentStyle;
    }
    
    return style;
}

 

以下代码是获取其中div的display的样式属性值:

<div id="div">div节点</div>

<script>
var div = document.getElementById("div");
var style = getCurrentStyle(div);
var display = style["display"];

alert(display);    // 输出:block
</script>

 

Category: Web摘记 | Tags: 获取样式 javascript
1
1
2012
120

网页设计之CSS @font-face应用网页字体自定义 CSS 中@font-face应用

网页设计之CSS @font-face应用网页字体自定义 CSS 中@font-face应用,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@font-face实现的,为了能让更多的朋友知道如何使用他,今天我主要把自己的一点学习过程贴上来和大家分享。

首先我们一起来看看@font-face的语法规则:

@font-face {
   font-family: <YourWebFontName>;
   src: <source> [<format>][,<source> [<format>]]*;
   [font-weight: <weight>];
   [font-style: <style>];
 }

取值说明

YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";” source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径; format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等; weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。

兼容浏览器

说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体,前面也简单带到了有关字体的几种格式,下面我就分别说一下这个问题,让大家心里有一个概念:

一、TureTpe(.ttf)格式:

.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;

二、OpenType(.otf)格式:

.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

三、Web Open Font Format(.woff)格式:

.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

四、Embedded Open Type(.eot)格式:

.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;

五、SVG(.svg)格式:

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。

为了使@font-face达到更多的浏览器支持,Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

@font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot?') format('eot');/*IE*/ src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/ }

但为了让各多的浏览器支持,你也可以写成:

@font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ }

说了这么多空洞的理论知识,大家一定有点心痒痒了,那么我们先来看看W3CPLUS首页中导航部分的兰色字体是如何实现的,假如我们有一个这样的DOM标签,需要应用自定义字体:

HTML Code:

<h2class="neuesDemo">Neues Bauen Demo</h2>

通过@font-face来定义自己的Web Font:

@font-face {
  font-family: 'NeuesBauenDemo';
  src: url('../fonts/neues_bauen_demo-webfont.eot');
  src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'),
   url('../fonts/neues_bauen_demo-webfont.woff') format('woff'),
   url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'),
   url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg');
  font-weight: normal;
  font-style: normal;
}

我在这里采用的是相对路径,当然大家也可以使用绝路径。到这里我们就需要把定义好的字体应用到我们实际页面中去:

h2.neuesDemo {
   font-family: 'NeuesBauenDemo'
}

效果:

看到上面的效果,我想大家会感到@font-face很神奇,同时也想争着做做看,可是一动手才发现,特殊字体我要怎样才能得到,那些.eot,.woff,.ttf,.svg这些字体格式又怎么获取呢?有些朋友可能就不知道如何运手了,那么我们就带着这些问题来一个全程完成的实例吧:

一、获取特殊字体:

我们拿下面这种single Malta字体来说吧:

要得到single Malta字体,不外乎两种途径,其一找到付费网站购买字体,其二就是到免费网站DownLoad字体。当然要给钱的这种傻事我想大家都不会做的,那我们就得到免费的地方下载,在哪有呢?我平时都是到Google Web FontsDafont.com寻找自己需要的字体,当然网上也还有别的下载字体的地方,这个Demo使用的是Dafont.com的Single Malta字体,这样就可以到这里下载Single Malta

Single Malta下载下来后,需要把它解压缩出来:

二、获取@font-face所需字体格式:

特殊字体已经在你的电脑中了,现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式,我们同样是需要第三方工具或者软件来实现,下面我给大家推荐一款我常用的一个工具fontsquirrel,别的先不多说,首跟我点这里进入到下面这个界面吧。

如果你进入页面没有看到上图,你可以直接点击导航:

如果你看到了上面的界面,那就好办了,我们来看如何应用这个工具生成@font-face需要的各种字体,先把我们刚才下载的字体上传上去:

上传后按下图所示操作:

现在从Font Squirrel下载下来的文件已经保存在你本地的电脑上了,接着只要对他进行解压缩,你就能看到文件列表如下所示:

大家可以看到,解压缩出来的文件格式,里面除了@font-face所需要的字体格式外,还带有一个DEMO文件,如果你不清楚的也可以参考下载下来的DEMO文件,我在这里不对DEMO说明问题,我主要是给大家介绍如何把下载下来的文件有价值的运用到我们的项目中。

例如在自己的本地创建了一个fontface项目:

为了让项目结构更清晰,我们在项目中单独创建一个fonts目录,用来放置解压缩出来@font-face所需的字体格式:

现在@font-face所需字体已经加载到本地项目,现在本地项目中的style.css中附上我们需要的@font-face样式

@font-face {
   font-family: 'SingleMaltaRegular';
   src: url('../fonts/singlemalta-webfont.eot');
   src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/singlemalta-webfont.woff') format('woff'),
    url('../fonts/singlemalta-webfont.ttf') format('truetype'),
    url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg');
   font-weight: normal;
   font-style: normal;
}

到这里为止,我们已经通过@font-face自定义好所需的SingleMalta字体,离最后效果只差一步了,就是把自己定义的字体应用到你的Web中的DOM元素上:

h2.singleMalta {
  font-family: 'SingleMaltaRegular'
}

效果:

看到上面的效果,那大家就知道我们实现成功了。那么关于@font-face帮你打造特殊效果的字体,到这里基本上就完成了,我在这里需要提醒使用者:

1、如果你的项目中是英文网站,而且项目中的Logo,Tags等应用到较多的这种特殊字体效果,我建议你不要使用图片效果,而使用@font-face,但是你是中文网站,我觉得还是使用图片比较合适,因为加载英文字体和图片没有多大区别,但是你加载中文字体,那就不一样了,因为中文字体太大了,这样会影响到项目的某些性能的优化;

2、致命的错误,你在@font-face中定义时,文件路径没有载对;

3、你只定义了@font-face,但并没有应用到你的项目中的DOM元素上;

以上几点都是在平时制作中常出现的问题,希望大家能小意一些,另外我们没有办法在购买所有字体,就算你实力雄厚,那也没有办法在一台服务器主机上放置你所有项目需要的字体。因此我给大家提供几个免费字体下载的网址:Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,前面几个链接是帮助你获取一些优美的怪异的特殊字体,但下面这个工具作用更是无穷的大,他能帮你生成@font-face所需要的各种字体,这工具就是Font Squirrel

最后在提醒一下,使用@font-face别的可以忘了,但Font Squirrel千万不能忘,因为他能帮你生成@font-face所需的各种字体格式。

Category: Web摘记 | Tags:
12
7
2011
3

CSS3变换入门 | CSS | 前端观察

CSS3变换入门

译自:CSS transitions 101

中文:CSS3变换入门

原作者:Jason Cranford Teague

译者:神飞

请尊重版权,转载请注明出处,多谢!


尽管人们期望在屏幕上有些改变,但是CSSHTML对页面中的交互能做的实在太少了,而那些还需要用代码来实现。

 

比如一个链接要么是这个颜色,要么是那个颜色;一个文本区域要么这么大,要么那么大;一张图片要么是透明的要么是不透明的;它们是从一个状态直接变到另一个状态——中间并没有过渡

这导致大部分网页有些生硬,因为元素只会很死板的切换或改变。

是的,你可以使用DHTML、jQuery或者自己编写JS来实现过度,但是这需要更多的代码来实现本应该非常简单的功能。

我们需要的是快速而简单的方法来给页面添加简单的变换(transition)效果。在本文中,你会发现很有用的关于CSS变换(transition)以及如何使用它们的信息。

几个月之前,我就建议设计师应该开始使用新的CSS 3 技术来实现一些它们渴求已久的基本的功能了——唯一的问题就是,这些技术没有一个能在IE中可用,包括IE8。

一些读者认为的那些技术将会有75%的用户看不到的观点是不靠谱的。

对那些读者我想说,“坐稳了”,因为我将要向你介绍另一个新的CSS属性,它允许你通过简单的几行代码来为任意元素添加很酷的变换效果。

CSS 变换刚刚在CSS 3中被引入,但是已经被添加为webkit的扩展了。也就是说,现在它们只能用于基于webkit内核的浏览器,包括Apple Safari和Google Chrome。不过从Opera 10.5 pre-Alpha版本来看,Opera将在下一个10.5中支持CSS 3变换。所以要看到本文中提到的实际效果,强烈建议你使用Chrome或者Safari 4来查看本文

CSS变换从哪里来?

变换曾经只是Webkit的一部分,而且是Safari UI能做而其它浏览器不能实现的一些很酷的东东的基础。

但是W3C CSS工作组曾经拒绝将变换添加到它的官方特性里面,一些成员坚持认为变换并非CSS属性而通过脚本来处理会更好。(内牛满面啊,我前一段也有类似的观点,也和高温讨论过,我认为CSS动画超出了表现的范围,交互的东西应该有脚本来实现,不过后来在鬼哥的点拨下,才开始有了新的认识——神飞)

但是很多设计师和开发人员,包括我自己,坚持认为这确实是样式——只是动态样式,而不是我们日常使用的传统的静态样式。

幸运的是,关于动态样式的争论已经成为过去。去年三月份,来自Apple和Mozilla的代表们开始将CSS变换模块添加到CSS 3特性里面,非常接近Apple已经添加到webkit中的表现。

关于设计增强的一个简要介绍

在我们继续之前,让我强调一点:永远不要让网站的功能依赖样式,如果该样式不是浏览器通用的话(也就是说,所有的常用浏览器都支持)。

对错过的同学再一次强调:永远不要让网站的功能依赖样式,如果该样式不是浏览器通用的话

这也就是说,你可以使用样式,比如变换,作为设计增强以提高用户体验——在不牺牲看不到它们的用户的可用性的前提下。如果你不用CSS变换照样能用而且用户依然能够完成他们的任务,就没问题,你就可以使用CSS变换。

首先,一些变换的想法

CSS变换将不会替代所有的DHTML,不过它会提供一些支持过渡的方法来提高您在浏览器中的设计。

你需要到下载Apple Safari 3+Google Chrome浏览器来查看这些变换效果。这两个浏览器都支持Mac和PC系统。

滚动效果

变换最常见的用法就是当用户的鼠标悬放到元素上的时候将元素高亮(无论是链接、表格、表单还是其它的什么元素),变换是为页面添加平滑的界面的非常棒的方法。

例一

下拉菜单

纯CSS菜单比较容易实现,而变换还可以让你给菜单添加下拉和高亮效果。

例二

动画

你可以在页面上的两点之间移动一个对象,然后使用变换给它添加动画效果。

例三

点击一下,不要放开!

 

变换、状态与动作

但是请稍等一下。在深入了解变换之前,我们需要理解一个元素能变换的不同的状态。

状态定义当前页面中相应的元素如何与用户进行交互,它们在CSS中通过伪类来定义,比如当用户的鼠标经过一个元素的时候,那个元素就会被hover伪类控制。

动态伪类起作用的元素描述
:link只有链接未访问的链接
:visited只有链接访问过的链接
:hover所有元素鼠标经过元素
:active所有元素鼠标点击元素
:focus所有可被选中的元素元素被选中
None所有元素所有元素的默认状态

变换通过改变不同元素状态之间的一个时间段内的样式来起作用。比如,一个元素的默认状态的颜色值将会在呈现hover状态的色彩值之前逐渐显示色盘中的中间颜色。

一个简单的变换

让我们假设一个简单的变换,在用户的鼠标经过一个链接的时候,将颜色从一个变换成另外一个。与其它CSS属性一样,变换也是直接添加到要使用它的选择器中。该属性可以采用下面的4个值。

CSS property

被变换的属性(比如, color)。看一下下面的表格了解所有可以被变换的CSS属性列表。

Duration

变换持续的时间,通常以秒来计算(比如, .25s).

Timing function

允许你控制持续的时间的计算方式。与其使用一个简单的线性计算,你可以使变换加速(渐入)或者减速(淡出),或者甚至specify a beat or count (比如,linear). More on this later in the article.

Delay

在动作和变换开始之间等待多久,通常用秒来表示(比如, .1s)。如果你不想延迟,该值可省略。

因为变换属性始于Webkit扩展,我们不得不同时使用transition 和-webkit-transition 属性以向后兼容。

让我们首先提阿贾这这些属性到:hover 伪类中:

1
2
3
4
5
a:hover {
   color: red;
   -webkit-transition: color .25s linear;
   transition: color .25s linear;
}

那么现在,当鼠标经过一个链接,不会直接从蓝色跳转到红色,而是用四分之一秒的时间逐渐变换它们的中间颜色(过渡颜色)。

当然,我们也希望变换回到默认的链接颜色,那么我们可以添加一个变换到:link (以及:visited)伪类上,并在它褪去之前添加一个简单的延迟(十分之一秒) :

1
2
3
4
5
a:link, a:visited {
   color: blue;
   -webkit-transition: color .25s linear .1s;
   transition: color .25s linear .1s;
}

添加多重变换

因为一个变换就是一个CSS属性,如果你在同一个CSS规则中添加多个变换的实例,那么最后的那个将会覆盖前面的,而不是添加它们。所以在下面的规则中,唯一的变换将是背景色彩:

1
2
3
4
5
6
7
8
a:hover {
  color: red;
  background-color: rgb(235,235,185);
  -webkit-transition: color .25s linear;
  transition: color .25s linear;
  -webkit-transition: background-color .15s linear .1;
  transition: background-color .15s linear .1;
}

当然,这并不是说,不能添加多重变换——多重变换可以在同一个变换属性定义中用逗号隔开:

1
2
3
4
5
6
a:hover {
  color: red;
  background-color: rgb(235,235,185);
   -webkit-transition: color .25s linear, background-color .15s linear .1s;
  transition: color .25s linear, background-color .15s linear .1s;
 }

这条定义将产生色彩和背景色的双重变换。

什么可以被变换?

几乎所有的有色彩、大小或位置等组件的CSS属性,包括许多新添加的CSS 3属性, 都可以应用变换。一个值得注意的例外是box-shadow。

来自W3C的变换的说明,这里是一个可以赋予变换的CSS属性的列表,附带转变的对象,我也高亮了一些比较有用的属性。

CSS属性改变的对象
background-color色彩
background-image只是渐变
background-position百分比,长度
border-bottom-color色彩
border-bottom-width长度
border-color色彩
border-left-color色彩
border-left-width长度
border-right-color色彩
border-right-width长度
border-spacing长度
border-top-color色彩
border-top-width长度
border-width长度
bottom百分比,长度
color色彩
crop百分比
font-size百分比,长度
font-weight数字
grid-*数量
height百分比,长度
left百分比,长度
letter-spacing长度
line-height百分比,长度,数字
margin-bottom长度
margin-left长度
margin-right长度
margin-top长度
max-height百分比,长度
max-width百分比,长度
min-height百分比,长度
min-width百分比,长度
opacity数字
outline-color色彩
outline-offset整数
outline-width长度
padding-bottom长度
padding-left长度
padding-right长度
padding-top长度
right百分比,长度
text-indent百分比,长度
text-shadow阴影
top百分比,长度
vertical-align百分比,长度,关键词
visibility可见性
width百分比,长度
word-spacing百分比,长度
z-index正整数
zoom数字

变换计时与延迟

使用变换,你可以改变变换的速率,在开始的时候较慢然后在结束的时候加速,反之亦然,或者之间的任何事情。CSS变换有5个计时的关键词,同时也允许你自己定义你自己的计时曲线。

名称如何工作
cubic-bezier(x1, y1, x2, y2)X 和 Y 值在0到1之间,以定义用于Time function的贝塞尔曲线的形状。
linear均速
ease逐渐慢下来
ease-in加速(渐入)
ease-out减速(淡出)
ease-in-out加速然后减速

全部变换?

变换将很快成为所有网站的标准操作方式,从而增强用户界面的体验。

为了给你的整个网站添加一个普遍的变换,一个做法就是添加一个变换到全体选择器,类似CSS reset。下面的代码会给页面中的所有元素添加一个默认的变换,从而允许你保持一个统一的变换效果:

1
2
3
4
5
6
7
8
9
10
*:link, *:visited, *:hover, *:active, *:focus {
-webkit-transition:
	color .25s linear,
	background-color .25s linear,
	border-color .25s linear;
transition:
	color .25s linear,
	background-color .25s linear,
	border-color .25s linear;
}

一个反对全部变换,同时明确反对使用全体选择器作为CSS reset的争论是,将一个样式用到页面的所有元素会减缓页面的渲染。然而,我并没有发现任何有关与此的证据。有人知道吗?

OK,其实CSS 变换就这么简单,它并不难理解,而且你也不用些大量的JS脚本来实现它,这很方便实用,多做几次练习,你就可以熟练的使用它了。

译注:本文原文题目为 CSS transitions 101,101这个数字比较不好理解,其实美国大学第一门课程通常编号为101,所以101一般表示入门、初级的意思。另外关于 transition 这个词的翻译,我之前是翻译成“转换”,但是这个翻译很别扭,在twitter上和 @gaowhen@ghostzhang@ivane@hiwanz@cnjoel等人讨论后,觉得翻译成“变换”更合适一些,多谢各位。——神飞

Category: Web摘记 | Tags:
12
5
2011
0

CSS3 Transitions, Transforms和Animation使用简介与应用展示(自网络

CSS3 Transitions, Transforms和Animation使用简介与应用展示 « 张鑫旭-鑫空间-鑫生活

CSS3 Transitions, Transforms和Animation使用简介与应用展示

by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=1268

一、前言兼目录索引

《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范,各类清规戒律谨记与严守。但是,后来呢,花姑娘送到跟前,什么戒律都成了浮云,禁不住诱惑享乐去了。啊,我现在似乎有类似的感觉,本来不打算深究CSS3的一些属性的,但是其效果以及实际应用价值之诱惑实在巨大,还是抵挡不住,折腾下了这篇文章。劳民伤财的工程越少越好,所以,这里干脆把CSS3 动画相关的几个属性凑合到一起了,这样,至少一年半载内不会再写相关的文章了。

CSS3动画相关的几个属性是:transition, transform, animation;我分别理解为过渡,变换,动画。虽意义相近,但具体角色不一。就像是SHE组合,虽然都是三个女生,都唱同一首歌,但有负责高音,和擅长低音的,具体工作于角色还是有差异的。//zxx:貌似那个谁谁烧伤了,真是不幸~~

transition指过渡啦,就是从a点都b点,就像过江坐渡轮,是有时间的,是连续的,一般针对常规CSS属性;transform指变换,就那几个固定的属性:旋转啦,缩放啦,偏移啦什么的,与独立于远房亲戚transition使用,但是,效果就是很干涩机械的旋转移动。要是配合transition属性,旋转啊什么的,就会很平滑。animation最先安家于Safari浏览器,自成一家,与transition和transform有老死不相往来之感,但是要说单挑的话,animation要比transition厉害些。

目录索引
1. 话说Transitions这厮
2. 话说Transforms这货
3. 话说Animation这物
4. 更实际综合的效果展示
5. 浏览器支持情况
6. 参考文章及延伸阅读
7. 结语这东西

二、话说Transitions这厮

CSS3 transition属性早在去年我的“CSS3 transition实现超酷图片墙动画效果”一文中就有过介绍。其作用是:平滑的改变CSS的值。无论是点击事件,焦点事件,还是鼠标hover,只要值改变了,就是平滑的,就是动画。于是乎,只要一个整站通用的class,就可以很轻松的渐进增强地实现动画效果,超有实用价值的说。

transition有下面些具体属性:

transition-property :* //指定过渡的性质,比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过渡类型,有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

例如下面这个很简单的例子:

.trans {
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
}
.trans:hover {
    background-color: #486AAA;
    color: #fff;
}

结果在Safari或是Chrome浏览器下可以看到如下效果:
背景色过渡效果 张鑫旭-鑫空间-鑫生活

如果你正在使用或有webkit核心的浏览器,您可能狠狠地点击这里:webkit内核浏览器下背景色过渡demo

就跟CSS2的background属性一样,平时我们都不会像上面一样,把transition的属性一个一个摊开写,而是合并。

还是上面的例子,我们将transition属性合并,并扩展几个浏览器,如下CSS代码:

.trans {
    ...
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
.trans:hover {
    background-color: #486AAA;
    color: #fff;
}

如下HTML代码:

<a href="/" class="trans">经过我~~</a>

结果如下截图(截自Opera 10.6浏览器):
Opera下背景色过渡 张鑫旭-鑫空间-鑫生活

transition中的transition-timing-function属性让人心存芥蒂,其一堆ease相关的值(linear | ease-in | ease-out | ease-in-out | cubic-bezier),不太容易让人理解与记住。尤其其中cubic-bezier就是指贝塞尔曲线,与复杂的数学扯上的关系,不禁勾起了高中时数学的梦魇。

其实呢,理一理,也还好。首先cubic-bezier这个基本上就不用鸟了,99%的情况都用不到这个东西,所以,难得清闲,直接pass掉。linear很好记,线性嘛。至于ease-in | ease-out | ease-in-out,就是指缓动效果啦,说白了就是指开始时候慢慢动呢还是结束的时候慢慢动。那么in和out那个先慢慢动呢?啊,我们可以联想记忆,很好记的。我们都知道OOXX吧,ease-in中的in就表示进入,进入的时候显然一开始都是慢的,等瞄准就绪后才能快速冲刺进入,于是ease-in表示先慢后快;ease-out其out表示出来,出来肯定是先快后慢的,因为出来时临近洞口速度肯定要降下来,免得跑出来乱了节奏,于是ease-out表示先快后慢;最后,很好理解的,ease-in-out表示一进一出,也就是先慢后快再慢。

有些纯洁的人可能不太明白上面邪恶的文字表示的含义,没关系,我们可以看图说话,下面截自不同运动曲线下同一时间的截图,从中可以看到哪个先快,哪个先慢(注意:最后都是同时到达):
不同过渡值效果 张鑫旭-鑫空间-鑫生活

要是你觉得上面的静态的截图表意不够具体,您可以狠狠地点击这里:不同缓动类效果demo(Opera/Chrome/Safari)

您可以观察方块的运动规律,知道不同缓动名称的效果是如何的。

以上就是transition的简单介绍,要查看更详细更权威的信息,可以去官方页面查看

三、话说transform这货

transform指变换,使用过photoshop的人应该知道里面的Ctrl+T自由变换。transform就是指的这个东西,拉伸,压缩,旋转,偏移。见下面示例代码:

.trans_skew { transform: skew(35deg); }
.trans_scale { transform:scale(1, 0.5); }
.trans_rotate { transform:rotate(45deg); }
.trans_translate { transform:translate(10px, 20px); }

结果就有类似下面的些效果:
transform的些效果 张鑫旭-鑫空间-鑫生活

您可以狠狠地点击这里:transform些属性效果demo

transform属性要是加上transition的过渡特性,那可就是如虎添翼,樱木花道配上流川枫啊,可以产生不少美妙的火花,例如下面这个例子,关键代码如下:

.trans_effect {
    -webkit-transition:all 2s ease-in-out;
    -moz-transition:all 2s ease-in-out;
    -o-transition:all 2s ease-in-out;
    -ms-transition:all 2s ease-in-out;
    transition:all 2s ease-in-out;
}
.trans_effect:hover {
    -webkit-transform:rotate(720deg) scale(2,2);
    -moz-transform:rotate(720deg) scale(2,2);
    -o-transform:rotate(720deg) scale(2,2);
    -ms-transform:rotate(720deg) scale(2,2);
    transform:rotate(720deg) scale(2,2);
}

结果在Chrome预计Safari浏览器下就有了祖玛里面青蛙挂掉时的缩放旋转效果了:
transform动画默认 张鑫旭-鑫空间-鑫生活
鼠标经过时:
transform动画进行时截图 张鑫旭-鑫空间-鑫生活

如果你手上有webkit核心的浏览器,可以狠狠地点击这里:酷酷的缩放旋转动画demo

transform还支持3D变换,怎一酷字了得。由于某些不可告人的原因,这里就不展示了。故,transform部分到此结束。

四、话说animations这物

截止2010年11月份,animations这物似乎还是只在webkit核心的浏览器上起作用,所以本段落的一些demo效果,需在webkit核心浏览器下查看,不在重复赘述。

animations的介绍以实例驱动。先看简单的缩放扩展动画实例:
您可以狠狠地点击这里:animations水平弹性缩放变色动画

效果大致如下,默认是个很规矩很安静的矩形框:
安静的矩形 张鑫旭-鑫空间-鑫生活

鼠标移上去后显示慢慢的宽度增加,然后突然快速的宽度增加,同时背景色加深,下为动画过程中的截图:
animate动画过程中截图 张鑫旭-鑫空间-鑫生活

关键的CSS代码如下:

@-webkit-keyframes resize {
    0% {
        padding: 0;
    }
    50% {
        padding: 0 20px;
        background-color:rgba(190, 206, 235, 0.2);
    }
    100% {
        padding: 0 100px;
        background-color:rgba(190, 206, 235, 0.9);
    }
}
.anim_box:hover {
    -webkit-animation-name: resize;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 4;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
}

此例子中,鼠标悬停时动画只执行4次。

animations不仅适用于CSS2中的属性,CSS3也是支持的,例如box-shadow盒阴影效果,所以,我们可以实现外发光效果的。使用过web qq的人应该有印象,当鼠标移到聊天对象脑袋上的时候会有蓝色外发光的动画,但是那是gif动画图片实现的(现在自动跳转到web qq 2.0已看不到效果)。gif动画实现的效果类似于下面(很兼容):

摸左边张含韵

但是gif的重用性有限而且制作破费功夫,如果简单几行CSS代码就可以实现高性能高扩展的效果岂不更加,现在animations就可以搞定这一些。

您可以狠狠地点击这里:animations下的外发光动画demo

发光效果如下:
外发光效果demo 张鑫旭-鑫空间-鑫生活

主要的CSS代码如下:

@-webkit-keyframes glow {
    0% {
        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);
        border-color: rgba(160, 179, 214, 0.5);
    }
    100% {
        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 1.0), 0 0 18px rgba(0, 140, 255, 1.0);
        border-color: rgba(160, 179, 214, 1.0);
    }
}
.anim_image {
    padding:3px;
    border:1px solid #beceeb;
    background-color:white;
    -moz-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
    -webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
    box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
}
.anim_image:hover {
    background-color:#f0f3f9;
    -webkit-animation-name: glow;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
}

animation展示结束,的说~~

五、更实际综合的效果展示

首先,鼠标悬停的淡入淡出效果。

您可以狠狠地点击这里:鼠标悬停的淡入淡出demo

目前,非webkit核心浏览器下面,鼠标悬停仅仅是透明与不透明,只有在webkit核心浏览器下面才有平滑的动画效果,如下图:
淡入淡出过程截图 张鑫旭-鑫空间-鑫生活

相关主要CSS代码如下:

.anim_fade_image {
    position:absolute;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.anim_fade_image:hover, .anim_fade_image_hover {
    opacity:0;
    filter: alpha(opacity=0);
}

当然,我们也可以辅助JavaScript,添加点击图片淡出淡出。JavaScript负责的只是终了的透明度值,中间的动画直接交给CSS就可以了。

您可以狠狠地点击这里:点击下的淡入淡出demo

效果类似,就不展示截图了,代码类似,就不展示代码了。

当然,我们还可以做些小动画,让图片自动淡入淡出的播放,不停地播放。要不停播放只要将animation-iteration-count设为infinite(无限)就ok的啦。于是,我们修改下CSS代码,如下:

@-webkit-keyframes fadeInOut {
    0% {
        opacity:1;
     }
    25% {
        opacity:0;
    }
    50% {
        opacity: 0;
    }
    75% {
        opacity:1;
    }
}
.anim_fade_image {
    position:absolute;
    -webkit-animation-name: fadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 12s;
    -webkit-animation-direction: alternate;
}

于是乎,图片就稀里糊涂的不停地淡入淡出了。您有兴趣可以狠狠地点击这里:图片无限自动fade效果demo

以上些效果都是与透明度打交道的。下面这个实例是与图片位置,比例尺寸挂钩的,聪明的你是不是想到了transform属性呢。对的,transform+tranisition,双剑合璧,天下无敌。下面这个效果是很酷很酷的,以前基本上只能在Flash中可以看到。当当当当,您可以狠狠地点击这里:图片轮转缩放显示动画demo(鼠标经过图片有惊喜的说,非webkit绕道,搜狗等浏览器可切换到高速模式亦可)。

效果截图如下,为动画过程中:
图片大小轮换动画截图 张鑫旭-鑫空间-鑫生活

相关的核心的CSS代码如下:

.anim_image {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    cursor:pointer;
}
.anim_image_top {
    position: absolute;
    -webkit-transform: scale(0, 0);
    opacity: 0;
    filter: Alpha(opacity=0);
}
.anim_box:hover .anim_image_top , .anim_box_hover .anim_image_top {
    opacity: 1;
    filter: Alpha(opacity=100);
    -webkit-transform: scale(1, 1);
    -webkit-transform-origin: top right;
}
.anim_box:hover .anim_image_bottom, .anim_box_hover .anim_image_bottom {
    -webkit-transform: scale(0, 0);
    -webkit-transform-origin: bottom left;
}

HTML代码如下:

<div id="testBox" class="anim_box">
    <img class="anim_image anim_image_top" src="http://image.zhangxinxu.com/image/study/p/s200/ps6.jpg" />
    <img class="anim_image anim_image_bottom" src="http://image.zhangxinxu.com/image/study/p/s200/ps4.jpg" />
</div>

当然,这里应用transform的旋转,水平垂直缩放效果也是很赞的,如下图所示:
图片旋转切换动画截图 张鑫旭-鑫空间-鑫生活

您可以狠狠地点击这里:图片旋转切换动画demo

CSS代码与上面的例子大同小异,这里就不展示了,您可以去demo页面查看。

下面,展示的是更加实际更加靠谱的例子,选项卡切换
我们平时的选项卡切换基本上都是很生硬的,直接啪啪啪,切换过来了,没有点过渡啊什么的(毕竟写JavaScript动画成本较高),现在,有了transitions,实现过渡效果就是几行CSS代码的事情,不多说了,直接上实例。

您可以狠狠地点击这里:平滑选项卡切换demo

在demo中,点击下面的几个图片文字按钮状的东西,就可以看到图片水平滑过来,再滑过去,再滑过来,让人爱不释手啊。下图为截图:
选项卡平滑切换demo 张鑫旭-鑫空间-鑫生活

CSS其作用的就是那个值以all开头的transition属性,如下:

.trans_image_box {
    width: 2000px;
    height: 300px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

transitionCSS代码组很吃得开的。

只要是CSS值变换的,只要是额外有transition属性设置的,都是平滑效果,都是动画。所以,我们看看如何以动画形式实现经典的手风琴切换效果。

您可以狠狠地点击这里:手风琴效果demo(点击水平标题有惊喜)

下为截图:
手风琴效果截图 张鑫旭-鑫空间-鑫生活

其中JavaScript扮演的角色只是变变高度值而已,动画,都是CSS一人挑大梁完成的,很赞吧。下面的代码就是动画效果那段div上的CSS代码:

.acco_content {
    height:0;
    padding:0 10px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    overflow:hidden;
}

JavaScript的作用不过是变变高度而已:

$(".acco_title").click(function() {
    var rel = this.lang, cl = this.className, oOn = $(".acco_title_on")[0], rel_on = oOn.lang;
    if (!/on/.test(cl) && rel && rel_on) {
        $("#" + rel)[0].style.height = "140px";
        $("#" + rel_on)[0].style.height = "0";
        this.className = "acco_title acco_title_on";
        oOn.className = "acco_title";
    }
});

六、浏览器支持情况

CSS Transitions

首次引入

  • Safari 3.2: 13/11/2008
  • Firefox 4.0: Late 2010
  • Chrome 1.0: 02/09/2008
  • Opera 10.5: 02/03/2010

CSS 2D Transformations

首次引入

  • Safari 3.2: 13/11/2008
  • Firefox 3.5: 30/06/2009
  • Chrome 1.0: 02/09/2008
  • Opera 10.5: 02/03/2010
  • Internet Explore 9: 09/2010

CSS Animations

首次引入

  • Safari 4.0: 11/06/2008
  • Chrome 1.0: 02/09/2008

CSS 3D Transformations

首次引入

  • Safari 4.0: 11/06/2008
  • Chrome: 28/08/2010

七、参考文章以及延伸阅读

八、差点忘掉的结语

虽然目前很多浏览器还没有完全支持transition, transform, animation这些属性,但是在渐进增强的原则下,其高效的动画实现方式还是有很实际的应用价值的。你可以不妨试试,点亮你的页面。内容较多,时间有限,文章难免有表述不准确的地方,欢迎指正。

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=1268

(本篇完)

Category: Web摘记 | Tags:

Host by is-Programmer.com | Power by Chito 1.3.3 beta | Theme: Aeros 2.0 by TheBuckmaker.com