本文所用到的CSS知识请点击效果展示也中第一和第二个链接。
代码：
css3实现光标悬浮滚动菜单 - 何问起 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} css3实现光标悬浮滚动菜单
CSS HTML JavaScript 何问起 何问起 原文 特效库
查看更多关于css3实现光标悬浮滚动菜单_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did112224