废话不多说，直接上图：

然后是代码：

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

【CSS3】精美横向滚动菜单按钮的更多相关文章

  1. HTML5/CSS3鼠标悬停动画菜单按钮

    在线演示 本地下载

  2. css3实现光标悬浮滚动菜单

    效果:http://hovertree.com/texiao/css3/21/ 本文所用到的CSS知识请点击效果展示也中第一和第二个链接. 代码: <!DOCTYPE html> < ...

  3. css3 javascript 实现菜单按钮特效

    一个菜单按钮特效案例,简单的实现了动态效果. 代码效果预览地址: http://code.w3ctech.com/detail/2504 <div class="bar" i ...

  4. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 美妙的 CSS3 动画！一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

  6. Day17 表单验证、滚动菜单、WEB框架

    一.表单验证的两种实现方式 1.DOM绑定 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. IOS 类似网易新闻客户端内容滚动菜单跟随居中组件

    需求分析: 1.类似网易新闻客户端页面滚动组件.菜单栏对应菜单项一直居中 2.点击菜单栏可以切换到对应的page 3.滑动页面可以自动切换相应的菜单.并且对应的菜单栏居中显示 4.初始化时可以自定义菜 ...

  8. 基于CSS3飘带状3D菜单 菜单带小图标

    这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果.这款CSS3飘带状 ...

  9. Bootstrap学习-菜单-按钮-导航

    1.下拉菜单(基本用法) 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“d ...

随机推荐

  1. wamp httpd-vhosts.conf

    配置Apache的httpd.conf文件 Include conf/extra/httpd-vhosts.conf 修改apache的vhost文件 <VirtualHost *:> D ...

  2. cmd 运行 python

    ①cmd 进入行命令: ②输入 “python” + “空格”,即 ”python “:将已经写好的脚本文件拖拽到当前光标位置,然后敲回车运行即可.

  3. 使用dos行命令实现文件夹内文件名统计

    1.进入在dos环境下 2.进入需要统计的目录下. 3.使用命令 dir /b>e:1.xls 结果:会在路径(e:\资料\资料整理)下生成一个新的文件(1.xls).1.xls把路径(e:\资 ...

  4. 学习JDK1.8集合源码之--TreeSet

    1. TreeSet简介 TreeSet是Set的实现类之一,是不可重复集合,非线程安全的. TreeSet是SortedSet的唯一实现类,实现了元素的自动排序,排序不是以插入的顺序排序,而是默认以 ...

  5. HTML5拖放API实现拖放排序的实例代码

    想要拖放某个元素,必须设置该元素的 draggable 属性为 true,当该属性为 false 时,将不允许拖放.而 img 元素和 a 元素都默认设置了 draggable 属性为 true,可直 ...

  6. Percona XtraBackup 完全及增量备份与恢复的方法

    安装及备份.恢复实现 安装:其最新版的软件可从 http://www.percona.com/software/percona-xtrabackup/ 获得.本文基于CentOS6.x的系统,因此,直 ...

  7. 为什么学习React Native三点原因

    React Native不到两岁,兼容Android平台刚刚1年.我学习React Native其实也就不到1年,不算长,也不算短. Paul Graham在文章中写过:大多数人真正注意到你的时候,不 ...

  8. 【JZOJ4934】【NOIP2017GDKOI模拟1.12】a

    helpless fucking 结论:如果一个数可以被对于a序列中每个数的最大公约数整除,那么它就是好的. Bitch Man 感性证明: 贪心地想,对于a序列中的任意两个数,它们的最大公约数可由这 ...

  9. Directx11教程(32) 纹理映射(2)

    原文:Directx11教程(32) 纹理映射(2)     在写代码之前,我们先制作一个dds文件.从网上找到了一张照片,处理成为512*512,保存为jpg格式.     启动微软的directx ...

  10. [idea]idea配置tomcat 标签： tomcatidea 2017-03-12 22:12 402人阅读 评论(19)

    我们在使用idea的时候,一定会遇到的一步,就是使用tomcat来发布我们的项目,那么,如何在idea中设置tomcat呢?下面就随小编来一起学习一下吧. 设置tomcat 打开设置界面 Run-&g ...