介绍 & lt; ! doctype html>
& lt; html lang=癳n"祝辞
,,,& lt; head>
,,,,,,,& lt; meta charset=癠TF-8"比;
,,,,,,,& lt; title> CSS制作立体导航& lt;/title>
,,,,,,,& lt; link rel=皊tylesheet" https://www.yisu.com/zixun/, href=" http://www.w3cplus.com/demo/css3/base.css ">
<时尚>
身体{
背景:# ebebeb;
}
.nav {
宽度:560 px;
高度:50 px;
字体:粗体0/50px Arial;
text-align:中心;
保证金:40 0 px汽车;
背景:# f65f57;/*制作导航圆角*/border - radius: 8 px;/*制作导航立体效果*/不必:0 7 px 0 # ba4a45;
}
.nav一个{
显示:inline-block;/*元素的过渡属性:1,设置所有一个标签过渡;2,过渡时间;3、速度曲线:以慢速开始的过渡效果*/-webkit-transition:所有0.2 s在;/* Safari和Chrome */-moz-transition:所有0.2 s在;Firefox/* */-o-transition:所有0.2 s在;歌剧/* */-ms-transition:所有0.2 s在;/* IE 9 */过渡:所有0.2 s在;
}
.nav答:{徘徊/*鼠标移上时的效果,定义2 d旋转10度*/-webkit-transform:旋转(10度);
-moz-transform:旋转(10度);
-o-transform:旋转(10度);
-ms-transform:旋转(10度);
变换:旋转(10度);
}
李.nav {
位置:相对;
显示:inline-block;
填充:0 16 px;
字体大小:14 px;
文本阴影:1 px 2 px 4 px rgba (0, 0, 0, 0。5);
list-style:外面没有问题;
}/*制作导航分隔线效果*/.nav李::,
.nav李::{后
内容:“”;
位置:绝对的;
上图:14 px;
高度:25 px;
宽度:1 px;
}
.nav李::{后
右:0;/*线性渐变*/背景:-moz-linear-gradient(顶部,rgba (255255255 0), rgba (255255255。2) 50%, rgba (255255255 0));
背景:-webkit-linear-gradient(顶部,rgba (255255255 0), rgba (255255255。2) 50%, rgba (255255255 0));
背景:-o-linear-gradient(顶部,rgba (255255255 0), rgba (255255255。2) 50%, rgba (255255255 0));
背景:-ms-linear-gradient(顶部,rgba (255255255 0), rgba (255255255。2) 50%, rgba (255255255 0));
背景:线性渐变(顶部,rgba (255255255 0), rgba (255255255。2) 50%, rgba (255255255 0));
}
.nav李::{之前
左:0;
背景:-moz-linear-gradient(顶部,# ff625a, # 9 e3e3a 50%, # ff625a);
背景:-webkit-linear-gradient(顶部,# ff625a, # 9 e3e3a 50%, # ff625a);
背景:-o-linear-gradient(顶部,# ff625a, # 9 e3e3a 50%, # ff625a);
背景:-ms-linear-gradient(顶部,# ff625a, # 9 e3e3a 50%, # ff625a);
背景:线性渐变(顶部,# ff625a, # 9 e3e3a 50%, # ff625a);
}/*删除导航第一个导航项左边的分隔线*/.nav李:之前的第一个孩子:{
背景:无;
}/*删除导航最后一个导航右边的分隔线*/.nav李:{后胎::
背景:无;
}
.nav,
.nav答:{徘徊
颜色:# fff;
文字修饰:没有;
}> 头
身体<>
<李> 首页
<李> 个人简介
<李> 作品集
<李> 博客
<李> 资源
<李> 联系我
小编给大家分享一下怎么使用CSS制作立体导航栏,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
CSS制作的立体导航栏,具体实现代码如下所示: