css3实现光标悬浮滚动菜单_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:18:001118검색
效果：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
特效库：
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.