html和CSS3制作透明和阴暗背景导航

发布日期:2015-09-25 17:30:50

html和CSS3制作透明和阴暗背景导航

<!doctype html>     

<html lang="en">     

<head>     

 <meta charset="UTF-8">                

 <title>案例</title>     

   <style type="text/css">     

       *{ margin:0;padding:0; }     

       body{background:url("images/bg_title.jpg") repeat-x,url("images/bg.jpg");}     

       #Logo{     

           width:895px;height:45px;     

           /*margin:上下 左右*/     

           margin:50px auto;     

           border-radius:10px;     

           /*html + css3 渐变画图 */     

               background-image:-webkit-linear-gradient(rgba(41,41,41,0.75) 0% ,rgba(54,54,54,0.72) 50%,rgba(24,23,23,0.94) 51%);     

           box-shadow:1px 1px 33px #fff;/*设计阴影的*/     

       }     

       #Logo ul li     

       {     

           width:127px; height:45px;     

           list-style:none;/*去掉圆点*/     

           float:left;/*水平显示*/     

           color:white;/* #fff */     

           font-size:18px;     

           font-family:"微软雅黑";     

           text-align:center;     

           line-height:45px;/* 行高跟 高度一致时,竖直居中*/     

           border-right:1px solid #000;/*右边框*/     

       }     

       #Logo ul li a     

       {     

           color:white;/* #fff */     

           font-size:18px;     

           font-family:"微软雅黑";     

           text-decoration:none;     

       }     

       #Logo ul li:hover     

       {     

           background:rgba(10,5,5,0.45);     

       }     

       #Logo ul li.first:hover     

       {     

           border-radius:10px 0px 0px 10px;/*左上 左下 圆弧显示 */     

       }     

       #Logo ul li.last:hover     

       {     

           border-radius:0px 10px 10px 0px;/*右上 右下 圆弧显示 */     

       }     

       #Logo ul li ul li      

       {     

           border:none;     

           border-top:1px solid #989898;     

           background:rgba(10,5,5,0.45);/*颜色透明度 */     

           border-radius:10px;     

       }     

       #Logo ul li ul     

       {     

           display:none;/*不显示*/     

       }     

       #Logo ul li ul li:hover     

       {     

           background:rgba(10,5,5,0.8);/*颜色透明度 */     

           border-radius:10px;     

       }     

       #Logo ul li:hover ul     

       {     

           display:block;     

           -webkit-animation:roll 1s ease;/*roll 旋转名称,1s旋转效果 */     

       }     

       @-webkit-keyframes roll /*roll旋转名称与上面一致*/     

       {     

           0% {-webkit-transform:rotate(0deg);}     

           100% {-webkit-transform:rotate(360deg);}     

       }     

   </style>     

</head>     

<body>     

   <div id="Logo">     

       <ul>     

           <li class="first">      

               <a>网址<a>     

               <ul>     

                   <li>     

                       <a>百度</a>     

                   </li>     

                   <li>     

                       <a>新浪</a>     

                   </li>     

               </ul>     

           </li>     

           <li>      

               <a>新闻<a>     

           </li>     

           <li>      

               <a>视频<a>     

           </li>     

           <li>      

               <a>音乐<a>     

           </li>     

           <li>      

               <a>地图<a>     

           </li>     

           <li>      

               <a>问问<a>     

           </li>     

           <li class="last" style="border:none;">      

               <a>关于<a>     

           </li>     

       </ul>     

   </div>     

</body>     

</html>  

完成效果如下:

html和CSS3制作透明和阴暗背景导航html和CSS3制作透明和阴暗背景导航效果

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计