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

所属分类:媒体-幻灯片和轮播图

 32497  337  查看评论 (1)
分享到微信朋友圈
X
文字菜单特效-BLUR MENU WITH CSS3 TRANSITIONS ie兼容10

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


预览图

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

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

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="http://fonts.googleapis.com/css?family=Josefin+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中的文件查看源码来获取自己想要的效果。

相关插件-幻灯片和轮播图

简单的jquery轮播图插件

简单的jquery轮播图插件,方便易懂
  幻灯片和轮播图
 43146  364

5种jQuery超酷3d幻灯片效果

flux.js是一款能做出3D效果的jQuery幻灯片插件。这款jQuery幻灯片插件共有5种效果:爆炸效果、3D翻转效果、3D旋转效果、立方体效果和翻页效果。需要注意的是flux需要浏览器支持CSS3 transitions才能正常工作。
  幻灯片和轮播图
 33581  451

纯js响应式轮播图

web端纯js响应式轮播图,支持移动端滑动切换
  幻灯片和轮播图
 33972  354

简单实用的全屏轮播

有多重选项,配置迅速,十分实用
  幻灯片和轮播图
 45121  382

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    米修米修 0
    2017/11/24 22:19:09

    这个我要改文字和背景图片怎么改呢   这个路径没有学过呢

    回复
    WEB小妞 0
    2013/11/21 0:13:00
    样式在ie下面不行啊 回复
    hacker 0
    2013/9/20 16:15:00
    不错!感谢分享 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复