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

原创 2015年11月18日 15:48:22

导航菜单效果图:

使用了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制作导航条和毛玻璃效果

导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些。简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理。这种效果对用户来说是十分具有视觉冲击力的。 本次分享...

HTML5与CSS3学习笔记:导航栏(一)

源码 横向导航栏 body { margin: 0px; padding:

【学习笔记+实践】简单的导航条菜单制作

1、用无序列表构建菜单; 2、垂直菜单转变为水平菜单:float:left; 3、在制作圆角菜单时,背景图片贴在标签上; 4、在制作改变高度的伸缩菜单时,实现高度向上延伸的技巧:margin-top用...

HTML+CSS实战(一)——导航条菜单的制作

一、垂直导航菜单的制作 1、基本的样式清除: *{margin:0;padding:0} 2、无序列表圆点去除: ul{list-style:none} 3、下划线去除: a{text-deco...
  • mqy1023
  • mqy1023
  • 2016年03月14日 22:34
  • 5211

css代码制作圆角边黑灰斜纹背景导航条

css代码制作圆角边黑灰斜纹背景导航条 演示图片: 详细代码: 圆角边黑灰斜纹背景css导航菜单(1) body,ul,li{margin:0;padding:0;} li...

HTML/css理解before:after:学习之-导航条案例2

本次实例介绍了css动画的一部分,有利于初学者理解before:与after:的基本使用。...

html+ js+ jq+css导航条菜单的制作(水平,竖直,伸缩,带有动画效果等等。。。)

第一种导航菜单,最普通的:(竖直的) *{margin: 0;padding: 0;font-size: 14px;} ul{list-style: none;width:...

CSS快速学习:几种导航条案例

导航条 * {margin:0; padding:0;} ul li {list-style:none;} body {background:#000;} a {color:#333; fo...

纯css制作23种导航条菜单

  • 2013年11月08日 14:25
  • 63KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3学习过程中导航条的制作笔记
举报原因:
原因补充:

(最多只允许输入30个字)