插件描述：css3给我们带来了太多的惊喜，今天很高兴给大家展示一款动画菜单。该菜单的想法源自于一个包含元素、图标、主标题和副标题的混合物，而且当鼠标移动到菜单上时，会有纯css的过渡变换效果。
css3给我们带来了太多的惊喜，今天很高兴给大家展示一款动画菜单。该菜单的想法源自于一个包含元素、图标、主标题和副标题的混合物，而且当鼠标移动到菜单上时，会有纯css的过渡变换效果。
使用步骤
1、菜单的html结构是一个无序列表，每一个项都是一个包含图标的 span 元素和包含主标题和副标题的 div 的链接元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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> |
2、公共的样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @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;}.ca-menu{ padding: 0; margin: 20px auto; width: 500px;} |
3、接下来就是不同的效果自己的样式，在这里有10种效果，大家可以查看每种效果是否满足自己的需要。
如果需要某种菜单效果，可以查看示例中的源码，其中的css和html以及引用的文件。
当然也可以去官网查看详细的讲解。
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com