请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5实战 HTML5应用 查看内容

css3 过渡动画制作mac os导航

2013-11-17 19:48| 发布者: admin| 查看: 1603| 评论: 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>

如果你还不明白,没关系,请猛击下面的按钮:

在线演示

本文出自HTML5星空,转载请注明出处。


1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

相关阅读

相关分类

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-11-21 09:01 , Processed in 0.071558 second(s), 26 queries .

返回顶部