文字菜单特效-BLUR MENU WITH CSS3 TRANSITIONS

查看演示立即下载

插件描述：随着css3的出现，我们能实现的网页特效就变得更加容易，更炫了。今天我要给大家介绍的是一款是一款由 css3 打造的文字特效插件，用于当我们将鼠标移动到菜单上时，那么该效果的灵感是通过高亮显示某一项和模糊其它项来突出选中的菜单。注意，该插件只能工作在支持 css3 的浏览器中。

随着css3的出现，我们能实现的网页特效就变得更加容易，更炫了。今天我要给大家介绍的是一款是一款由 css3 打造的文字特效插件，用于当我们将鼠标移动到菜单上时，那么该效果的灵感是通过高亮显示某一项和模糊其它项来突出选中的菜单。注意，该插件只能工作在支持 css3 的浏览器中。

预览图

width="474" height="300" title="文字菜单特效" alt="文字菜单特效"/>

使用步骤

1、引入以下的js和css文件

<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/style1.css">      
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/styleIE.css" />
<![endif]-->
<link href="/+Slab"rel="stylesheet" type="text/css">

2、在body标签中加入以下格式的html代码

<ul class="bmenu"> 
    <li>
        <a href="#">About</a>
    </li>
    <li>
        <a href="#">Illustrations</a>
    </li>
    <li>
        <a href="#">Photography</a>
    </li>
    <li>
        <a href="#">Web Design</a>
    </li>
    <li>
        <a href="#">Personal Projects</a>
    </li>
    <li>
        <a href="#">Contact</a>
    </li>
</ul>

3、所有示例中均有如下的针对 ul 和 li 的css样式

 .bmenu{
    padding: 0px;
    margin: 0 0 10px 0;
    position: relative;
}
.bmenu li{
    font-size: 50px;
    display: block;
}

4、不同的效果有不同的样式，大家可以查看Demo中的文件查看源码来获取自己想要的效果。

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：简洁清新的轻量级幻灯片-CRAFTYSLIDE
下一个特效：可拖动网格图片插件-DRAGGABLE IMAGE BOXES GRID