<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS3实现的垂直动画菜单在线演示</title> <style type="text/css"> * { margin:0; padding:0; } html {height: 100%;} body{ position: relative; height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff)); } .navbox { position: relative; float: left; } ul.nav { list-style: none; display: block; width: 200px; position: relative; top: 100px; left: 100px; padding: 60px 0 60px 0; background: url(images/shad2.png) no-repeat; -webkit-background-size: 50% 100%; } li { margin: 5px 0 0 0; } ul.nav li a { -webkit-transition: all 0.3s ease-out; background: #cbcbcb url(images/border.png) no-repeat; color: #174867; padding: 7px 15px 7px 15px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; width: 100px; display: block; text-decoration: none; -webkit-box-shadow: 2px 2px 4px #888; } ul.nav li a:hover { background: #ebebeb url(images/border.png) no-repeat; color: #67a5cd; padding: 7px 15px 7px 30px; } </style> </head> <body> <div style="text-align:center;clear:both;"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="/follow.js" type="text/javascript"></script> </div> <div class="navbox"> <ul class="nav"> <li><a href="">XHTML</a></li> <li><a href="">C++</a></li> <li><a href="">Mootools</a></li> <li><a href="">HTML5</a></li> <li><a href="">CSS</a></li> <li><a href="">jQuery</a></li> <li><a href="">Ajax</a></li> <li><a href="">PHP</a></li> <li><a href="">Perl</a></li> </ul> </div> <div class="navbox"> <ul class="nav"> <li><a href="">XHTML</a></li> <li><a href="">HTML5</a></li> <li><a href="">CSS</a></li> <li><a href="">jQuery</a></li> <li><a href="">Ajax</a></li> <li><a href="">PHP</a></li> </ul> </div> <div class="navbox"> <ul class="nav"> <li><a href="">XHTML</a></li> <li><a href="">HTML5</a></li> <li><a href="">CSS</a></li> </ul> </div> </body> </html>
纯CSS3实现的垂直动画菜单
标签:
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论
上一篇:
2021CSS3发光社会分享按钮在线演示
下一篇:
纯CSS3自定义Checkbox开关