效果：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. Express4 启航指南

    确实有感而发,Nodejs真的发展太快了,这么说的原因有两点:自己去年冬天买了本<了不起的Node.js>,里面介绍Express的版本还是2.x.x:前些天小伙伴买了本<Node. ...

  2. 搞懂 SynchronizationContext（第一部分）【翻译】

    SynchronizationContext -MSDN 很让人失望 我不知道为什么,目前在.Net下关于这个类只有很少的资料.MSDN文档也只有很少的关于如何使用SynchronizationCon ...

  3. 大叔也学Xamarin系列

    回到占占推荐博客索引 我就是我,请叫我仓储大叔 大叔听很多客户说,xamarin的资料网上太少了,是的,大叔也相信,因为大叔在学xamarin里确实很费劲,只能看看androd for java了,呵 ...

  4. Python框架之Tornado（四）源码之褪去模板外衣的前戏

    执行字符串表示的函数,并为该函数提供全局变量 本篇的内容从题目中就可以看出来,就是为之后剖析tornado模板做准备,也是由于该知识点使用的巧妙,所有就单独用一篇来介绍了.废话不多说,直接上代码: # ...

  5. jsp 分页， 判断是第一页，和最后一页.

    <% //页的行数 int pagesize =20; //当前页 int currentPage = 1; try { currentPage = Integer.parseInt(reque ...

  6. 以Excel 作为Data Source，将data导入db

    将Excel作为数据源,将数据导入db,是SSIS的一个简单的应用,下图是示例Excel,数据列是code和name 第一部分,Excel中的数据类型是数值类型 1,使用SSDT创建一个package ...

  7. Linq 知识回顾

    开篇语 在说LINQ之前必须先说说几个重要的C#语言特性 与LINQ有关的语言特性 隐式类型 (1)源起 在隐式类型出现之前, 我们在声明一个变量的时候, 总是要为一个变量指定他的类型 甚至在fore ...

  8. 把DATATABLE,DS中的内容用HTML的方式显示

    前几天,在搞一个数据显示的时候,因为是不固定的列的,所以需要动态创建列,这里面就运用一下,直接把数据库的Table显示在Html上,有两种方法,但是都有相应的缺点,第一个,如果内容太多,长度不好控制, ...

  9. Oracle之PL/SQL学习笔记

    自己在学习Oracle是做的笔记及实验代码记录,内容挺全的,也挺详细,发篇博文分享给需要的朋友,共有1w多字的学习笔记吧.是以前做的,一直在压箱底,今天拿出来整理了一下,给大家分享,有不足之处还望大家 ...

  10. 【记录】T-SQL 分组排序中取出最新数据

    示例 Product 表结构: 示例 Product 表数据: 想要的效果是,以 GroupName 字段分组,取出分组中通过 Sort 降序最新的数据,通过示例数据,可以推算出结果数据的 ID 应该 ...