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)


相关推荐

发表回复

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

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