css3学习过程中导航条的制作笔记

来源：互联网发布：linux java内存查看编辑：程序博客网时间：2024/04/29 08:40

导航菜单效果图：

使用了css3知识点制作：有一下几点：

1：将方角画成圆角：border-radius

2：阴影效果使得有立体感：box-shadow:

3：过度效果：transform里的rotate() ，并使用transition设置了过度的对象，时间，方式

还使用了rgba()来调节颜色的透明度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
ul{
display: block;
width: 400px;
height: 70px;
background:rgba(15,222,39,0.3);
/*制作圆角*/
border-radius:20px;
/*制作立体的导航条*/
box-shadow: 5px 8px 5px rgba(11,147,43,0.4);
}
ul>li{
display: inline-block;
margin: 20px auto;
/*设置 a过度的对象，时间，过度方式*/
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;

}
a{
text-decoration: none;/*去掉超链接的下划线*/
font-size: 24px;
margin: 0 6px;
font-weight: bold;
/*设置立体的字体*/
color: rgba(231,249,33,1);
text-shadow:4px 2px 3px rgba(13,180,111,1);

}
/*给导航条设置分割线*/
ul>li:before{
content: '';
border: 1px solid rgba(13,180,111,0.5);
}
/*隐藏第一个分割线*/
li:first-child:before{
border:0px;
}
/*使得每个菜单会动*/

li:hover{
/*设置li旋转一定的角度*/

-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);

}
</style>
</head>
<body>
<ul>
<li><a href="">首页</a></li>
<li><a href="">水果</a></li>
<li><a href="">蔬菜</a></li>
<li><a href="">肉类</a></li>
<li><a href="">配料</a></li>
</ul>

</body>
</html>

0 0