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代码如下
