xiaokehai的专栏

我以乌龟的速度,笨鸟的思想,前进,不要问自己可不可能,若不去做则更不可能...

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

导航菜单效果图:

使用了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>
阅读更多
个人分类: css3
想对作者说点什么? 我来说一句

Flash 网站黑色精美导航条

2011年10月25日 6.84MB 下载

html5+css3+js实现的导航栏

2015年12月09日 4KB 下载

css3、html5、js笔记(传智播客)

2017年11月20日 36.29MB 下载

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭