Heim > Artikel > Web-Frontend > css3实现光标悬浮滚动菜单_html/css_WEB-ITnose
css3实现光标悬浮滚动菜单_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:18:001121Durchsuche
效果：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
特效库：
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：扑面而来的碎片图片3D炸裂效果初体验_html/css_WEB-ITnoseNächster Artikel：问个关于浮动的问题_html/css_WEB-ITnose