css动感线条,使用css3制作动感导航条示例

越来越喜欢CSS3的Transition属性

HTML:

复制代码代码如下:

HOMELIFEWEBPHPPICABOUT

CSS:

复制代码代码如下:

body{

background:#EDEDED;

}

.nav{

width:606px;

margin:100px auto 0 auto;

}

li{

width:100px;

height:30px;

list-style:none;

float:left;

margin-left:-1px;

/*菜单文字排版*/

line-height:26px;

text-align:center;

letter-spacing:3px;

/*设置菜单边框*/

border:1px solid #B2B2B2;

border-radius:3px;

/*设置菜单阴影*/

-webkit-box-shadow:0 1px 2px #CDCDCD;

box-shadow:0 1px 2px #CDCDCD;

/*设置菜单动画*/

-webkit-transition:all 0.3s ease;

-moz-transition:all 0.3s ease;

transition:all 0.3s ease;

}

width:96px;

height:28px;

display:inline-block;

/*设置链接样式*/

color:#999;

font-size:10px;

font-family:Verdana,sans-serif;

text-decoration:none;

/*webkit文字大小*/

-webkit-text-size-adjust:none;

/*设置边框*/

border:2px solid #FFF;

border-bottom:none;

border-radius:3px;

/*菜单背景渐变*/

background:-webkit-linear-gradient( top,#FFFFFF 20%,#F3F3F3 85%,#E5E5E5 100%);

background:-moz-linear-gradient( top,#FFFFFF 20%,#F3F3F3 85%,#E5E5E5 100%);

background:linear-gradient( top,#FFFFFF 20%,#F3F3F3 85%,#E5E5E5 100%);

}

li:hover{

margin-top:-8px;

}

a:hover{

color:#777;

}

css动感线条,使用css3制作动感导航条示例相关推荐

使用CSS3制作倾斜导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
毛玻璃效果 php,CSS3教程之制作倾斜导航条和毛玻璃效果
这篇文章主要介绍了使用CSS3制作倾斜导航条和毛玻璃效果,需要的朋友可以参考下导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相 ...
css作个课程导航,CSS 制作网页导航条(下)
上节课我们将导航条做成了下面的效果但是此时的导航条还没有链接,还不能点击,这节课我们就要做一个完整的导航条 [第四步] 我们需要将上面的导航条做以下几个修改 1)给上面的导航加上链接: 2)链接文字 ...
HTML导航条的功能描述,ps制作网页导航条忘了写文字描述就发了，步骤为：
网页导航条用ps怎么做要详细一点的忘了写文字描述就发了,步骤为: 新建一个矩形选区,就是设置好你想做的导航条的宽和高如何用Photoshop制作网站的"导航栏" 用PS制作的 ...
html渐变线条代码,CSS3实现线性渐变用法示例代码详解
前言演示下太老版本浏览器的渐变实现了[IE9-]; IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样; .testDiv { width:400px; height:400px; border ...
HTML5+CSS3制作底部导航栏
目录前言一.底部导航栏示例图二.HTML框架 1.一号盒子 2.二号盒子总结前言在日常的网上冲浪中,我们常常在网页最底部,看到一大堆链接,非常整齐,一目了然,那么是如何实现的 ...
使用HTML5+CSS3制作圆角内发光按钮----示例
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
div制作横向导航条
将以下代码放入dreamweaver代码区域,可以显示横向导航栏,鼠标经过后导航菜单会变颜色,并包含二级导航菜单,附加下面显示的结果图片参考文档http://www.aa25.cn/div_css/ ...
【京东商城首页实战3】导航条制作（2）
下面做导航条右边部分. 图1 分析: 1.用无序列表ul制作菜单导航条. 2.有些菜单后面有小三角标志 3.菜单之间有小竖线隔开.注意这里的小竖线高度不够,不能认为菜单的边框,它是一个微型盒子. 1. ...
一个完美的导航条html,一个DIV CSS代码布局的简单导航条
简单的DIV CSS代码布局实现导航条一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现.同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深. 导航 ...

css动感线条,使用css3制作动感导航条示例

css动感线条,使用css3制作动感导航条示例相关推荐

最新文章

热门文章