中国第一Ajax站长门户:www.okajax.com   虚拟主机 域名注册 云主机

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

我要投稿 会员登陆 RSS订阅 本站推荐:
您的位置主页 > 网页设计 > Html+Css > CSS3打造的10种创意动画菜单效果

CSS3打造的10种创意动画菜单效果

2012-04-12    文章来源:互联网    浏览次数:

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

演示 下载

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

标记

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

  1. <ul class="ca-menu"> 
  2.     <li> 
  3.         <a href="#"> 
  4.             <span class="ca-icon">A</span> 
  5.             <div class="ca-content"> 
  6.                 <h2 class="ca-main">Exceptional Service</h2> 
  7.                 <h3 class="ca-sub">Personalized to your needs</h3> 
  8.             </div> 
  9.         </a> 
  10.     </li> 
  11.     ...  
  12. </ul> 

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

CSS

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

  1. @font-face {  
  2.     font-family'WebSymbolsRegular';  
  3.     srcurl('websymbols/websymbols-regular-webfont.eot');  
  4.     srcurl('websymbols/websymbols-regular-webfont.eot?#iefix'format('embedded-opentype'),  
  5.          url('websymbols/websymbols-regular-webfont.woff'format('woff'),  
  6.          url('websymbols/websymbols-regular-webfont.ttf'format('truetype'),  
  7.          url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular'format('svg');  
  8.     font-weightnormal;  
  9.     font-stylenormal;  

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

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

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

  1. .ca-menu{  
  2.     padding0;  
  3.     margin20px auto;  
  4.     width500px;  

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

在第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
  • 文章评论(查看全部)

    看不清楚?单击换一张。
    loading.. 评论加载中....
    关于我们 - 广告服务 - 版权隐私 - 免责声明 - RSS地图 - 网站地图 - 使用帮助 - 返回顶部