废话不多说，直接上图：

然后是代码：

<!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. stack的基本使用方式

    #include <iostream> #include <stack>//头文件 using namespace std; stack<int> S; int m ...

  2. 【笔记】http1.1支持的7种请求方法

    本文是本人复习http协议整理笔记,以备后续查阅. http1.1支持的7种请求方法:get.post.head.options.put.delete.trace 在internet应用中,最常用的请 ...

  3. arcgis图层控制

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. 手机端点击键盘无法获取keyCode值的部分时隐藏键盘并执行事件

    用计时器监视window.innerHeight高度改变来判断.触发键盘其他地方也有事件反应 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  5. 开源PaaS平台：Cloudify

    Cloudify是gigaspaces公司推出的基于java的paas平台. refer to :http://timeson.iteye.com/blog/1699730

  6. Spring Boot → 01：概要

    背景 大约20年前,程序员们使用“企业级Java Bean”(EJB)开发企业应用,需要配置复杂的XML. 在二十世纪初期,新兴Java技术——Spring,横空出世.使用极简XML和POJO(普通J ...

  7. CSS预处理——LESS

    LESS是什么? less是一门CSS预处理语言.由于CSS本身并不是程序式语言,不方便维护和扩展,没有变量.函数.作用域等概念.而LESS在CSS的基础语法之上,引入了变量.Mixin混入.运算以及 ...

  8. 使用cnpm真的会有诡异的Bug

    前端网页居然会出现堆栈溢出,然后网页崩溃,退出的问题. 出现这个Bug的时候,我非常的怀疑我自己的一些操作能力,比如,git的操作. 毕竟我是本地代码然后拉取远程分支,还会暂存自己的代码,然后暂存区代 ...

  9. 利用幂等性区分HTTP的POST与PUT请求

    1.什么是幂等性 幂等性概念:幂等通俗来说是指不管进行多少次重复操作,都是实现相同的结果. 2.REST请求中哪些是幂等操作 GET,PUT,DELETE都是幂等操作,而POST不是,以下进行分析: ...

  10. Linux下配置 Keepalived（心跳检测部署）

    首先呢,我想先给大家简单介绍一下什么是keepalived: Keepalived的作用是检测服务器的状态,如果有一台web服务器死机,或工作出现故障,Keepalived将检测到,并将有故障的服务器 ...