CSS3打造的10种创意动画菜单效果 - okajax.com - Ajax中国

1、总体介绍 2、CSS3打造的10种创意动画菜单效果1、2 3、CSS3打造的10种创意动画菜单效果3、4 4、CSS3打造的10种创意动画菜单效果5、6 5、CSS3打造的10种创意动画菜单效果7、8 6、CSS3打造的10种创意动画菜单效果9、10

CSS3新增添了实现动画效果的新功能，通过本文，你可以对这些新功能有个初步了解。本文将为大家带来一些充满创意的菜单悬停效果。它由图标，主标题，副标题等简单的元素构成，通过CSS3最新的过渡（transition）和动画（animation）两个功能实现鼠标悬停时的动画效果

演示 下载

示例中所用的图标实际上是一种网络符号字体，包含在@font-face。这种字体是有Just Be Nice工作室所开发。

标记

菜单的HTML架构是一个无序列表，其中的每个选项都是由图标跨度和内容层组成的链接元素。内容层包含主标题和副标题：

<ul class="ca-menu"> 
    <li> 
        <a href="#"> 
            <span class="ca-icon">A</span> 
            <div class="ca-content"> 
                <h2 class="ca-main">Exceptional Service</h2> 
                <h3 class="ca-sub">Personalized to your needs</h3> 
            </div> 
        </a> 
    </li> 
    ...  
</ul> 

因为我们使用符号字体作为图标，我们为图标写上字母。

CSS

所有示例中的共有的样式都包含符号字体：

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

文件的路径是相对于CSS文件而言的，因此，它们应放在css目录下的websymbols中（css/websymbols/）。

用图标作为字体的好处在于，可以为它运用漂亮的效果，比如说，文本投影（text shadow）。还可以根据需求按比例放大或缩小。

每个示例中的无序列表样式都相同。我们只是让它的宽度适合，方便其居于屏幕中央：

.ca-menu{  
    padding: 0;  
    margin: 20px auto;  
    width: 500px;  
} 

在下面的示例中，会向大家展示元素的样式是如何为最终效果服务的。

在第1个示例中，我们会研究所有元素的样式，其它示例，我们侧重对代码进行改写。

注意：以下示例中，我不会写任何浏览器特定的前缀，但是你会在示例文件夹中看到所有必要前缀。

第1页：总体介绍

第2页：CSS3打造的10种创意动画菜单效果1、2

第3页：CSS3打造的10种创意动画菜单效果3、4

第4页：CSS3打造的10种创意动画菜单效果5、6

第5页：CSS3打造的10种创意动画菜单效果7、8

第6页：CSS3打造的10种创意动画菜单效果9、10