CSS3 shows horizontal scrolling menu button effect code-CSS Tutorial-php.cn

CSS3 shows horizontal scrolling menu button effect code

零下一度

Release： 2017-04-17 14:45:01

Original

1937 people have browsed it

Today I will share with you the exquisite horizontal scrolling menu button based on css3. It is very good and has reference value. Friends who need it can refer to it

Without further ado, just go to the picture:

Then the code:

<!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>

Copy after login

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>

Copy after login

The code has been specially optimized for ease of reading, mainly involving:

CSS3 animation (transtion)

Hiding of elements (overflow / visibility)

The above is the detailed content of CSS3 shows horizontal scrolling menu button effect code. For more information, please follow other related articles on the PHP Chinese website!