css3突出显示动画导航
2015-11-27 19:59
447 查看
<!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>css3突出显示动画导航</title> <style> * { /* Basic CSS reset */ margin:0; padding:0; } body { /* These styles have nothing to do with the ribbon */ background:#000; padding:35px 0 0; margin:auto; text-align:center; } .ribbon { display:inline-block; } .ribbon:after, .ribbon:before { margin-top:0.5em; content: ""; float:left; border:1.5em solid #fff; } .ribbon:after { border-right-color:transparent; } .ribbon:before { border-left-color:transparent; } .ribbon a:link, .ribbon a:visited { color:#000; text-decoration:none; float:left; height:3.5em; overflow:hidden; } .ribbon span { background:#fff; display:inline-block; line-height:3em; padding:0 1em; margin-top:0.5em; position:relative; -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */ -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */ -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */ transition: background-color 0.2s, margin-top 0.2s; } .ribbon a:hover span { background:#FFD204; margin-top:0; } .ribbon span:before { content: ""; position:absolute; top:3em; left:0; border-right:0.5em solid #9B8651; border-bottom:0.5em solid #fff; } .ribbon span:after { content: ""; position:absolute; top:3em; right:0; border-left:0.5em solid #9B8651; border-bottom:0.5em solid #fff; } </style> </head> <body> <br><br><br><br><br><br><br><br><br> <div class='ribbon'> <a href='#'><span>Home</span></a> <a href='#'><span>About</span></a> <a href='#'><span>Services</span></a> <a href='#'><span>Contact</span></a> </div> <br><br><br><br><br><br><br> <br><br><br><br><br><br><br> <div style="text-align:center;clear:both"> <p><font color="#FFFFFF">适用浏览器:FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</font></p><br> <p><font color="#FFFFFF">来源:</font><a href="http://www.52dvd.com/" target="_blank"><font color="#FFFFFF">52dvd素材网</font></a></p> </div> </body> </html>
效果图:
相关文章推荐
- CSS3教程:pointer-events属性值详解(转)
- CSS技巧和经验
- PHOTOSHOP 开发脚本初入 批量修改文字样式
- 设置样式:字体颜色和背景颜色
- CSS中box-shadow、text-shadow用法
- 谈谈你对css中position五个属性的理解
- Photoshop投影与CSS中box-shadow的转换
- less的实践笔记
- 圣杯布局、双飞翼布局
- CSS技巧的收集
- 彻底弄懂css中单位px和em,rem的区别 1.jpg
- CSS基础学习十七:CSS布局之定位
- css负边距
- CSS按比例等分box,并显示分隔线
- QTabWidget 改变tabBar的样式
- QTabBar 样式
- CSS Sticky Footer: 完美的CSS绝对底部
- [css]我要用css画幅画(五)
- CSS入门(11)-制作下拉式菜单
- SVG+CSS3 简单线条动画