css鼠标悬菜单底部线条部滑动动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:css鼠标悬菜单底部线条部滑动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> * { margin: 0; padding: 0; } /* container */ #container { width: 945px; height: 34px; position: relative; overflow: hidden; margin: auto; font-family: Microsoft YaHei,Segoe UI,Tahoma,Arial,Verdana,sans-serif; } #container li { display: block; float: left; width: 133px; height: 32px; background: #0099CC; line-height: 32px; padding-right: 2px; line-height: 32px; list-style: none; } #container li a { color: #fff; text-decoration: none; display: block; position: relative; background: #000033; width: 123px; height: 32px; padding-right: 10px; font-size: 14px; font-weight: bold; text-align: right; } #container li a:hover,#container li a.cur { background: #222; } #container li a span { display: block; position: absolute; left: 10px; top: 0; font-weight: normal; font-size: 10px; -webkit-text-size-adjust: none; opacity: 0.6; filter: alpha(opacity=60); } #buoy { position: absolute; width: 133px; height: 2px; background: #e9d008; bottom: 0px; left: -157px; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-1.8.3.js"></script> </head> <body> <style type="text/css"> #bg { background-color: rgb(102, 132, 228); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0