废话不多说，直接上图：

然后是代码：

<!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. C 语言中 #pragma 的使用

    在所有的预处理指令中,#Pragma指令可能是最复杂的了,它的作用是设定编译器的状态或者是指示编译器完成一些特定的动作.#pragma指令对每个编译器给出了一个方法,在保持与C和C++语言完全兼容的情 ...

  2. LintCode刷题笔记-- BackpackIII

    标签:动态规划 问题描述: Given n items with size Ai and value Vi, and a backpack with size m. What's the maximu ...

  3. python输出最大公约数和最小公倍数

    def myfun(): num1 = int(input('输入num1')) num2 = int(input('输入num2')) list1=[] for i in range(1, max( ...

  4. 常用命令3-文件搜索命令1-locate

    新建文件搜索不到,是因为查询是从数据库里查询的,然后数据库是一天后才更新,但是可以强制更新. 优点:能进行模糊搜索. 在tmp目录下创建一个文件,发现,在root家目录下搜不到.是因为配置文件原因. ...

  5. C++中数字转换成字符串

    头文件:<string> 转换函数:to_string(); 例如:int n=10;  string str=to_string(n) ;

  6. 【转载】【python】python练手项目

    入门篇 1.Python - Python 图片转字符画 50 行 Python 代码完成图片转字符画小工具. &lt;img src="https://pic3.zhimg.com ...

  7. Thrift源码分析（一）-- 基本概念

    我所在的公司使用Thrift作为基础通信组件,相当一部分的RPC服务基于Thrift框架.公司的日UV在千万级别,Thrift很好地支持了高并发访问,并且Thrift相对简单地编程模型也提高了服务地开 ...

  8. 【JZOJ3854】【NOIP2014八校联考第2场第2试9.28】分组(group)

    MEi Bsny所在的精灵社区有n个居民,每个居民有一定的地位和年龄,ri表示第i个人的地位,ai表示第i个人的年龄. 最近社区里要举行活动,要求几个人分成一个小组,小组中必须要有一个队长,要成为队长 ...

  9. 【记录Bug】 This is probably not a problem with npm. There is likely additional logging output above.

    一个eslint的错误 我的报错如下 $ npm install > node-sass@4.11.0 install C:\Users\Administrator\Desktop\forGit ...

  10. 为什么printf()用%f输出double型，而scanf却用%lf呢？

    之前没有注意过这个问题,  转自: http://book.51cto.com/art/200901/106880.htm 问:有人告诉我不能在printf中使用%lf.为什么printf()用%f输 ...