效果：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. 小菜学习设计模式（五）—控制反转（Ioc）

    写在前面 设计模式目录: 小菜学习设计模式(一)—模板方法(Template)模式 小菜学习设计模式(二)—单例(Singleton)模式 小菜学习设计模式(三)—工厂方法(Factory Metho ...

  2. Unity3D游戏开发初探—3.初步了解U3D物理引擎

    一.什么是物理引擎? 四个世纪前,物理学家牛顿发现了万有引力,并延伸出三大牛顿定理,为之后的物理学界的发展奠定了强大的理论基础.牛顿有句话是这么说的:“如果说我看得比较远的话,那是因为我站在巨人的肩膀 ...

  3. Mycat 月分片方法

    概述 本篇文章主要介绍Mycat以月进行分片的方法,包括配置方法.注意事项等. mycat版本:1.4 数据节点:dn1,dn2,dn3 架构:主从 配置  创建测试表 CREATE TABLE `t ...

  4. Linux 自动同步服务器时间

    200 ? "200px" : this.width)!important;} --> 介绍 Linux服务器运行久时,系统时间就会存在一定的误差,本篇文章就来介绍怎样使服务 ...

  5. 《3D Math Primer for Graphics and Game Development》读书笔记2

    <3D Math Primer for Graphics and Game Development>读书笔记2 上一篇得到了"矩阵等价于变换后的基向量"这一结论. 本篇 ...

  6. Go语言实战 - revel框架教程之权限控制

    一个站点上面最基本都会有三种用户角色,未登录用户.已登录用户和管理员.这一次我们就来看看在revel框架下如何进行权限控制. 因为revel是MVC结构的,每一个url其实都会映射到一个具体的Cont ...

  7. Atitit 图像处理 深刻理解梯度原理计算.v1 qc8

    Atitit 图像处理 深刻理解梯度原理计算.v1 qc8 1.1. 图像处理  梯度计算  基本梯度 内部梯度 外部梯度 方向梯度1 2. 图像梯度就是图像边缘吗?2 1.1. 图像处理  梯度计算 ...

  8. EditText的小细节

    EditText获取焦点时,右边图片的改变例如: <item android:state_window_focused="false" android:drawable=&q ...

  9. 导入镜像文件,分区启动liunx

    1:更改虚拟机配置 2:导入系统镜像 3:启动虚拟机,选择第一个选项回车 4:这里问你是否检查镜像,我们的镜像肯定没问题不需要检查,点击Skip 5:语言选择,按提示默认下一步 6:主机名也默认 7: ...

  10. 即时搜索(input框)

    做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下. 即时搜索的方案: (1)change事件    触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标 ...