Hi，大家好，我叫Toby Pitman，Chris曾邀请我写一篇关于最近我在论坛上发的一些实验成果，于是当我在WebKit blog和saw an article上看一些新的CSS3动画时，有一个rotate属性深深地吸引了我的眼球，于是就开始着手写这篇文章了。我当时就在思考什么东西可以在网页上旋转呢（貌似GIF动画图片可以），于是我有个点子--是的，时钟不就是可以旋转的吗！开始！

CSS3 Transform:rotate

Transform:rotate是CSS3的一个新特性，它可以让你...当然，是实现一些旋转的玩意儿啦。Transform也可以让你在网页上实现缩放、倾斜、移动对象。而且上面的这些都可以通过Transition属性实现动画效果。

听起来很熟悉么？是的，当然，和以前一样，我们将依然结合jQuery来实现页面上元素的动画效果。因为使用jQuery可以方便的操作CSS从而 得到动画效果。联想一下a:hover效果，你就会对如何实现这个例子产生一些想法。它远没有jQuery和Mootools那么强大，但已经足够做一些 很酷的东西了。

请注意：这个时钟例子只能运行在Firefox 3.1+、Safari 3+和Chrome浏览器上。

时钟图片

首先，我们需要准备一些图片来作为时钟的图形界面。这里我们用一张钟盘图片和三张指针图片，其中运动的指针我们是用photoshop切割出来的600×30的图片，并将其竖直放置。然后利用rotate属性让其绕中心点旋转。当然，指针使用的是透明的PNG格式图片。

HTML标记

这个时钟的HTML标记非常简单，只用了ul列表，每一个列表项（li）分别对应着3根运动指针，并且给其分配相应的id，代码如下：

<ul id="clock">
        <li id="sec"></li>
        <li id="hour"></li>
        <li id="min"></li>
</ul>

#clock {
        position: relative;
        width: 600px;
        height: 600px;
        margin: 20px auto 0 auto;
        background: url(clockface.jpg);
        list-style: none;
}
 
#sec, #min, #hour {
        position: absolute;
        width: 30px;
        height: 600px;
        top: 0px;
        left: 285px;
}
 
#sec {
        background: url(sechand.png);
        z-index: 3;
}
 
#min {
        background: url(minhand.png);
        z-index: 2;
}
 
#hour {
        background: url(hourhand.png);
        z-index: 1;
}

好了，下面我们的jQuery就要上场了。

The jQuery JavaScript

这里Javascript主要完成以下工作：

• 获取当前的时间
• 计算并添加每个元素的CSS样式（旋转角度）
• 周期性地设置CSS样式

获取时间

你也许会将PHP中的时间和日期等同起来，刚开始的时候我的第一想法也是利用PHP，然而后来我发现javascript中也有构造日期和时间的功能函数。只是需要注意的是javascript获取的是本地时间并不是服务器时间。

首先我将用Date()函数获取日期信息并将其赋给一个变量，我们可以通过GetSeconds(), GetMinutes()或GetHours()获取3根指针的信息，如下代码：

var seconds = new Date().getSeconds();

获取角度

接下来我将计算每根指针的角度。我们将每一周分成60等分，所以只要360/60就得到每一份是6，这意味着每一秒钟或者每一分钟指针都将前进6度的角度。我们将计算结果保存到另一个变量中去，代码如下：

var sdegree = seconds * 6;

var hdegree = hours * 30 + (mins / 2);

例如：

设置样式

下面是CSS3 rotate的CSS样式表代码：

#sec {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
}

$("#sec").css({"-moz-transform" : "rotate(45deg)", "-webkit-transform" : "rotate(45deg)"});

var srotate = "rotate(" + sdegree + "deg)";

$("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});

所有的jQuery代码如下：

$(document).ready(function() {
 
      setInterval( function() {
      var seconds = new Date().getSeconds();
      var sdegree = seconds * 6;
      var srotate = "rotate(" + sdegree + "deg)";
 
      $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
 
      }, 1000 );
 
      setInterval( function() {
      var hours = new Date().getHours();
      var mins = new Date().getMinutes();
      var hdegree = hours * 30 + (mins / 2);
      var hrotate = "rotate(" + hdegree + "deg)";
 
      $("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
 
      }, 1000 );
 
      setInterval( function() {
      var mins = new Date().getMinutes();
      var mdegree = mins * 6;
      var mrotate = "rotate(" + mdegree + "deg)";
 
      $("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});
 
      }, 1000 );
 
});

这样，我们的时钟就可以工作了。

在线实例

CSS代码如下：

<style type='text/css'>
                     #warped {position: relative; display: block; width:588px; height:440px;}

                     #warped>span[class^=w]:nth-of-type(n+0){display:block; position:absolute;
                     -moz-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -o-transform-origin:50%
                     100%; -ms-transform-origin:50% 100%; transform-origin:50% 100%; }

                     #warped span{font-family:'Abel';font-size:38px;font-weight:regular;font-style:normal;
                     line-height:0.65; white-space:pre; overflow:visible; padding:0px;}

                     #warped .w0 {-moz-transform: rotate(-7.85rad);-webkit-transform: rotate(-7.85rad);-o-transform:
                     rotate(-7.85rad);-ms-transform: rotate(-7.85rad); transform: rotate(-7.85rad);
                     width: 38px; height: 25px; left: 21px; top: 193.8px;}

                     #warped .w1 {-moz-transform: rotate(-7.65rad);-webkit-transform: rotate(-7.65rad);-o-transform:
                     rotate(-7.65rad);-ms-transform: rotate(-7.65rad); transform: rotate(-7.65rad);
                     width: 38px; height: 25px; left: 25.39px; top: 151.85px;}

                     #warped .w2 {-moz-transform: rotate(-7.37rad);-webkit-transform: rotate(-7.37rad);-o-transform:
                     rotate(-7.37rad);-ms-transform: rotate(-7.37rad); transform: rotate(-7.37rad);
                     width: 38px; height: 25px; left: 40.09px; top: 111.13px;}

                     #warped .w3 {-moz-transform: rotate(-7.04rad);-webkit-transform: rotate(-7.04rad);-o-transform:
                     rotate(-7.04rad);-ms-transform: rotate(-7.04rad); transform: rotate(-7.04rad);
                     width: 38px; height: 25px; left: 65.95px; top: 77.29px;}

                     #warped .w4 {-moz-transform: rotate(-6.75rad);-webkit-transform: rotate(-6.75rad);-o-transform:
                     rotate(-6.75rad);-ms-transform: rotate(-6.75rad); transform: rotate(-6.75rad);
                     width: 21px; height: 25px; left: 102.45px; top: 57.78px;}

                     #warped .w5 {-moz-transform: rotate(-6.55rad);-webkit-transform: rotate(-6.55rad);-o-transform:
                     rotate(-6.55rad);-ms-transform: rotate(-6.55rad); transform: rotate(-6.55rad);
                     width: 17px; height: 25px; left: 126.79px; top: 49.23px;}

                     #warped .w6 {-moz-transform: rotate(-6.34rad);-webkit-transform: rotate(-6.34rad);-o-transform:
                     rotate(-6.34rad);-ms-transform: rotate(-6.34rad); transform: rotate(-6.34rad);
                     width: 25px; height: 25px; left: 148.4px; top: 45.15px;}

                     #warped .w7 {-moz-transform: rotate(-6.13rad);-webkit-transform: rotate(-6.13rad);-o-transform:
                     rotate(-6.13rad);-ms-transform: rotate(-6.13rad); transform: rotate(-6.13rad);
                     width: 16px; height: 25px; left: 177.98px; top: 46.5px;}

                     #warped .w8 {-moz-transform: rotate(-5.94rad);-webkit-transform: rotate(-5.94rad);-o-transform:
                     rotate(-5.94rad);-ms-transform: rotate(-5.94rad); transform: rotate(-5.94rad);
                     width: 20px; height: 25px; left: 198.23px; top: 52.26px;}

                     #warped .w9 {-moz-transform: rotate(-5.65rad);-webkit-transform: rotate(-5.65rad);-o-transform:
                     rotate(-5.65rad);-ms-transform: rotate(-5.65rad); transform: rotate(-5.65rad);
                     width: 38px; height: 25px; left: 219.49px; top: 68.52px;}

                     #warped .w10 {-moz-transform: rotate(-5.31rad);-webkit-transform: rotate(-5.31rad);-o-transform:
                     rotate(-5.31rad);-ms-transform: rotate(-5.31rad); transform: rotate(-5.31rad);
                     width: 38px; height: 25px; left: 249.06px; top: 99.72px;}

                     #warped .w11 {-moz-transform: rotate(-5.01rad);-webkit-transform: rotate(-5.01rad);-o-transform:
                     rotate(-5.01rad);-ms-transform: rotate(-5.01rad); transform: rotate(-5.01rad);
                     width: 38px; height: 25px; left: 267.04px; top: 138.14px;}

                     #warped .w12 {-moz-transform: rotate(-4.78rad);-webkit-transform: rotate(-4.78rad);-o-transform:
                     rotate(-4.78rad);-ms-transform: rotate(-4.78rad); transform: rotate(-4.78rad);
                     width: 38px; height: 25px; left: 274.56px; top: 180.94px;}

              </style>

<div id='warped'>
<span class='w0'>欢</span>
<span class='w1'>迎</span>
<span class='w2'>关</span>
<span class='w3'>注</span>
<span class='w4'>H</span>
<span class='w5'>T</span>
<span class='w6'>M</span>
<span class='w7'>L</span>
<span class='w8'>5</span>
<span class='w9'>中</span>
<span class='w10'>文</span>
<span class='w11'>网</span>
<span class='w12'>站</span>
</div>

本文链接：http://www.itivy.com/html5/archive/2012/4/14/css3-text-path.html

如果我们分解这个Windows 7开始菜单，我们会得到1个div，2个ul列表，1组链接以及一些icon小图标，我们可以一起来看看具体的效果。下面是简单的制作过程及部分代码

菜单容器（Container）

这个容器命名为startmenu ，里面包含了2个ul列表。同时用3种颜色实现线性渐变：顶部是浅蓝色，中间是深蓝色，底部是接近浅蓝色的其他颜色。接着用rgba()实现透明度，rgba()有四个参数，前3个表示红、绿、蓝，第4个表示透明度，两条边线使用了box-shadow属性。

#startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px;
             -moz-border-radius:5px;-webkit-border-radius:5px; position:relative;
             box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
             background-color:#619bb9;
             background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
             background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); }

这是一个白色背景的ul列表，两条边线用了border和box-shadow属性。程序链接包含了几个小图标以及程序名称，同时做了一个鼠标滑过渐变投影的效果。

#programs, #links {float:left; display:block; padding:0; list-style:none;}
#programs { background:#fff; border:solid 1px #365167; margin:7px 0 7px 7px;
            box-shadow: 0 0 1px #fff; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff;
            -moz-border-radius:3px;-webkit-border-radius:3px;}
#programs a { border:solid 1px transparent; display:block; padding:3px; margin:3px; 
              color:#4b4b4b; text-decoration:none; min-width:220px;}
#programs a:hover {border:solid 1px #7da2ce; 
             -moz-border-radius:3px; -webkit-border-radius:3px;
             box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
             background-color:#cfe3fd;
             background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);
             background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));}
#programs a img {border:0; vertical-align:middle; margin:0 5px 0 0;}

上面提到的链接菜单非常简单，但是这里我们可以做出更炫的鼠标滑过效果。每一个链接菜单都有3种颜色的水平渐变：左边和右边是深蓝色，中间用稍微淡一点的蓝色。现在，不像程序菜单中的链接那样，这个链接内部用<span>来包含菜单的文字，同时span元素还拥有多种垂直线性渐变。

#links {margin:7px; margin-top:-30px;}
#links li.icon {text-align:center;}
#links a {border:solid 1px transparent; display:block; margin:5px 0; position:relative;
              color:#fff; text-decoration:none; min-width:120px;}
#links a:hover {border:solid 1px #000;
             -moz-border-radius:3px; -webkit-border-radius:3px;
             box-shadow: 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
             background-color:#658da0;
             background: -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55));
             background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384)); 
             }
#links a span { padding:5px; display:block; }
#links a:hover span  { background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5));
            background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent), 
            color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5))); }

这个CSS3制作的Windows 7开始菜单例子可以在Firefox 3.6+, Safari 和 Chrome浏览器中运行，Opera和IE中的效果就不行了，也许我可以继续优化一下，欢迎大家提出建议和意见。

本文译自：Create Windows 7 start menu using CSS3 only
译文链接：http://www.itivy.com/html5/archive/2012/4/14/css3-windows-7-start-menu.html
转载请保留，谢谢！

方案1，图片辅助

传统做法是直接用动态的GIF图片，这个方案是用PNG图片加上背景颜色来模拟静止的加载图片，然后利用css中的animation处理图片的旋转。相比传统方案，这个方案的好处是可以直接通过修改CSS来改变背景色，可以修改大小和旋转速度。如下是具体的CSS代码：

@-webkit-keyframes rotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}
p#spinner {
  height: 30px;
  width: 30px;
  overflow: hidden;
  background: #000;
  -webkit-mask-image: url("data:image/png[...]");
  -webkit-mask-size: 30px 30px;
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

具体效果查看这里：Demo1

这个方案，只有safari可以很好地支持。chrome下支持不是很好，所以这是一个不太成熟的方案。

方案2， 纯CSS实现

方案的思路是，首先用css渲染12个静态的bar，每个bar间隔30度的角度，给每个bar添加背景变淡的动画，但是相邻bar的动画效果延迟1/12秒，来保证12个bar是按顺序变亮然后变暗。从而模拟出旋转的效果。

这个旋转效果是伪旋转，所有的bar都没有真正做到旋转。

@-webkit-keyframes fade {
    from {opacity: 1;}
    to {opacity: 0.25;}
}
div.spinner {
    position: relative;
    width: 30px;
    height: 30px;
    display: inline-block;
}
div.spinner div {
    width: 20%;
    height: 40%;
    background: #000;
    position: absolute;
    left: 100%;
    top: 100%;
    opacity: 0;
    -webkit-animation: fade 1s linear infinite;
    -webkit-border-radius: 30px;
}
div.spinner div.bar1 {
    -webkit-transform:rotate(0deg) translate(0, -142%);
        -webkit-animation-delay: 0s;
}
[......]
div.spinner div.bar12 {
    -webkit-transform:rotate(330deg) translate(0, -142%); 
    -webkit-animation-delay: -0.0833s;
}

具体效果查看这里：Demo2

safari和chrome都能很好地渲染这个效果，并且也很容易定义实际大小，因为所有的bar的高度，宽度有是用百分比来定义的。缺点也很明显，需要定义12个bar，并且每个bar都要定义独立的css，相对来说html和css的代码量有点多。

方案3，这个方案类似sencha touch中实现的效果

方案的基本思想是：首先利用html和css呈现4个bar，再通过css的伪元素: before和：after定义每个bar的前后内容，这样使得由原始的4个bar产生12个bar的效果，其次通过css设置让12个bar的透明度逐 渐递减，最后应用css3中旋转动画达到实际loading的效果。

.x-loading-spinner {
    font-size: 250%;
    height: 1em;
    width: 1em;
    position: relative;
    -webkit-transform-origin: 0.5em 0.5em;
}
.x-loading-spinner > span, .x-loading-spinner > span:before, .x-loading-spinner > span:after {
    display: block;
    position: absolute;
    width: 0.1em;
    height: 0.25em;
    top: 0;
    -webkit-transform-origin: 0.05em 0.5em;
    -webkit-border-radius: 0.05em;
    border-radius: 0.05em;
    content: " ";
}
.x-loading-spinner > span.x-loading-top {
    background-color: rgba(170, 170, 170, 0.99);
}
.x-loading-spinner > span.x-loading-top::after {
    background-color: rgba(170, 170, 170, 0.9);
}
.x-loading-spinner > span.x-loading-left::before {
    background-color: rgba(170, 170, 170, 0.8);
}
.x-loading-spinner > span.x-loading-left {
    background-color: rgba(170, 170, 170, 0.7);
}
.x-loading-spinner > span.x-loading-left::after {
    background-color: rgba(170, 170, 170, 0.6);
}
.x-loading-spinner > span.x-loading-bottom::before {
    background-color: rgba(170, 170, 170, 0.5);
}
.x-loading-spinner > span.x-loading-bottom {
    background-color: rgba(170, 170, 170, 0.4);
}
.x-loading-spinner > span.x-loading-bottom::after {
    background-color: rgba(170, 170, 170, 0.35);
}
.x-loading-spinner > span.x-loading-right::before {
    background-color: rgba(170, 170, 170, 0.3);
}
.x-loading-spinner > span.x-loading-right {
    background-color: rgba(170, 170, 170, 0.25);
}
.x-loading-spinner > span.x-loading-right::after {
    background-color: rgba(170, 170, 170, 0.2);
}
.x-loading-spinner > span.x-loading-top::before {
    background-color: rgba(170, 170, 170, 0.15);
}
.x-loading-spinner > span {
    left: 50%;
    margin-left: -0.05em;
}
.x-loading-spinner > span.x-loading-top {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
}
.x-loading-spinner > span.x-loading-right {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
}
.x-loading-spinner > span.x-loading-bottom {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}
.x-loading-spinner > span.x-loading-left {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
}
.x-loading-spinner > span::before {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
}
.x-loading-spinner > span::after {
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
}
.x-loading-spinner {
    -webkit-animation-name: x-loading-spinner-rotate;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
 
@-webkit-keyframes x-loading-spinner-rotate {
    from {
    -webkit-transform: rotate(30deg);
    }
    to {
    -webkit-transform: rotate(330deg);
    }
}

具体效果查看这里：Demo3

这个方案是3个方案中应用css技术最彻底的一个，html的代码最少，并且也真正做到了旋转效果。缺点是不易扩展，chrome浏览器支持不是很理想。

综上分析，方案1浏览器支持不好，但是实现简单，方案2的html代码太多，但扩展好，浏览器支持不错，方案3的扩展性不好，浏览器支持也不好，但是较好地利用了css的特性。

如果开发桌面web系统，推荐方案2，如果是mobile系统，则方案2和方案3各有优势。

文章来源：葡萄城控件技术团队博客

先前一博客《用HTML5代替PPT》中，我的各种动画效果就完全使用了CSS3的动画效果而不再使用jQuery的动画了。

点击查看展示

设置CSS

*{
    -webkit-transition-duration:.15s;
    -moz-transition-duration:.15s;
    transition-duration:.15s;
    -webkit-transition-timing-function:ease-out;
    -moz-transition-timing-function:ease-out;
    transition-timing-function:ease-out;
}

也就是设置了所有动画效果的持续时间为150毫秒，以及动画效果的样式为ease-out。

关于时间

根据我自己亲身实践，我能接受的动画效果时间是在150毫秒附近，再短觉得一闪而过，再长我就觉得拖沓冗余。这个150毫秒仅仅是经验参数，没有任何科学依据仅供各位参考。

但是这个也有例外，比如例子中幻灯片的翻页过程，由于幻灯片比较大，翻页过程如果时间太短，效果也不好。所以对于这种几乎整个页面变化的情况，我设置了动画时长为300毫秒，比通常的翻了一倍。甚至到400毫秒也没觉得冗长。所以一般对于面积较小的元素，动画效果维持在150毫秒左右，面积较大的动画，适当延长时间。

关于效果

动画效果我个人最喜欢ease-out，最不拖沓，有动感。其他效果看着总觉得恶心。比如linear看起来就很死板，而ease-in又感觉不伦不类。

关于是否使用*选择器

这个我已经另写博客阐述观点 真的还需要reset.css么？

关于动画

这是针对所有元素的任何的CSS变动都会产生动画，包括背景色，边框色，宽度高度，内外边距的变化等等等等。实际上光颜色的动画改变就已经比jQuery默认效果强了，jQuery如果要实现颜色动画需要附加一个插件 jQuery Color

脚本产生动画

不仅仅是hover伪类其效果，任何通过脚本改变元素的CSS参数都会产生动画。为此，我在页面脚本一开始就加入

var page=window.location.hash.replace("#slide-","")||1;
$("#slides").css({"margin-top":(1080*(1-page))});

这段代码的作用就是通过地址栏的hash，来改变幻灯片的页数。你可以尝试访问这个页面，注意地址最后的hash部分：
http://shawphy.github.com/share/2010/presentation.html#slide-2
这个地址会直接把你带到第2页。

可以看到，代码中仅仅是设置了元素CSS的margin-top值，本身并没有动画，而由于先前的CSS设置，通过js改变margin-top值也会有动画效果，这种原生动画效果我不确定是不是会比js产生的效率高，我个人感觉在Firefox 4下动画效果很不流畅，但Chrome 下很流畅。因此一定程度上，未来可以放弃脚本库中的动画了。或者，甚至脚本库中也会运动CSS动画来实现功能。

缺点

不提供回调函数，不能按照顺序执行，又要使用大量setTimeout了，并非完全好主意。

原文：http://shawphy.com/2010/09/css3-animation.html

由于CSS3在国内还不是很流行，所以国内的大部分浏览基本上都不支持CSS3，而且短时间内也没有大面积支持的势头；虽然CSS3在国际上的盛行 度很大，各大浏览器厂商也正在努力的更新他们的浏览器，以求跟上HTML/CSS的更新节奏，但是首先要知道的是CSS3目前还不是一个完整的标准版本， 它仍旧处于开发中，所以期待浏览器能够大部分支持CSS3属性，可能还要在等上一段时间！

补充一句：蛋疼的IE完全没有支持CSS3的念头，这不得不说是一个杯具。

因为transition最早是有由webkit内核浏览器提出来的，mozilla和opera都是最近版本才支持这个属性，而我们的大众型浏览器IE 全家都是不支持，另外由于各大现代浏览器Firefox，Safari，Chrome，Opera都还不支持W3C的标准写法，所以在应用 transition时我们有必要加上各自的前缀，最好在放上我们W3C的标准写法，这样标准的会覆盖前面的写法，只要浏览器支持我们的 transition属性，那么这种效果就会自动加上去：

//Mozilla内核<style type=”text/css”>
-moz-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
//Webkit内核
-webkit-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
//Opera
-o-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
//W3C 标准
transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

通过上面的讲述，我想大家对CSS3的Transition属性的使用有一定的概念存在了，下面为了加强大家在这方面的使用，我们一起来看下面的DEMO（演示案例）。我们通过实践来巩固前面的理论知识，也通过实践来加强transition的记忆。

DEMO：

演示案例中我们主要是在一个div中放置了几个小块，分别是对应了transition-timing-function中的几种类型，我们在 div的hover状态下，改变其部分属性，从而达到一种动画效果。我们也可以使用JQuery来点击一个按钮，触发这个div（说简单点就是通过按钮的 点击事件给这个div加上一个class，让其子元素都触发相对应的transition动画效果），为了让大家能更好的学习和理解，我把相应的代码贴在 这里，感兴趣的朋友就跟着做一下吧，也可以直接把代码复制到你本地页面运行查看效果。

HTML代码：

<a id=”timings-demo-btn”>click</a>
<div id=”timings-demo”>
<div id=”ease”>Ease</div>
<div id=”ease-in”>Ease-in</div>
<div id=”ease-out”>Ease-out</div>
<div id=”ease-in-out”>Ease-in-out</div>
<div id=”linear”>Linear</div>
<div id=”cubic-bezier”>Cubic-bezier</div>
</div>

#timings-demo {border:1px solid #ccc; padding:10px; height:400px; width:400px;}
.demo-box {width:100px; height:50px; text-align:center; line-height:50px; text-align:center; color:#fff; background:#96c; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:inset 0 0 5px rgba(102, 153, 0,0.5); -webkit-box-shadow:inset 0 0 5px rgba(102, 153, 0,0.5); box-shadow:inset 0 0 5px rgba(102, 153, 0,0.5); margin-bottom:10px; }
//ease效果：
#ease-in {-moz-transition:all 3s ease-in 0.5s; -webkit-transition:all 3s ease-in 0.5s; -o-transition:all 3s ease-in 0.5s; transition:all 3s ease-in 0.5s; background:#369; }</style>
//ease-out效果：
#ease-out {-moz-transition:all 5s ease-out 0s; -webkit-transition:all 5s ease-out 0s; -o-transition:all 5s ease-out 0s; transition:all 5s ease-out 0s; background:#636; }
//ease-in-out效果：
#ease-in-out {-moz-transition:all 1s ease-in-out 2s; -webkit-transition:all 1s ease-in-out 2s; -o-transition:all 1s ease-in-out 2s; transition:all 1s ease-in-out 2s; background:#3e6; }
//linear效果：
#linear {-moz-transition:all 6s linear 0s; -webkit-transition:all 6s linear 0s; -o-transition:all 6s linear 0s; transition:all 6s linear 0s; background:#999; }
//cubic-bezier效果：
#cubic-bezier {-moz-transition:all 4s cubic-bezier 1s; -webkit-transition:all 4s cubic-bezier 1s; -o-transition:all 4s cubic-bezier 1s; transition:all 4s cubic-bezier 1s; background:#6d6; }
//hover状态下或单击click按钮后demo-box产生属性变化
#timings-demo.timings-demo-hover .demo-box, #timings-demo:hover .demo-box {-moz-transform: rotate(360deg) scale(1.2); -webkit-transform:rotate(360deg) scale(1.2); -o-transform:rotate(360deg) scale(1.2); transform:rotate(360deg) scale(1.2); background:#369; border:1px solid rgba(255,230,255,08); -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; margin-left:280px; height:30px; line-height:30px; margin-bottom:15px; }

$(document).ready(function(){
$(“#timings-demo-btn”).toggle(
function(){
$(this).next(“div#timings-demo”).addClass(“timings-demo-hover”);
},function(){
$(this).next(“div#timings-demo”).removeClass(“timings-demo-hover”);
});
});

上图是鼠标移动到#timings-demo的div产生的效果变换示意图，你单击“click”按钮同样会产生上面的一个动画效应，为了节约空间，这里不在贴出示意图了。

到这里，关于CSS3的transition属性的属性解析及案例演示已经全部完成了。

结束语：CSS3的强大让人感到惊讶，也让人感到惊喜。关于CSS3的优秀，我想我已经不用多做介绍了，简简单单的几句代码就能够完成CSS2.0 之前必须用图片才能解决的事情是多么的令人振奋。我想作为前端工程师的我以及广大的前端程序员们，还等什么？赶紧使用CSS3吧，它会给你带来意想不到的 精彩。

原文：http://www.52maomao.info/css3-transition-browser-compatibility.html

下面我们从最简单的语法和属性值开始一步一步来学习transition的具体使用：

语法：

transition ： [<'transition-property'> || <'transition-duration'> || 
<'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || 
<'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

transition主要包含四个属性值：执行变换的属性：transition-property；变换延续的时间：transition- duration；在延续时间段，变换的速率变化transition-timing-function；变换延迟时间transition- delay。下面分别来看这四个属性值：

一、transition-property：

语法：

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*

transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属 性改 变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）；当其值为none时，transition马上停止执行，当指定为all 时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。其对应的类型如下：

1、color： 通过红、绿、蓝和透明度组件变换（每个数值单独处理），如：background-color，border-color，color，outline-color等CSS属性；

2、length：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等属性；

3、percentage：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等属性；

4、integer离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生，如：outline-offset，z-index等属性；

5、number真实的（浮点型）数值，如：zoom，opacity，font-weight等属性；

6、transform list：详情请参阅：《CSS3 Transform》。

7、rectangle：通过x、 y、 width和height（转为数值）变换，如：crop；

8、visibility：离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility；

9、shadow：作用于color、x、y、和blur（模糊）属性，如：text-shadow；

10、gradient：通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画，如：background-image；

11、paint server (SVG)：只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似；

12、space-separated list of above：如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化；

13、a shorthand property：如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化。

具体什么CSS属性可以实现transition效果，在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型，大家可以点这里了解详情。这里需要提醒一点是，并不是什么属性改变都为触发transition动作效果，比如页面的自适应宽度，当浏览器改变宽度时，并不会触发transition的效果。但上述表格所示的属性类型改变都会触发一个transition动作效果。

二、transition-duration：

语法：

transition-duration ： <time> [, <time>]*

transition-duration是用来指定元素 转换过程的持续时间，取值：<time>为数值，单位为s（秒）,可以作用于所有元素，包括:before和:after伪元素。其默认值是0，也就是变换时是即时的。

三、transition-timing-function：

语法：

transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | 
cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | 
ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

取值：

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，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]区域内，否则无效。

其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default。

其他几个属性的示意图：

四、transition-delay:

语法：

transition-duration ： <time> [, <time>]*transition-delay ： <time> [, <time>]*

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，取 值：<time>为数值，单位为s（秒），它的使用和transition-duration极其相似，也可以作用于所有元素，包 括:before和:after伪元素。 默认大小是”0″，也就是变换立即执行，没有延迟。

有时我们不只改变一个CSS效果的属性,而是想改变两个或者多个CSS属性的transition效果，那么我们只要把几个transition的 声明串 在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：transition-delay与 transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为时间的怭值为 transition-duration第二个为transition-delay。如：

a {
-moz-transition: background 0.5s ease-in,color 0.3s ease-out;
-webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
-o-transition: background 0.5s ease-in,color 0.3s ease-out;
transition: background 0.5s ease-in,color 0.3s ease-out; }
}

a {
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}

相对应的一个示例代码：

p {
-webkit-transition: all .5s ease-in-out 1s;
-o-transition: all .5s ease-in-out 1s;
-moz-transition: all .5s ease-in-out 1s;
transition: all .5s ease-in-out 1s;
}

Hello，亲们，这次让我来带着大家去创建3个非常漂亮的CSS3 Loading动画吧。我没记错的话这个CSS3 Loading动画只能运行在firefox、chrome和safari浏览器上，你还在等什么，赶紧往下看吧！

第1个CSS3 Loading动画例子

HTML

第1个例子中的HTML标记非常简单，我们在页面上创建了一个ul列表标记，并在其内部创建了几个div来控制它的总体进度动画，代码如下：

<ul id="progress">
    <li>
    <div id="layer1" class="ball"></div> <!-- layer1 control delay animation / ball is effect -->
    <div id="layer7" class="pulse"></div> <!-- layer7 control delay animation / pulse is effect  -->
    </li>
    <li>
    <div id="layer2" class="ball"></div>
    <div id="layer8" class="pulse"></div>
    </li>
    <li>
    <div id="layer3" class="ball"></div>
    <div id="layer9" class="pulse"></div>
    </li>
    <li>
    <div id="layer4" class="ball"></div>
    <div id="layer10" class="pulse"></div>
    </li>
    <li>
    <div id="layer5" class="ball"></div>
    <div id="layer11" class="pulse"></div>
    </li>
</ul>

没有什么不同的，我们仅仅为ul标记创建了图形动画，请注意中间过程中的特别的动画效果，这个效果要归功于CSS3的延迟动画特性，CSS代码如下：

ul#progress {
	list-style:none;
	width:125px;
	margin:0 auto;
	padding-top:50px;
	padding-bottom:50px;
}

ul#progress li { /* Style your list */
	float:left;
	position:relative;
	width:15px;
	height:15px;
	border:1px solid #fff;
	border-radius:50px;
	margin-left:10px;
	border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; 
	background:#000;
}

ul#progress li:first-child { margin-left:0; } /* Remove the margin first li element */

.ball { /* Style your ball and set the animation */
	background-color:#2187e7; 
	background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
	background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 

	width:15px;
	height:15px;
	border-radius:50px;
	-moz-transform:scale(0);
	-webkit-transform:scale(0);
	
	-moz-animation:loading 1s linear forwards;
	-webkit-animation:loading 1s linear forwards;
}

.pulse { /* Style your second ball to create the amazing effects */
	width:15px;
	height:15px;
	border-radius:30px;
	border: 1px solid #00c6ff;
	box-shadow: 0 0 5px #00c6ff;
	position:absolute;
	top:-1px;
	left:-1px;
	-moz-transform:scale(0);
	-webkit-transform:scale(0);
	
	-webkit-animation:pulse 1s ease-out;
	-moz-animation:pulse 1s ease-out;
}

/* Control Layers */
#layer1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
#layer2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; }
#layer3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
#layer4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
#layer5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }

#layer7 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
#layer8 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
#layer9 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
#layer10 { -moz-animation-delay:3s; -webkit-animation-delay:3s; }
#layer11 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; }

@-moz-keyframes loading {
    0%{-moz-transform:scale(0,0);}
    100%{-moz-transform:scale(1,1);}	
}

@-webkit-keyframes loading {
    0%{-webkit-transform:scale(0,0);}
    100%{-webkit-transform:scale(1,1);}	
}

@-moz-keyframes pulse {
    0%   {-moz-transform: scale(0);opacity: 0;}
    10%  {-moz-transform: scale(1);opacity: 0.5;}
    50%  {-moz-transform: scale(1.75);opacity: 0;}
    100% {-moz-transform: scale(0);opacity: 0;}  
}

@-webkit-keyframes pulse {
    0%   {-webkit-transform: scale(0);opacity: 0;}
    10%  {-webkit-transform: scale(1);opacity: 0.5;}
    50%  {-webkit-transform: scale(1.75);opacity: 0;}
    100% {-webkit-transform: scale(0);opacity: 0;}    
}

HTML

在第2个例子中，我们将会创建一个loading进度条，仅仅是创建一个宽度为100%的容器，然后在里面放一个class为expand的span标记，通过CSS3动画进度条就能逐渐充满整个屏幕，代码如下：

<div id="content">
<span class="expand"></span>
</div>

这个样式看起来比上一个简单很多，这是最基本的设置，你可以根据你的需要改变它。

#content { 
	width:100%; /* Full Width */
	height:5px; 
	margin:50px auto; 
	background:#000;
}

.expand { 
	width:100%;
	height:1px; 
	margin:2px 0; 
	background:#2187e7; 
	position:absolute;
	box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7);
        -moz-animation:fullexpand 10s ease-out;
	-webkit-animation:fullexpand 10s ease-out;
}

/* Full Width Animation Bar */
@-moz-keyframes fullexpand {
	0%  { width:0px;}
	100%{ width:100%;}	
}

@-webkit-keyframes fullexpand {
	0%  { width:0px;}
	100%{ width:100%;}	
}

HTML

在最后一个例子中，我们利用opacity属性重新创建了loading进度条，这里我们将用控制层控制其准确的动画时序。

<ul id="loadbar">
    <li>
    <div id="layerFill1" class="bar"></div> <!-- Control Layer + Bar  -->
    </li>
    <li>
    <div id="layerFill2" class="bar"></div>
    </li>
    <li>
    <div id="layerFill3" class="bar"></div>
    </li>
    <li>
    <div id="layerFill4" class="bar"></div>
    </li>
    <li>
    <div id="layerFill5" class="bar"></div>
    </li>
    <li>
    <div id="layerFill6" class="bar"></div>
    </li>
    <li>
    <div id="layerFill7" class="bar"></div>
    </li>
    <li>
    <div id="layerFill8" class="bar"></div>
    </li>
    <li>
    <div id="layerFill9" class="bar"></div>
    </li>
    <li>
    <div id="layerFill10" class="bar"></div>
    </li>
</ul>

你看到的效果和第1个差不多，但重要的是你懂得了如何用CSS来制作如此美妙的效果。

ul#loadbar {
	list-style:none;
	width:140px;
	margin:0 auto;
	padding-top:50px;
	padding-bottom:75px;
}
ul#loadbar li {
	float:left;
	position:relative;
	width:11px;
	height:26px;
	margin-left:1px;
	border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; 
	background:#000;
}

ul#loadbar li:first-child { margin-left:0; }

.bar {
	background-color:#2187e7;  
	background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff); 
	background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
	width:11px;
	height:26px;
	opacity:0;
	-webkit-animation:fill .5s linear forwards;
	-moz-animation:fill .5s linear forwards;
}

#layerFill1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
#layerFill2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; }
#layerFill3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
#layerFill4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
#layerFill5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
#layerFill6 { -moz-animation-delay:3s; -webkit-animation-delay:3s; }
#layerFill7 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; }
#layerFill8 { -moz-animation-delay:4s; -webkit-animation-delay:4s; }
#layerFill9 { -moz-animation-delay:4.5s; -webkit-animation-delay:4.5s; }
#layerFill10 { -moz-animation-delay:5s; -webkit-animation-delay:5s; }

@-moz-keyframes fill {
	0%{ opacity:0; }
	100%{ opacity:1; }	
}

@-webkit-keyframes fill {
	0%{ opacity:0; }
	100%{ opacity:1; }	
}

总结

在这个教程中我们通过CSS3技术创建了一个简单但是漂亮的Loading动画，想要了解更多CSS3动画方面的知识我推荐去看看CSS3 Animations。

本文译自CSS3 Loading Animation，由HTML5中文网站提供翻译，转载请自觉注明原文：http://www.itivy.com/html5/archive/2012/1/19/html5-css3-loading-bar.html。

关于CSS3 Filter的具体解释您可以参考《Filter Effects 1.0》这篇文章。

接下来我们就开始探讨如何使用CSS3 Filter实现我们想要的效果。

首先，我们介绍一下Filters的使用：Filters主要是运用在图片上，以实现一些特效（尽管他们也能运用于video上）。但是，我们主要讨论的是Filter图片上的运用。

再来，介绍一下Filters的语法：Filters使用时候的语法非常简单，例如：

elm {
filter: none | <filter-function > [ <filter-function> ]*
}

它的默认值是none，且不具备继承性。其中filter-function具有以下可选值：

1、grayscale灰度

2、sepia褐色

3、saturate饱和度

4、hue-rotate色相旋转

5、invert反色

6、opacity透明度

7、brightness亮度

8、contrast对比度

9、blur模糊

10、drop-shadow阴影

最后，谈一谈Filters在浏览器中的兼容性：

目前支持这个属性的浏览器少得可怜，现在只有webkit支持，而且只有webkit nightly版本和Chrome 18.0.976以上以上版本才支持，所以说，你要是想看到效果就需要下载这两个版本中的一个。

下面我们一起来见证这些效果的实现过程，首先在页面中应该有一张图片：

<img title=”normal” width=”128″ height=”128″ alt=”HTML5 Logo” src=”http://www.w3cplus.com/sites/default/files/filter.jpg” />

一、grayscale灰度

使用这个特效，会把图片变成灰色，也就是说你的图片将只有两种颜色——“黑色”和“白色”。

.grayscale{
-webkit-filter:grayscale(1);
}

默认值：100％。

如果你在grayscale()中没有任何参数值，默认的将会以“100%”渲染。其效果下图所示：

二、sepia

sepia译为“褐色”，使用这种特效，会将你的图片复古成黑白老照片。

.sepia{
-webkit-filter:sepia(1);
}

默认值：100％。

如果你在sepia()中没有任参数值，默认将会以“100％”渲染，具体效果如下图所示：

三、saturate饱和度

saturat的作用是用来改变图片的饱和度。

.saturate{
-webkit-filter:saturate(0.5);
}

如果我们将其值变大到300%，那么效果将如下图所示：

.saturate{
-webkit-filter:saturate(3);
}

四、hue-rotate色相旋转

hue-rotate的作用用来改变图片的色相。

.hue-rotate{
-webkit-filter:hue-rotate(90deg);
}

五、invert反色

invert做出来的效果就像是我们照相机底面的效果一样。

.invert{
-webkit-filter:invert(1);
}

六、opacity透明度

opacity的作用是改变图片的透明度。

.opacity{
-webkit-filter:opacity(.2);
}

七、brightness亮度

brightness的作用是改变图片的亮度。

.brightness{
-webkit-filter:brightness(.5);
}

八、contrast对比度

contrast的作用是改变图片的对比度，学习过photoshop的，应该都知道。

.contrast{
-webkit-filter:contrast(2);
}

九、blur模糊

blurt的作用是改变图片的清晰度。

.blur{
-webkit-filter:blur(3px);
}

十、drop-shadow阴影

drop-shadow的效果类似于box-shadow，作用是给图片加阴影效果。

.drop-shadow{
-webkit-filter:drop-shadow(5px 5px 5px #ccc);
}

以上所列出的就是CSS3 Filter能够实现的10种效果，当然，如果你需要什么样的效果还得自己设定。

例如：

.custom{
-webkit-filter:saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) invert(0.2) brightness(.9);
}

其实大家仔细一看，这些效果就像是photoshop做出来的一样，CSS3 Filter能够实现的很多效果都是类似于photoshop中的某种特效。但是，大家想一想不需要自己用photoshop去做效果，几句简简单单的 CSS3代码就能够实现这样的效果是不是很炫？

不光光是Filter，CSS3只用代码就能够实现的效果还有很多很多，是不是觉得很期待？不用图片，不用Javascript，几句简简单单的CSS3代码就能实现以前不敢想的效果，还等什么？赶快进入CSS3的世界吧。

感谢原作者的细心解答，文章部分内容来自我的挚友——大漠苍穹的博客（W3CPlus.com）。

原文链接：http://www.52maomao.info/css3-filter.html

在线示例    |    源码下载

其CSS代码如下：

/* Dark Button CSS */
.button {
    outline: 0;
    padding: 5px 12px;
    display: block;
    color: #9fa8b0;
    font-weight: bold;
    text-shadow: 1px 1px #1f272b;
    border: 1px solid #1c252b;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #232B30; /* old browsers */
    background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
}
.button:hover {
    color: #fff;
    background: #4C5A64; /* old browsers */
    background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 ); /* ie */
}
.button:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    color: #fff;
    padding: 6px 12px 4px;
    background: #20282D; /* old browsers */
    background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30',GradientType=0 ); /* ie */
    -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
    -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
    box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}

/* Search CSS: */
.search-input {
    padding: 0 5px 0 22px;
    border: 1px solid #1c252b;
    height: 30px;
    color: #9fa8b0;
    font-size: 12px;
    line-height: 30px;
    font-weight: bold;
    text-shadow: 1px 1px #1f272b;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    background: #20282D; /* old browsers */
    background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30',GradientType=0 ); /* ie */
    -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
    -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
    box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}
.search-input:focus {outline: none;}
.search-submit {
    width: 13px;
    height: 13px;
    border: none;
    background: url(mag-glass.png) no-repeat;
    display: block;
    position: absolute;
    left: 26px;
    top: 10px;
    text-indent: -9999em;
}

/* Vertical List: */
.vertical-list {
    list-style: none;
    padding: 10px;
    width: 200px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #20282D; /* old browsers */
    background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30',GradientType=0 ); /* ie */
    -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
    -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
    box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}
.vertical-list .button {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #515B62; /* old browsers */
    background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#515B62), color-stop(5%,#444E55), color-stop(100%,#394147)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515B62', endColorstr='#394147',GradientType=0 ); /* ie */
}
.vertical-list .button:hover {
    background: #5F6B72; /* old browsers */
    background: -moz-linear-gradient(top, #5F6B72 3%, #56646C 4%, #4D5A62 50%, #434D54 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#5F6B72), color-stop(4%,#56646C), color-stop(50%,#4D5A62), color-stop(100%,#434D54)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5F6B72', endColorstr='#434D54',GradientType=0 ); /* ie */
}
.vertical-list .button:active {
    padding: 5px 12px;
    top: 0;
    background: #515B62; /* old browsers */
    background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#515B62), color-stop(5%,#444E55), color-stop(100%,#394147)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515B62', endColorstr='#394147',GradientType=0 ); /* ie */       -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
}

<ul class="button-list">
    <li><a href='/' class='button'>Home</a></li>
    <li><a href='/' class='button'>About</a></li>
    <li><a href='/' class='button'>Portfolio</a></li>
    <li><a href='/' class='button'>Blog</a></li>
    <li class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></li>
</ul>
<h3>Vertical Menu:</h3>
<ul class="vertical-list">
    <li><a href='/' class='button'>Home</a></li>
    <li><a href='/' class='button'>Our Studio</a></li>
    <li><a href='/' class='button'>Portfolio</a></li>
    <li><a href='/' class='button'>Our Team</a></li>
    <li><a href='/' class='button'>Get in Touch</a></li>
</ul>

转载请自觉注明原文：http://www.itivy.com/html5/archive/2012/1/13/css3-dark-navigation-buttons.html

这些CSS3按钮上的小图标是利用HTML5中的data-icon属性实现的，如：

<a href="#" class="button">Button</a>
<a href="#" data-icon="♚" class="button orange shield glossy">King</a>
<a href="#" data-icon="♛" class="button pink serif round glass">Queen</a>
<a href="#" data-icon="♞" class="button blue skew">Horse</a>
<a href="#" data-icon="❀" class="button green icon">Flower</a>

该CSS3按钮的代码来源：http://lab.simurai.com/css/buttons/

转载请自觉注明原文：http://www.itivy.com/html5/archive/2012/1/13/pretty-css3-buttons.html

CSS3文字特效的分享就暂时告一段落，主要收集了5款具有代表性的CSS3文字特效，收藏在盘点5个典型的CSS3文字特效这篇文章中，有兴趣的朋友可以去看看。接下来我的打算是从今天开始分享一些CSS3相关的按钮和导航，大部分素材应该都来自一些老外的设计，希望接下来的几篇文章对你会有所帮助，当然你的支持和点评也是我坚持做下去的动力。

正文

今天的这款CSS3按钮应该说是非常的光彩夺目，因为不仅它的色彩调得非常的和谐，更美妙的是如果你用chrome或者safari浏览器还能看到按钮发光的特效。以下是效果截图

在线示例    |    源码下载

这里的发光效果主要是如下的CSS代码实现的

@-webkit-keyframes bigAssButtonPulse {
		  from { background-color: #749a02; -webkit-box-shadow: 0 0 25px #333; }
		  50% { background-color: #91bd09; -webkit-box-shadow: 0 0 50px #91bd09; }
		  to { background-color: #749a02; -webkit-box-shadow: 0 0 25px #333; }
}

这个CSS3按钮代码整理自http://www.zurb.com/playground/radioactive-buttons

看了这个炫丽的CSS3按钮，你不想说点什么吗？我等待你的点评。

转载请自觉注明原文：http://www.itivy.com/html5/archive/2012/1/12/css3-shine-buttons.html

3D效果文字

主要用到text-shadow的多层堆叠实现平滑的投影效果，并通过transform实现鼠标滑过文字放大及通过transition实现淡入淡出的效果

CSS3燃烧文字特效

主要通过text-shadow及jquery的动态渲染实现的一个燃烧效果

CSS3文字颜色渐变特效

这个主要是通过-webkit-gradient实现渐变的，由于是基于webkit内核的，所以只有在基于webkit内核的chrome和safari浏览器下才有效果。

CSS3文字边框和镂空文字效果

这个效果主要利用-webkit-text-stroke来完成的，-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。而且，配合使用color: transparent属性，你还可以创建镂空的字体。

CSS3内阴影Inset效果

主要用background-clip属性来完成这个Inset效果。CSS3中的background-clip属性，其主要是用来确定背景的裁剪区域，换句话说，就是如何控制元素背景显示区域。

经总结，一般我们在做CSS3文字特效时用的比较多的是text-shadow、transform、transition、-webkit-text-stroke、background-clip这几个属性。其他很多效果无非也就是这几种的不同组合，当然我也是刚刚开始学这方面的，有说的不对的地方请指出。

欢迎大家订阅我的HTML5专题博客：http://feed.feedsky.com/cnhtml5。一起学习探讨。

转载请自觉注明来源： http://www.itivy.com/html5/archive/2012/1/12/five-css3-text-effects.html

CSS3中的background-clip属性，其主要是用来确定背景的裁剪区域，换句话说，就是如何控制元素背景显示区域。其语法如下：

background-clip ： border-box || padding-box || content-box

各个值的说明：

1、border-box:此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉；

2、padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉；

3、context-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉；

下面我就用这个属性来制作一个文字内阴影Inset效果，该效果只能在webkit内核的chrome和safari浏览器下才有效果。CSS代码如下：

.insetText {
	font-family: Lucida Grande;
	background-color: #666666;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

HTML代码如下：

<div style="background-color:#cccccc;">
    <div class="insetText" style="padding:20px;font-size:58px;">this is the inset text</div>
</div>

好了，CSS3的Inset效果的文字就介绍到这里了，谢谢阅读！

转载请自觉注明原文：http://www.itivy.com/html5/archive/2012/1/11/css3-inset-text.html

1、-webkit-text-stroke属性简介

CSS边框的一个不足就是只有矩形的元素才能使用。-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。而且，配合使用color: transparent属性，你还可以创建镂空的字体。

2、一起看几个利用-webkit-text-stroke制作的文字特效

第一个CSS代码如下：

h1.demo {
		  text-transform: uppercase;
		  font-size: 48px;
		  margin: 0 0 30px 0; 
		  
		  -webkit-text-stroke: 1px black;
		  color: white;
		  text-shadow:
		    3px 3px 0 #000,
		    
		  	-1px -1px 0 #000,  
		    1px -1px 0 #000,
		    -1px 1px 0 #000,
		    1px 1px 0 #000;
 }

显示效果：

this is first demo

第二个CSS代码如下：

h2.demo {
		  font-size: 48px;
		  margin: 0 0 30px 0; 
		  
		  color: white;
		  text-shadow:
		  	-3px -3px 0 #000,  
		    1px -3px 0 #000,
		    -3px 3px 0 #000,
		    3px 3px 0 #000;
}

显示效果：

this is anothor demo

第三个CSS代码如下，注意这个demo需要用基于webkit内核的chrome或者safari浏览器才能看，firefox上无效

h3.demo {
		  font-size: 48px;
		  
		  -webkit-text-stroke: 2px red;
		  -webkit-text-fill-color: white; 
		  color: white;
		  
		  -webkit-animation: colorchange 1s infinite;
		  -webkit-animation-direction: alternate;
}
		
@-webkit-keyframes colorchange {
			0% {
				-webkit-text-stroke: 10px red;
				letter-spacing: 0;
			}
			100% {
				-webkit-text-stroke: 20px green;
				letter-spacing: 18px;
			}
}

显示效果：

text animation

好了，以上就是-webkit-text-stroke的用法以及3个相关的在线例子，这个文字特效就介绍到这里了，谢谢阅读！

转载请自觉注明原文：http://www.itivy.com/html5/archive/2012/1/11/css3-webkit-text-stroke-demo.html

第一个例子

CSS代码：

p.shine
{
    font-size: 3em;
    margin: 0 auto;
    padding:20px 0;
}

.shine
{
    background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
    -webkit-background-size: 125px;
    
    color: rgba(255, 255, 255, 0.1);
    -webkit-background-clip: text;
    
    -webkit-animation-name: shine;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes shine
{
    0%
    {
        background-position: top left;
    }
    100%
    {
        background: top right;
    }
}

第二个例子

css代码：

.masked{
	background: url(http://www.itivy.com/DownloadFile.ashx?id=634618023394399583) repeat, white;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-animation-name: masked-animation;
	-webkit-animation-duration: 40s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}


@-webkit-keyframes masked-animation {
	0% {background-position: left bottom;}
	100% {background-position: right bottom;}
}

上面两个文字特效来自http://trentwalton.com/

转载请自觉注明原文：http://www.itivy.com/html5/archive/2012/1/10/share-2-css3-transition-text.html

这个CSS3文字燃烧特效的实现js代码如下：

(function ($)
{
    // Zachary Johnson
    // http://www.zachstronaut.com
    // December 2009
    
    $.fn.ignite = function (burn)
    {
        $(this).each(
            function ()
            {
                var letters = $(this).text().split('');
                $(this).html('<span>' + letters.join('</span><span>') + '</span>');
                $spans = $(this).find('span');
                setInterval(function () {$spans.each(burn);}, 100);
            }
        );
    }
})(jQuery);


function gasFlame()
{
    // Zachary Johnson
    // http://www.zachstronaut.com
    // December 2009
    
    var colors = ['#fff', '#99f', '#00f', '#009'];
    if (Math.random() > 0.90)
    {
        colors.push('#f90');
    }
    
    var hv = 0.04;
    
    var textShadows = [];

    var c = 0;
    var h = 0;
    var s = 0;

    while (c < colors.length)
    {
        s = 2 + Math.round(Math.random() * 2);

        while (s--)
        {
            shadow = '0 ' + h + 'em ' + -h + 'em ' + colors[c];

            textShadows.push(shadow);

            h -= hv;
        }

        c++;
    }

    $(this).css({color: colors[0], textShadow: textShadows.join(', ')});
}


$(begin);

function begin()
{
    $('h2').ignite(gasFlame);
}

最后奉上CSS3文字燃烧特效的示例和源码

CSS3文字燃烧特效在线示例

CSS3文字燃烧特效源码下载

该特效来自CSS3 Shining Text, CSS2 Flaming Text

转载请自觉注明原文：http://www.itivy.com/html5/archive/2012/1/10/css3-jquery-burn-text.html

这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字，然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果。请注意，这个3D文字效果是用纯CSS的，没有用Javascript，并且需要用支持CSS3的浏览器才能看出效果，如firefox、chrome、safari和opera。

CSS文字阴影是如何实现的

为了实现3D的文字效果，我们将会利用CSS3的text-shadow属性，text-shadow的工作原理如下：

.example-class
{
    text-shadow: [X offset] [Y offset] [Blur size] [Colour];
}

堆叠多层CSS投影

虽然我们没有必要堆叠多层投影，但通过堆叠多层投影会有更好的3D效果

开始创建3D文字

你可能会选择比文字更深的颜色来作为投影的颜色，所以这个例子中我就用白色的文字，用深一点的灰色作为投影颜色，这个例子中我将H2的文字渲染3D效果，css代码如下：

h2
{
	text-shadow:
	1px 1px 0 #CCC,
	2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
	3px 3px 0 #444,
	4px 4px 0 #444,
	5px 5px 0 #444,
	6px 6px 0 #444; /* end of 4 level deep dark shadow */
}

好了，到这里你已经创建了基本的3D文字，然而，让我们进一步来实现鼠标滑过的文字放大效果，并用css的transision属性实现圆滑的淡入淡出效果。

首先用transform属性实现滑过字体放大

h2:hover
{
 	/* CSS3 Transform Effect */
  	-webkit-transform: scale(1.2);     /* Safari & Chrome */
  	-moz-transform: scale(1.2);        /* Firefox */
  	-o-transform: scale(1.2);          /* Opera */
}

然后利用transition属性实现淡入淡出效果

h2
{
	/* CSS3 Transition Effect */
	-webkit-transition: all 0.12s ease-out;		/* Safari & Chrome */
	-moz-transition: all 0.12s ease-out;		/* Firefox */
	-o-transition: all 0.12s ease-out;		/* Opera */
}

下面是这个例子的DEMO，一起看看

转载请自觉注明原文：http://www.itivy.com/html5/archive/2012/1/9/how-to-create-3d-text-with-css3.html

如果用纯CSS3实现圆角，可以参考一下代码：

/*-moz-border-radius 是 Firefox 实现圆角的私有属性*/
-moz-border-radius: 5px;
/*-webkit-border-radius 是 webkit 内核浏览器（如 Safari 和 Chrome）实现圆角的私有属性*/
-webkit-border-radius: 5px; 

1、从CurvyCorners网站上下载源码：http://www.curvycorners.net/

2、在页面中引入CurvyCorners的js脚本：

<script type="text/javascript" src="curvycorners.js"></script>

.roundedCorners{
width: 220px;
padding: 10px;
background-color: #DDEEF6;
border:1px solid #DDEEF6;
 
/* 支持CSS3的firefox或chrome就可以应用下面的圆角属性 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}

addEvent(window, 'load', initCorners);
function initCorners() {
    var setting = {
       tl: { radius: 6 },
       tr: { radius: 6 },
       bl: { radius: 6 },
       br: { radius: 6 },
       antiAlias: true
    }
    curvyCorners(setting, ".roundedCorners");
}

这么一来，你的IE是不是就支持CSS3圆角了呢，兴奋一把吧。

转载请自觉注明原文：http://www.itivy.com/html5/archive/2012/1/9/curvycorners-css3-corner.html