* { 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
运用切换原理实现一个简单的图片切换效果。