关闭

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

190人阅读 评论(0) 收藏 举报
分类:

导航菜单效果图:

使用了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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:13507次
    • 积分:645
    • 等级:
    • 排名:千里之外
    • 原创:47篇
    • 转载:0篇
    • 译文:6篇
    • 评论:0条