css3 过渡动画制作mac os导航

2013-11-17 19:48| 发布者: admin| 查看: 2553| 评论: 0

摘要: 本例是使用css3的过渡动画制作的Mac os系统底部的导航，看本例之前，先来了解一下css3过渡动画的基础知识。需要知道的是CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

本例是使用css3的过渡动画制作的Mac os系统底部的导航，看本例之前，先来了解一下css3过渡动画的基础知识。
需要知道的是CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
比如说，应用于宽度属性的过渡效果，时长为 2 秒：

div
{
transition: width 2s;
-moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */
-o-transition: width 2s;	/* Opera */
}

比较常用的就是鼠标悬浮到某一个元素上时的过渡，用css3就很容易实现了：

div:hover
{
width:300px;
}

查看效果（请将鼠标放到下面的黄色div上）：

下面让我们了解一下css3的过渡属性，过渡属性学会运用了，其它的都是小菜一碟：

transform:translate(x,y);//平移,x代表向又移动距离，y代表向下移动距离

transform:scale(x,y);//缩放，x代表水平缩放倍数，y代表垂直缩放倍数

transform:rotate(x);//旋转，x代表顺时针旋转多少度，如rotate(10deg)

transform:skew(x,y);//倾斜，x\y分别代表沿x轴和y轴的倾斜

下面是常用的动画过渡属性：

transition-property列出元素应该过渡的CSS属性，可过度属性包括背景、边框和方框模型属性。

transition-duration设置过渡持续时间

transition-timing-function设置过渡的速度，可用ease、linear、ease-in、ease-out或ease-in-out之一

transition-delay动画延时时间

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

看一下本例的效果图吧：

完整css3过渡效果代码如下：

 <style type="text/css">
body {
    background: url(images/apple1.jpg)  center no-repeat;
    padding: 0;
    margin:0;
}
ul.osx-dock {
    display: inline-block;
    height: 130px;
    padding: 0 40px 0 0;
    overflow: hidden;
    margin: 0 0 0 40px;
}
ul.osx-dock li {
    display: block;
    position: relative;
    float: left;
    width: 50px;
    height: 50px;
    margin: 60px 0 4px 0;
    -webkit-transition: 0.15s linear;
    -webkit-transition-property: -webkit-transform margin;
    text-align: center;
}
ul.osx-dock li a {
    display: block;
    height: 50px;
    padding: 0 1px;
    -webkit-transition: 0.15s linear;
    -webkit-transition-property: -webkit-transform margin;
    margin: 0;
    -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)));
}
ul.osx-dock li a img { width: 48px; }
ul.osx-dock li:hover {
    margin-left: 9px;
    margin-right: 9px;
    z-index: 200;
}
ul.osx-dock li:hover a {
    -webkit-transform-origin: center bottom;
    -webkit-transform: scale(1.5);
}
ul.osx-dock li span {
    position: absolute;
    bottom: 80px;
    margin: 0 auto;
    display: none;
    width: auto;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 6px;
    -webkit-border-radius: 6px;
    color: #fff;
}
ul.osx-dock li:hover span { display: block; }
div#dockContainer {
    position: fixed;
    bottom: 12px;
    height: 120px;
    padding: 50px 0 0;
    text-align: center;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    width: 100%;
    line-height: 1;
    z-index: 100;
}
div#dockWrapper {
    width: auto;
    display: inline-block;
    position: relative;
    border-bottom: solid 2px rgba(255, 255, 255, .35);
    line-height: 0;
}
</style>

html代码如下：

<div id="dockContainer">
    <div id="dockWrapper">
        <ul class="osx-dock">
            <li class="active"> <span>ZURB</span> <a href="#" title="ZURB"><img src="images/zurb-icon.png" /></a> </li>
            <li> <span>LinkedIn</span> <a href="#" title="LinkedIn"><img src="images/linkedin-icon.png" /></a> </li>
            <li> <span>Notable</span> <a href="#" title="Notable"><img src="images/notable-icon.png" /></a> </li>
            <li> <span>last.fm</span> <a href="#" title="Last.fm"><img src="images/lastfm-icon.png" /></a> </li>
            <li> <span>Facebook</span> <a href="#" title="Facebook"><img src="images/facebook-icon.png" /></a> </li>
            <li> <span>Google</span> <a href="#" title="Google"><img src="images/google-icon.png" /></a> </li>
            <li> <span>Notable</span> <a href="#" title="Notable"><img src="images/notable-icon.png" /></a> </li>
            <li> <span>last.fm</span> <a href="#" title="Last.fm"><img src="images/lastfm-icon.png" /></a> </li>
            <li> <span>Facebook</span> <a href="#" title="Facebook"><img src="images/facebook-icon.png" /></a> </li>
            <li> <span>Google</span> <a href="#" title="Google"><img src="images/google-icon.png" /></a> </li>
        </ul>
    </div>