码库记事本

码库记事本

CSS3实现精美横向滚动菜单按钮

小诸哥 0

废话不多说,直接上图:

然后是代码:

  1. <!DOCTYPE html>
  2. <html>
  3.      <head>
  4.          <meta charset="utf-8" />
  5.          <title>精美横向滚动菜单按钮 - Glunefish</title&gt;
  6.      </head>
  7. <!-- 这里接下面的行间样式 -->
  8.      <body>
  9.          <ul>
  10.              <li><a href="" class="a1"><span>Home</span></a></li>
  11.              <li><a href="" class="a2"><span>Chat</span></a></li>
  12.              <li><a href="" class="a3"&gt;<span>About</span></a></li>
  13.          </ul>
  14.      </body>
  15. </html>

css:

  1.      <style>
  2.          ul{list-style:none;}
  3.          ul li a{
  4.              display:block;
  5.              width:40px;
  6.              height:40px;
  7.              background:rgb(208,165,37);
  8.              margin-top:10px;
  9.      text-decoration:none;
  10.              line-height:40px;
  11.              position:relative;
  12.              }
  13.          ul li a span{
  14.              width:0;
  15.              height:40px;
  16.              display:block;
  17.              visibility:hidden;
  18.              overflow:hidden;
  19.              font-weight:bold;
  20.              position:absolute;
  21.              left:40px;
  22.              transition:all 0.3s;
  23.              }
  24.      ul li .a1 span{background:rgb(30,139,180);}
  25.          ul li .a2 span{background:rgb(125,163,23);}
  26.          ul li .a3 span{background:rgb(175,30,131);}
  27.          ul li a:hover span{visibility:visible; width:auto; padding:0 20px;}
  28.      </style>

 

为了便于阅读特别优化了一下代码,主要涉及到:

CSS3动画 (transtion)

元素的隐藏 (overflow / visibility)

标签: 菜单按钮 滚动菜单