【CSS3】精美横向滚动菜单按钮
2024-08-31 08:32:37
废话不多说,直接上图:
然后是代码:
<!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:;
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)
最新文章
- 同步异步,阻塞非阻塞 和nginx的IO模型
- Selenium+Python的环境配置
- BizTalk动手实验(六)Orchestration开发
- backbonejs中的集合篇(一)
- WPF 之 未捕获异常的处理
- 一本JavaEE的案例书
- ios登陆界面
- web并发模型
- WMware VMX格式转换成OVF
- jQuery扩展extend一
- 获取spring容器上下文(webApplicationContext)的几种方法
- 【Java基础】【21IO(字符流)&;字符流其他内容&;递归】
- 逆向工程vgenerator(三)
- 2019.01.14 bzoj2648: SJY摆棋子(kd-tree)
- 在Cygwin里,如何进入到C盘?
- JS重要的内置对象
- java中常量接口及实现常量接口的利与弊
- Python3的__new__进行构造类的实例化
- Java 中 Emoji 的正则表达式
- pythonUnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xe5 in position 108: ordinal not in range(128