效果：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. [译] 理解PHP内部函数的定义（给PHP开发者的PHP源码-第二部分）

    文章来自:http://www.hoohack.me/2016/02/10/understanding-phps-internal-function-definitions-ch 原文:https:/ ...

  2. dagger2 备注

    dagger 2是android下的IOC框架,类似java服务端的spring,但功能上远没有其强大.个人理解不管是APP还是服务端依赖注入的本质都是一样的,用于解耦某个服务的定义和实现.我自己给出 ...

  3. 译文---C#堆VS栈(Part One)

    前言 本文主要是讲解C#语言在内存中堆.栈的使用情况,使读者能更好的理解值类型.引用类型以及线程栈.托管堆. 首先感谢原文作者:Matthew Cochran 为我们带来了一篇非常好的文章,并配以大量 ...

  4. 用 maven filter 管理不同环境的配置文件

    使用 maven profile 一个项目可以部署在不同的环境当中,maven 的 profile 针对不同的环境指定各自的编译方法.在 pom.xml 的 profile 中,可以根据不同的环境定制 ...

  5. TODO：Golang UDP连接简单测试慎用Deadline

    TODO:Golang UDP连接简单测试慎用Deadline UDP 是User Datagram Protocol的简称, 中文名是用户数据报协议,是OSI(Open System Interco ...

  6. java 反编译利器JD-JUI

    下载地址: http://download.csdn.net/download/suixingbugai/4145221

  7. iOS-Swift编程

    概述 Swift是苹果2014年推出的全新的编程语言,它继承了C语言.ObjC的特性,且克服了C语言的兼容性问题.Swift发展过程中不仅保留了ObjC很多语法特性,它也借鉴了多种现代化语言的特点,在 ...

  8. Unknown lifecycle phase "mvn". You must specify a valid lifecycle phase or a goal in the format <plugin-prefix>:<goal> or <plugin-group-id>:<plugin-artifact-id>[:<plugin-version>]:<goal>

    在用maven命令启动storm时候,命令行是:mvn exec:java -Dexec.mainClass="TopologyMain" -Dexec.args="sr ...

  9. 使用Java纯代码实现MySQL的连接

      建立数据库 1. 点击连接-->MySQL: 输入连接名 . 主机名/IP地址 .端口 .用户名.密码(没有密码就省略),然后点击确定,建立的表格是灰色表示关闭状态,双击开启 2. 重新创建 ...

  10. Struts框架

    Struts是最早的Java开源框架之一,它是MVC设计模式的一个优秀实现. Struts定义了通用的Controller(控制器),通过配置文件(通常是 Struts -config.xml) Ec ...