CSS3实现精美横向滚动菜单按钮


Posted in HTML / CSS onApril 14, 2017

废话不多说,直接上图:

CSS3实现精美横向滚动菜单按钮

然后是代码:

<!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:0; 
            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)

HTML / CSS 相关文章推荐
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 HTML / CSS
真正了解CSS3背景下的@font face规则
May 04 #HTML / CSS
手把手教你用纯css3实现轮播图效果实例
May 04 #HTML / CSS
使用HTML5和CSS3表单验证功能
May 05 #HTML / CSS
CSS3实现任意图片lowpoly动画效果实例
May 11 #HTML / CSS
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 #HTML / CSS
css3图片边框border-image的用法
Jun 30 #HTML / CSS
css3 border-radius属性详解
Jul 05 #HTML / CSS
You might like
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
Python中Random和Math模块学习笔记
2015/05/18 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
WiFi云数码相框:Nixplay
2018/07/05 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
市政管理求职信范文
2014/05/07 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
管理失职检讨书范文
2015/05/05 职场文书
十二生肖观后感
2015/06/12 职场文书
Django REST framework 限流功能的使用
2021/06/24 Python
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
Python创建SQL数据库流程逐步讲解
2022/09/23 Python