废话不多说，直接上图：

然后是代码：

<!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. 模拟15 题解（waiting）

    T1 60%算法 定义f[i][j]表示枚举到i位置,已经使用过了j个队, $f[i][j]+=f[i-1][t] ( t \in [max(0,j-k),j])$滚动一下 这是个O(n^3)的,考虑 ...

  2. arcgis信息窗口

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. python第一天 ：计算机基础(一)

    1.什么是编程语言 答:人类与计算机交流的介质 2.什么是编程 答:利用编程语言控制计算机解决问题 3.为什么要编程 答:可以控制计算机做事,提高生产生活效率 4.计算机的五大组成部分分别有什么作用? ...

  4. SQLSERVER 根据传入的参数拼接sql语句字符串，反馈结果集

    ALTER PROCEDURE [dbo].[usp_visit_detail](@siteid BIGINT, @Startime VARCHAR(15), @Endtime  VARCHAR(15 ...

  5. Bigdecimal 相加结果为0的解决

    之前很少使用这样的一个对象BigDecimal,今天在改需求的时候遇到了,结果坑爹的怎么相加最后都为零. 代码如下: BigDecimal totalAmount = new BigDecimal(0 ...

  6. java 4对象群体的组织

    两个接口 collecion接口 元素构成的元素的群体 map接口 键值对组成的群体 Array类 Vector ArrayList 在数组上构建的类 Java集合框架介绍 集成过得数据结构 查询方法 ...

  7. KiCad 工程用 Git 管理需要忽略哪些文件？

    KiCAD 工程用 Git 管理需要忽略哪些文件? KiCAD 使用的 文本格式,天生可以用 Git 来管理. 但是并非所有文件需要使用 Git 管理,以下文件可以忽略. *.bak fp-info- ...

  8. 学习es6

    #第一节 初始化项目 npm init -y 安装babel-cli npm install -g babel-cli npm install --save-dev babel-preset-es20 ...

  9. Amazon Redshift数据迁移到MaxCompute

    Amazon Redshift数据迁移到MaxCompute Amazon Redshift 中的数据迁移到MaxCompute中经常需要先卸载到S3中,再到阿里云对象存储OSS中,大数据计算服务Ma ...

  10. The World's Top 15 Stock Exchanges by Domestic Market Capitalization

     The World's Top 15 Stock Exchanges by Domestic Market Capitalization in 2008 4 Euronext Belgium, Fr ...