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 相关文章推荐
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
CSS3的Flexbox布局的简明入门指南
Apr 08 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
PHP 批量删除 sql语句
2009/06/05 PHP
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
php树型类实例
2014/12/05 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
sina的lightbox效果。
2007/01/09 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
python查找目录下指定扩展名的文件实例
2015/04/01 Python
在Python中使用SQLite的简单教程
2015/04/29 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
个人实用的自我评价范文
2013/11/23 职场文书
电钳专业个人求职信
2014/01/04 职场文书
淘宝活动策划方案
2014/02/06 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
政治学求职信
2014/06/03 职场文书
药剂专业自荐书
2014/06/20 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
党委工作总结2015
2015/04/27 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript