css3实现光标悬浮滚动菜单

效果: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

时间: 2024-10-09 22:17:38

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

html5 + css3 带音效下拉菜单的实现

原文:scripts tutorials    (来自脚本教程网的教程,翻译可能有些不对...想要试试 音效下拉菜单 在这个教程中我们将讲述如何开发酷炫的音效下拉菜单(html5 + css3).下拉菜单有css3动画效果(菜单元素有整洁的悬浮特效)同时也使用了html5的Audio元素来添加菜单的音效,准备好了吗?那就开始吧. Musical drop down menu Our new tutorial tells about developing cool musical drop dow

CSS3按钮鼠标悬浮光圈效果

1 .HTML相关知识点  HTML(超文本标记语言)是网页的核心.首先你要学会,不要害怕,HTML很容易学习的,刚开始多记多练,但是到最后还是要自己深入专研,简单的入门是很快,但学好HTML是成为Web开发人员的基本条件. 学习资源: HTML Dog (http://htmldog.com/) HTML入门指南 (http://www.w3.org/MarkUp/Guide/) W3C HTML学习教程 (http://www.w3schools.com/html/) 2.CSS3相关知识点

CSS3/jQuery创意盒子动画菜单

作为前端开发者,各种各样的jQuery菜单见过不少,这款jQuery/CSS3菜单却是别具一格,菜单项嵌入到九宫格中,像小盒子一样,加上温馨的背景,菜单整体外观十分可爱.点击菜单项,盒子就会展开,展示该菜单项具体的内容.该CSS3菜单在展开时也有不错的动画效果. 在线演示源码下载 原文链接:http://www.html5tricks.com/css3-jquery-box-menu.html CSS3/jQuery创意盒子动画菜单,布布扣,bubuko.com

Day17 表单验证、滚动菜单、Django

一.表单验证的两种实现方式 1.DOM绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单验证(DOM绑定)</title> <style> .item{ width: 250px; height: 60px; position: relative; } .item input{ wid

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

之前为大家介绍了好几款导航菜单,今天要给大家带来一款纯css3实现的环形导航菜单.该导航比较新鲜,列表图标位于中间,单击列表图标的时候,各项分布于列表图表的四周.形成一个环形.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <h1> Cool Open/Close menu in full CSS</h1> <input type="checkbox" id

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

在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代码 首先给出手风琴折叠菜单的HTML代码,如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3垂直手风琴折叠菜单DEMO演示</titl

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

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

jQuery/CSS3大屏下拉菜单 自定义子菜单内容

这是一款样式很酷的jQuery/CSS3下拉菜单,首先这款CSS3菜单是宽屏的,主要是下拉菜单非常大气,更重要的是,下拉菜单的内容可以自己定义,也就是说,下拉菜单中可以定义菜单.图片等HTML元素,是一款非常实用的jQuery/CSS3下拉菜单插件. 在线预览   源码下载

【CSS3动画】下拉菜单模拟

下拉菜单模拟效果图: CSS3: <style> #box{width:200px; height:50px; overflow:hidden; cursor: pointer; transition: all 0.35s;} #box:hover{height:250px;} #box ul{list-style:none; margin:0; padding:0;} #box ul li{width:198px; height:48px; line-height: 50px; text-a