Home >Web Front-end >CSS Tutorial >CSS3 shows horizontal scrolling menu button effect code
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>
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>
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!