前端开发 HTML5 CSS3 HTML CSS JavaScript jQuery Bootstrap

CSS3实现Win8风格的悬停效果和动画导航菜单

CSS3 HTML5 HTML我帮您 1年前  100次浏览

CSS3实现Win8风格的悬停效果和动画导航菜单,最好使用火狐测试看效果。可看到方格状的菜单,如果鼠标移上菜单并单击,该菜单项滑出菜单提示,而且菜单支持响应式布局。

HTML我帮您在线工具实现的代码


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

发表评论