欢迎光临一流素材网,免积分免费素材下载!
AD

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

所属栏目:轮播图/幻灯片更新时间:2016-10-17原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明

随着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中的文件查看源码来获取自己想要的效果。


具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1jquery手机端响应式banner图片滚动切换效果

2兼容触屏手机浏览的JS全屏焦点图代码

3jQuery touchSlider全屏图片轮播幻灯焦点图代码

4jquery灯箱画廊插件lightgallery

5jquery轮播焦点图

6js卡片式图片叠加滚动切换代码

7带左右箭头滑动焦点图幻灯片jQuery特效代码

8jquery旋转木马插件SLICK

93D效果图片轮播效果代码

10jQ轻量级触摸响应滑块插件JQuery lightSlideruery轮播图插件movingboxes.js

最新更新的

1jQuery响应式触屏图片左右滚动代码owl.carousel

2轻量级响应式jQuery轮播图/幻灯片插件-lightslider

3移动端滑动JS响应式轮播图插件

4jQuery倾斜图片切换滚动焦点图幻灯片代码

5jQuery版仿淘宝商城天猫首页多格焦点图效果

6易迅网竖排多格jquery焦点图代码

7jQ索引按钮+缩略图双重切换

8兼容触屏手机浏览的JS全屏焦点图代码

9鼠标滑过+自动播放jQ全屏焦点图代码

10Diapo轮播图-幻灯片插件