css3实现光标悬浮滚动菜单

效果:http://hovertree.com/texiao/css3/21/本文所用到的CSS知识请点击效果展示也中第一和第二个链接。代码:转自:http://hovertree.com/h/bj

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120531.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • thymeleaf判断对象是否为空的相关逻辑处理

    thymeleaf判断对象是否为空的相关逻辑处理thymeleaf判断对象是否为空有关逻辑处理在项目中,有时会遇到下面场景:添加页面和编辑页面共用一个页面,而通过后台传来的对象来判断提示用户是编辑页面还是添加页面,而编辑页面要使用这个对象的,添加页面用不到。在此记录下自己遇到的问题,看到了别人的博客才解决了@RequestMapping(path={“/add”,”edit”},method={RequestMethod.GET})publicStringaddOrEdit(Modelmodel,@RequestParam

  • ya系列圆振动筛_L型厨房设计好不好

    ya系列圆振动筛_L型厨房设计好不好‘资料下载链接’:https://download.csdn.net/download/dwf1354046363/21778034YAH2460型圆振动筛设计摘要目前我国各种选煤厂使用的设备中,振动筛(筛分机)是问题较多、维修量较大的设备之一。这些问题突出表现在筛箱断梁、裂帮、稀油润滑的箱式振动器漏油、齿轮打齿、轴承温升过高、噪声过大等问题,同时伴有传动带跳带、断带等故障。这类问题直接影响了振动筛(筛分机)的使用寿命,严重影响了生产。YAH—2460型圆振动筛可以很好的解决此类问题,因此本

  • 初学者该掌握的计算机知识,初学者该如何学习电脑知识

    初学者该掌握的计算机知识,初学者该如何学习电脑知识看到不少刚入门的电脑刚入门者找不到适合自己的学习方法,到处碰壁,那么呢?接下来大家跟着小编一起来了解一下学习电脑知识的解决方法吧。初学者学习电脑知识方法第一阶段:鼠标和键盘的操作鼠标的操作主要是:移动、拖动、单击、双击和右击,知道鼠标的作用以及基本操作。掌握键盘的操作,可以通过打字练习来完成,熟悉键盘排列,可以熟练打字。第二阶段:操作系统的学习对windowsxp的了解,知道xp系统有哪些基本功…

  • MATLAB画图——基础篇「建议收藏」

    MATLAB画图——基础篇「建议收藏」MATLAB画图——基础篇在MATLAB使用的过程中,学会画图是一项必要的技能。在这里,我总结了部分简单的画图函数,同时附上代码(本文中的程序为了方便给出的数据都很简单,大家可以自己去尝试其他数据)。这对刚刚开始接触MATLAB的小白来说,我认为还是很有帮助的。文章目录一、plot()函数1.二维图形(1)绘图选项(2)图形的辅助标注和窗口的分割(3)格式2.三维图形(1)格式(2)网格矩阵生成函数:meshgrid(3)mesh函数(4)surf函数二、特殊图形1.对数坐标图2.极坐标图3.条形图一

  • 移动站Web开发图片自适应两种常见情况解决方案

    移动站Web开发图片自适应两种常见情况解决方案

    2021年11月17日
  • 一致性hash算法 java实现_信息的一致性

    一致性hash算法 java实现_信息的一致性介绍一致性Hash算法是实现负载均衡的一种策略,后续会写如何实现负载均衡一致哈希是一种特殊的哈希算法。在使用一致哈希算法后,哈希表槽位数(大小)的改变平均只需要对K/n个关键字重新映射,其中K是关键字的数量,n是槽位数量。然而在传统的哈希表中,添加或删除一个槽位的几乎需要对所有关键字进行重新映射。强哈希考虑到单服务器不能承载,因此使用了分布式架构,最初的算法为hash()modn,hash()通常取用户ID,n为节点数。此方法容易实现且能够满足运营要求。缺点是当单点发

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号