废话不多说，直接上图：

然后是代码：

<!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. sqlyog备份数据和导入备份数据

    使用sqlyog备份数据 Database -> Backup/Export  -> Backup Database As SQL Dump 根据自己实际情况,看需要 导出表结构或者仅仅只 ...

  2. SASS：sass语法参照列表及教程

    http://sass-lang.com/documentation/file.SASS_REFERENCE.html 保存一下,上面的链接包括了scss中所有语法规则. 转载自:http://www ...

  3. 微信小程序之组件的集合（一）

    小程序中是很强调组件中开发的,我们看到的页面是由许多组件组成的,但是这些组件是如何组合在一起的呢?来学习一下!  一.组件中数据的获取 接着上一篇文章,继续来优化代码,如何把从服务器上获取的数据显示到 ...

  4. Calendar to julian date format

    1.JULIAN DATE 定义 2.示例: 定义枚举: public enum JulianDateType    {        /// <summary>        /// J ...

  5. 编译libusb库

    之前需要安装依赖库 : libudevautomakeautoconflibtool ./bootstrap.sh ./configure --with-pic --prefix=/home/libu ...

  6. POJ 1061 扩展欧几里得

    #include<stdio.h> #include<string.h> typedef long long ll; void gcd(ll a,ll b,ll& d, ...

  7. HDU 4006优先队列

    //按照降序排列,而且队列中只保存k个元素 #include<stdio.h> #include<queue> using namespace std; int main(){ ...

  8. arcgis几何对象

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

  9. ELK学习目录

    DAY1.elasticsearch和kibana环境搭建以及简单介绍 A:环境搭建配置 (1)java虚拟机安装:https://www.cnblogs.com/studybrother/p/108 ...

  10. npm run dev 和 npm run serve

    1.ERR引发的思考 创建好的 vue 项目直接执行 vue run dev 报错?运行 vue run serve 就可以启动...如下 npm run dev npm ERR! missing s ...