随着css3不断地发展，越来越多的页面特效可以被实现。

例如当我们鼠标悬浮在某个tab上的时候，给它以1s的渐进变化增加一个背景颜色。渐进的变化可以让css样式变化得不那么突兀，也显得交互更加柔和。

那么怎么实现这种效果呢？
css3提供了transition属性，可以用来控制css属性变化的速度。
举一个盒子变化的例子，html代码如下所示。

<body>
    <p>这是一个盒子: width, height, background-color, transform. 将光标悬停在盒子上查看动画。</p>
    <div class="box"></div>
</body>

css内容则如下所示。

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: yellow;
    -webkit-transition:width 2s, height 2s,
        background-color 2s, -webkit-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

transition属性可以控制宽和高变化持续时间，如上面的css，.box的变化速度为宽和高都持续变化2秒。

其实transition是一种简写方式，其实可以具体写各种属性和设置，例如下面是一段对文字的css变化的编写：

#change {
    position: relative;
    transition-property: font-size;
    tansition-duration: 1s;
    transiton-delay: 1s;
    font-size: 14px;
}

#change:hover {
    tansition-property: font-size;
    transition-duration: 2s;
    tansition-=delay: 1s;
    font-size: 36px;
}

当然用简写是最好的，效率最高，例如：

transition:  all 1s;

CSS3之transition

相关文章

热门标签

最新文章