CSS3實現橫向滾動功能表按鈕的範例程式碼分享

來源:互聯網
上載者:User
今天給大家分享基於css3實現精美橫向滾動功能表按鈕,非常不錯,具有參考借鑒價值,需要的的朋友參考下吧

廢話不多說,直接:

然後是代碼:

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>精美橫向滾動功能表按鈕 - Glunefish</title>    </head><!-- 這裡接下面的行間樣式 -->    <body>        <ul>            <li><a href="" class="a1"><span>Home</span></a></li>            <li><a href="" class="a2"><span>Chat</span></a></li>            <li><a href="" class="a3"><span>About</span></a></li>        </ul>    </body></html>

CSS:

 <style>        ul{list-style:none;}        ul li a{            display:block;            width:40px;            height:40px;             background:rgb(208,165,37);             margin-top:10px;             text-decoration:none;             line-height:40px;             position:relative;            }        ul li a span{            width:0;             height:40px;            display:block;            visibility:hidden;            overflow:hidden;            font-weight:bold;            position:absolute;            left:40px;            transition:all 0.3s;            }        ul li .a1 span{background:rgb(30,139,180);}        ul li .a2 span{background:rgb(125,163,23);}        ul li .a3 span{background:rgb(175,30,131);}        ul li a:hover span{visibility:visible; width:auto; padding:0 20px;}    </style>

為了便於閱讀特別最佳化了一下代碼,主要涉及到:

CSS3動畫 (transtion)

元素的隱藏 (overflow / visibility)

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.