[CSS3]滚动菜单效果

这

个滚动菜单可以做导航的效果，也可以做按钮的效果。
我把它弄到了下载按钮上，效果见最下面的源码下载按钮。

下面是源码演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS菜单滚动效果 - 网站源码</title><style type="text/css" />@charset "utf-8";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{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:hover{margin-top:0;}.scroll-menu li a:before{content:attr(data-text);display:block;color:#CDF745;}</style></head><body><h1>CSS滚动菜单</h1><ul class="scroll-menu">	<li><a data-text='CSS' href="#">CSS</a></li>	<li><a data-text="HTML" href="#">HTML</a></li>	<li><a data-text="Javascript" href="#">JavaScript</a></li>	<li><a data-text="About" href="#">About</a></li></ul></body></html>

很简单，赶快试试吧。效果见下面的下载按钮。

源码下载

本站文章除注明转载/出处外，均为本站原创或翻译。若要转载但请务必注明出处，尊重他人劳动成果。

转载请注明出处链接 : https://www.inlojv.com/3410.html

[CSS3]滚动菜单效果

相关文章