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的定位页面元素
Aug 29 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
使用CSS实现音波加载效果
May 07 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 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
处理单名多值表单的详解
2013/06/08 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
PHP实现图片压缩
2020/09/09 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python字符串详细介绍
2015/05/09 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Python编写一个闹钟功能
2017/07/11 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
竞选演讲稿范文
2013/12/28 职场文书
民生工作实施方案
2014/05/31 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
公民授权委托书
2014/10/15 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python
Python 键盘事件详解
2021/11/11 Python
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
Vue全局事件总线你了解吗
2022/02/24 Vue.js