效果：http://hovertree.com/texiao/css3/21/

本文所用到的CSS知识请点击效果展示也中第一和第二个链接。

代码：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>css3实现光标悬浮滚动菜单 - 何问起</title><base target="_blank" />

<meta charset="utf-8" />

<style>

html{height:100%;font-family: 'Roboto Condensed';}

body{min-height:100%; background-image: -webkit-radial-gradient(top, circle cover, #252233 0%, #252233 80%);

background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);

background-image: -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);

background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);} 

*{margin:0;padding:0;}

body{text-align:center;padding:20px 0;}

h1{font-size:1.8em;color:#fff;margin-bottom:50px;letter-spacing:-1px;text-transform:capitalize;text-shadow:0 2px 2px rgba(0,0,0,0.6);}

/* scroll-menu */

.scroll-menu{background-color:rgba(0,0,0,0.4);border-bottom:1px solid rgba(255,255,255,0.25);box-shadow:0 0 8px rgba(0,0,0,0.4) inset;border-radius:16px;margin:0;padding:0 30px;}

.scroll-menu{display:inline-block;text-align:center;height:50px;overflow:hidden;}

.scroll-menu li a{letter-spacing:-1px;text-decoration:none;text-transform:uppercase;color:#FFF;}

.scroll-menu li{float:left;height:100%;list-style:none;margin:0 30px;}

.scroll-menu li *{display:inline-block;font-size:1.3em;line-height:50px;}

.scroll-menu li a{margin-top:-50px;transition:0.3s cubic-bezier(0.1, 0.1, 0.5, 1.4);}

.scroll-menu li a:before{content:attr(data-text);/*使用data-text属性的值*/

display:block;color:greenyellow;}

.scroll-menu li a:hover{margin-top:0;}

a{color:yellow}

</style>

</head>

<body>

<h1>css3实现光标悬浮滚动菜单</h1>

<ul class="scroll-menu">

<li><a data-text='CSS3' href="http://hovertree.com/h/bjaf/css3before.htm">CSS</a></li>

<li><a data-text="HTML5" href="http://hovertree.com/h/bjaf/transition.htm">HTML</a></li>

<li><a data-text="Javascript" href="http://hovertree.com/menu/javascript/">JavaScript</a></li>

<li><a data-text="何问起" href="http://hovertree.com/">何问起</a></li>

</ul>

<div>

<a href="http://hovertree.com/" id="hovertreebefore">何问起</a> <a href="http://hovertree.com/h/bjaf/rnqpxtsq.htm">原文</a> <a href="http://hovertree.com/texiao/">特效库</a>

</div>

</body>

</html>

转自：http://hovertree.com/h/bjaf/rnqpxtsq.htm

特效库：http://www.cnblogs.com/roucheng/p/texiao.html

css3实现光标悬浮滚动菜单的更多相关文章

  1. 【CSS3】精美横向滚动菜单按钮

    废话不多说,直接上图: 然后是代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  2. CSS3按钮鼠标悬浮光圈效果

    1 .HTML相关知识点  HTML(超文本标记语言)是网页的核心.首先你要学会,不要害怕,HTML很容易学习的,刚开始多记多练,但是到最后还是要自己深入专研,简单的入门是很快,但学好HTML是成为W ...

  3. 【CSS3】---练习制作导航菜单

    练习题 根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用box-shadow实现立体风格 3.制 ...

  4. Day17 表单验证、滚动菜单、WEB框架

    一.表单验证的两种实现方式 1.DOM绑定 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  5. jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解

    在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...

  6. html5和css3实现的3D滚动特效

    今天给大家带来一款html5和css3实现的3D滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"&g ...

  7. 非常酷的CSS3垂直下拉动画菜单

    昨天我向大家介绍了一款兼容性不错的jQuery淡入淡出下拉菜单,今天要分享一款相对绚丽的CSS3垂直下拉动画菜单,不过需要支持CSS3的浏览器才能有效果.下面是效果图,一起看看. 我们也可以在这里查看 ...

  8. 一款纯css3实现的环形导航菜单

    之前为大家介绍了好几款导航菜单,今天要给大家带来一款纯css3实现的环形导航菜单.该导航比较新鲜,列表图标位于中间,单击列表图标的时候,各项分布于列表图表的四周.形成一个环形.效果图如下: 在线预览  ...

  9. 纯css3响应式3d翻转菜单

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...

随机推荐

  1. Net作业调度(四)—quartz.net持久化和集群

    介绍 在实际使用quartz.net中,持久化能保证实例重启后job不丢失. 集群能均衡服务器压力和解决单点问题. quartz.net在这两方面配置都比较简单. 持久化 quartz.net的持久化 ...

  2. Google分布式构建软件之一：获取源代码

    本文原文在google开发者工具组的博客上[需要FQ],以下是我的翻译,欢迎转载,但尊重作者版权,注名原文地址. 在Google,所有的产品都是在主干上开发的.这样的好处:每个人都可以查看和修改代码, ...

  3. TODO：MongoDB MySQL数据库备份

    TODO:MongoDB MySQL数据库备份 1. MongoDB使用命令备份 mongodump进行整个数据库备份,主要用到的命令参数: -d 要备份的数据库 -o 输出的路径 ./mongodu ...

  4. 使用JavaMail创建邮件发送邮件

    一.RFC882文档简单说明 RFC882文档规定了如何编写一封简单的邮件(纯文本邮件),一封简单的邮件包含邮件头和邮件体两个部分,邮件头和邮件体之间使用空行分隔. 邮件头包含的内容有: from字段 ...

  5. 《像计算机科学家一样思考Java》—— 读后总结

    本书属于入门级的Java书籍,与其他的向编程思想.核心技术不同的是,这本书不是按部就班的讲解java变成知识,而是随着语言的深入慢慢增加知识点. 这本书以一个语言开发者的角度,深入浅出的讲解了Java ...

  6. Atitti  onvif 设备发现与原理

    Atitti  onvif 设备发现与原理 1.1. ,有以下几个步骤:1 1.2. 设备搜索原理及编程技巧:2 1.3. Ws disconvert 的组播地址和端口就是37022 1)发现ipca ...

  7. GUID简介

    GUID (全局唯一标识符) 编辑 全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点. ...

  8. 复习sql第三次

    1.层次型数据库以"树"结构表示数据库中数据间的关系:网状型以"图"结构表示数据库中数据间的关系:关系型数据库以"二维表"结构表示数据库中数 ...

  9. SSIS Design6：利用数据流

    数据流利用内存来缓冲数据,并在内存中处理数据转换,由于内存的访问速度是非常快的,所以SSIS数据流转换性能是非常高效的.SSIS Engine将数据分批加载到内存中,当Data Flow将一批新的数据 ...

  10. 通知：逆天异常库 V1.0版本支持下载了~~

    百度网盘:http://pan.baidu.com/s/1bongheJ GitHub:https://github.com/dunitian/LoTDotNet