* {
margin:0;
padding:0;
list-style:none;
}
.banner {
position:relative;
}
.tnr {
margin:0;
padding:0;
float:left;
width:100%;
overflow:hidden;
display:none;
}
.tabtz {
margin:0 auto;
padding:0;
list-style:none;
width:740px;
overflow:hidden;
margin-top:16px;
z-index:2;
}
.tabtz ul {
width:108%;
text-align:center;
margin-top:13px;
}
.tabtz ul li {
float:left;
width:22%;
height:70px;
margin-top:12px;
margin-right:12px;
color:#fff;
text-align:center;
line-height:30px;
cursor:pointer;
}
.on {
display:block;
}
/* .tabtz ul li.cur {
background:#96C3FE;
}
*/
.on {
display:block;
}
.babg {
width:100%;
height:600px;
overflow:hidden;
position:absolute;
top:0;
z-index:-1;
}
.babg ul li {
width:100%;
height:600px;
}
.babg ul li img {
width:100%;
height:100%;
}
.tabtz .inner {
display:block;
width:175px;
height:65px;
position:relative;
color:#fff;
font-size:20px;
transition:all .3s;
-webkit-transition:all .3s;
-moz-transition:all .3s;
-ms-transition:all .3s;
-o-transition:all .3s;
text-decoration:none;
border-bottom:2px solid #fff;
z-index:10;
}
/* .tabtz .inner span {
z-index:10;
}
*/
.tabtz .inner:before {
content:'';
position:absolute;
width:100%;
bottom:0;
left:0;
height:0;
transition:all .3s;
-webkit-transition:all .3s;
-moz-transition:all .3s;
-ms-transition:all .3s;
-o-transition:all .3s;
z-index:-1;
}
.tabtz .inner:hover:before {
height:100%;
}
.tabtz .li1 .inner:before {
background:linear-gradient(to right,#F0B557,#D77E45);
}
.tabtz .li2 .inner:before {
background:linear-gradient(to right,#4CB1CA,#0F5FB1);
}
.tabtz .li3 .inner:before {
background:linear-gradient(to right,#72AA56,#00734D);
}
.tabtz .li4 .inner:before {
background:linear-gradient(to right,#4CB1CA,#0F5FB1);
}
.tabtz .li5 .inner:before {
background:linear-gradient(to right,#F0B557,#D77E45);
}
.tabtz .li6 .inner:before {
background:linear-gradient(to right,#4CB1CA,#0F5FB1);
}
.tabtz .li7 .inner:before {
background:linear-gradient(to right,#72AA56,#00734D);
}
.tabtz .li8 .inner:before {
background:linear-gradient(to right,#F0B557,#D77E45);
}
更新时间:2021-11-30 11:41:09
运用切换原理实现一个简单的图片切换效果。