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


Posted in HTML / CSS onApril 14, 2017

废话不多说,直接上图:

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)

HTML / CSS 相关文章推荐
CSS3 box-sizing属性
Apr 17 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
真正了解CSS3背景下的@font face规则
May 04 #HTML / CSS
手把手教你用纯css3实现轮播图效果实例
May 04 #HTML / CSS
使用HTML5和CSS3表单验证功能
May 05 #HTML / CSS
CSS3实现任意图片lowpoly动画效果实例
May 11 #HTML / CSS
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 #HTML / CSS
css3图片边框border-image的用法
Jun 30 #HTML / CSS
css3 border-radius属性详解
Jul 05 #HTML / CSS
You might like
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
phplot生成图片类用法详解
2015/01/06 PHP
php编程每天必学之验证码
2016/03/03 PHP
PHP错误机制知识汇总
2016/03/24 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
客户端静态页面玩分页
2006/06/26 Javascript
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
跟老齐学Python之??碌某?? target=
2014/09/12 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
详解Django配置优化方法
2019/11/18 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
建议书标准格式
2014/03/12 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
超市主管竞聘书
2015/09/15 职场文书
mysql事务对效率的影响分析总结
2021/10/24 MySQL
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers