CSS3实现Win8风格的悬停效果和动画导航菜单,最好使用火狐测试看效果。可看到方格状的菜单,如果鼠标移上菜单并单击,该菜单项滑出菜单提示,而且菜单支持响应式布局。
.tools { font-size: 18px; } .tools .mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; padding: 5px 10px; text-align: left; z-index: 100; opacity: 0; background: #333333; background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .tools .mask .title { font-size: 14px; margin-bottom: 5px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .tools .mask .content { font-size: 12px; text-indent: 2em; max-height: 36px; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.5); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .tools li { float: left; height: 80px; padding: 5px; overflow:hidden; margin: 0; transition: all 0.35s ease-in-out 0s; } .tools li img { margin-right: 20px; } .tools li .abstract { line-height: 75px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tools li a { position: relative; display: block; height: 100%; width: 100%; text-align: center; color: #fff; } .tools li a .mask .title { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .tools li a:hover .mask { opacity: 1; filter: alpha(opacity=100); } .tools li a:hover .mask .title { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .tools li.width-15 { width: 15%; } .tools li.width-20 { width: 20%; } .tools li.width-25 { width: 25%; } .tools li.hight-2x { height: 160px; } .tools li:nth-child(1) a .abstract { line-height: 150px; } .tools li a,.tools li a .mask.tools li:nth-child(14n) a,.tools li:nth-child(14n) a .mask,.tools li.c1 a,.tools li.c1 a .mask{ background-color:#ffbb50 } .tools li:nth-child(14n+1) a,.tools li:nth-child(14n+1) a .mask,.tools li.c2 a,.tools li.c2 a .mask{ background-color:#0288bb } .tools li:nth-child(14n+2) a,.tools li:nth-child(14n+2) a .mask,.tools li.c3 a,.tools li.c3 a .mask{ background-color:#62c7a9 } .tools li:nth-child(14n+3) a,.tools li:nth-child(14n+3) a .mask,.tools li.c4 a,.tools li.c4 a .mask{ background-color:#a4cb87 } .tools li:nth-child(14n+4) a,.tools li:nth-child(14n+4) a .mask,.tools li.c5 a,.tools li.c5 a .mask{ background-color:#ff8c75 } .tools li:nth-child(14n+5) a,.tools li:nth-child(14n+5) a .mask,.tools li.c6 a,.tools li.c6 a .mask{ background-color:#b686d7 } .tools li:nth-child(14n+6) a,.tools li:nth-child(14n+6) a .mask,.tools li.c7 a,.tools li.c7 a .mask{ background-color:#f60 } .tools li:nth-child(14n+7) a,.tools li:nth-child(14n+7) a .mask,.tools li.c8 a,.tools li.c8 a .mask{ background-color:#e4c09a } .tools li:nth-child(14n+8) a,.tools li:nth-child(14n+8) a .mask,.tools li.c9 a,.tools li.c9 a .mask{ background-color:#c2da7a } .tools li:nth-child(14n+9) a,.tools li:nth-child(14n+9) a .mask,.tools li.c10 a,.tools li.c10 a .mask{ background-color:#3cc2c1 } .tools li:nth-child(14n+10) a,.tools li:nth-child(14n+10) a .mask,.tools li.c11 a,.tools li.c11 a .mask{ background-color:#4db1d2 } .tools li:nth-child(14n+11) a,.tools li:nth-child(14n+11) a .mask,.tools li.c12 a,.tools li.c12 a .mask{ background-color:#5e86bc } .tools li:nth-child(14n+12) a,.tools li:nth-child(14n+12) a .mask,.tools li.c13 a,.tools li.c13 a .mask{ background-color:#ffd452 } .tools li:nth-child(14n+13) a,.tools li:nth-child(14n+13) a .mask,.tools li.c14 a,.tools li.c14 a .mask{ background-color:#ffa963 } @media (min-width:767px) and (max-width: 979px) { .tools li.width-15, .tools li.width-20, .tools li.width-25 { width: 33.333%; } } @media ( min-width :400px) and (max-width: 767px) { .tools li.width-15,.tools li.width-20,.tools li.width-25 { width: 50%; } .tools li.hight-2x { height: 80px; } .tools li:nth-child(1) a .abstract { line-height: 75px; } .tools li.hight-2x { height: 80px; } .tools li:nth-child(1) a .abstract { line-height: 75px; } } @media ( max-width : 500px) { .tools li.hight-2x { height: 80px; } .tools li:nth-child(1) a .abstract { line-height: 75px; } .tools li.width-15,.tools li.width-20,.tools li.width-25 { width: 100%; } }
HTML代码如下
在线代码格式化在线代码格式化在线JS/HTML/JSON美化、格式化 JavaScript压缩混淆JavaScript压缩混淆在线JavaScript普通压缩、混淆压缩 CSS压缩美化CSS压缩美化在线css美化、格式化、压缩 HTML实时代码HTML在线实时代码javascript、css、html代码可视化在线调试工具 代码着色美化工具代码着色美化工具JAVA/C/C++/ObjectiveC/Scala/Kotlin在线代码着色美化 NGINX在线美化NGINX在线美化NGINX配置文件在线高亮编辑及美化 CSS3在线代码生成器CSS3在线代码生成器CSS3圆角、文本分列、内外阴影、文字颜色大小、背景颜色 CSS在线代码生成器CSS在线代码生成器常用字体,字体大小,字体颜色,背景颜色,字体常用格式,字体间距 JSON工具JSON工具JSON在线编辑,语法检查 在线加密解密在线加密解密AES、DES、RC4、Rabbit、TripleDes加解密 BASE64在线加密解密BASE64在线加密解密BASE64在线加密解密 散列/哈希在线加密散列/哈希在线加密SHA1、SHA224、SHA256、SHA512、MD5、PBKDF2等加密 SQL美化工具SQL美化工具SQL/MYSQL/PLSQL在线美化 前端源码大全前端源码大全Jquery、Bootstrap、Extjs、Html5、CSS3、UI、JSP、PHP源码大全