/****************************************栅格******************************************/ .zbl-grid{font-size: 0;box-sizing: border-box;width: 100%;} .zbl-grid li{box-sizing: border-box;display:inline-block;font-size: 14px;transition: margin 0s !important;} .zbl-grid li img{display: block;width: 100%;} /*------选项卡------*/ .zbl-lunbo .zbl-lunbo-nav{display:none;position: absolute;left: 0;bottom: 0;width: 100%;padding: 20px;box-sizing: border-box;text-align: center;} .zbl-lunbo .zbl-lunbo-nav li{width: 15px;height: 15px;background:rgba(0,0,0,0);border:1px solid #fff;display: inline-block;margin:0 10px;border-radius:50% ;cursor: pointer;} .zbl-lunbo .zbl-lunbo-nav li.cur{background:#fff;} .zbl-lunbo .zbl-lunbo-box .img-b{display:block;} .zbl-lunbo .zbl-lunbo-box .img-s{display: none;} @media only screen and (max-width:768px ) { .zbl-lunbo .zbl-lunbo-box .img-s{display: block;} .zbl-lunbo .zbl-lunbo-box .img-b{display: none;} } .zbl-lunbo-2{width:90%;overflow: hidden;} .zbl-lunbo-2 .lunbo-box{overflow: hidden;padding: 5px 0;} .zbl-lunbo-2 .lunbo-box li{margin-bottom:10px ;box-sizing: border-box;} .zbl-lunbo-2 img{display: block;width: 100%;} .zbl-lunbo-2 .left{width: 66px;height: 22px;background:url(../img/jt-top.jpg) no-repeat center;margin:10px auto;} .zbl-lunbo-2 .right{width: 66px;height: 22px;background:url(../img/jt-bottom.jpg) no-repeat center;margin:10px auto;} /*****************************************选项卡******************************************/ .zbl-tab-1 .nav-box .li-box{cursor: pointer;} .zbl-tab-2 .nav-box .li-box{cursor: pointer;} /****************************************显示隐藏******************************************/ .zbl-list{cursor: pointer;} .zbl-list .nav ul ul{display: none;} /****************************************更多的hover效果******************************************/ @media only screen and (min-width: 981px) { /*------------------更多一--------------*/ .zbl-more-1{position: relative;} .zbl-more-1 span{position: relative;z-index: 1;} .zbl-more-1:after{content: "";position:absolute;bottom:0;left:0;width: 0;height: 100%;transition:0.3s;background:#ccc;} .zbl-more-1:hover:after{width: 100%;} .zbl-more-1:hover span{color: #fff;} /*------------------更多三--------------*/ .zbl-more-2{text-align:center;overflow:hidden; position: relative;} .zbl-more-2 span{position: relative;z-index: 1;} .zbl-more-2:hover:before{content: ""; position:absolute;animation:moreleft 0.5s; -webkit-animation: moreleft 0.5s; animation-fill-mode:forwards;background:#ccc; } .zbl-more-2:hover:after{content: ""; position:absolute;animation:moreright 0.5s; -webkit-animation: moreright 0.5s; animation-fill-mode:forwards ;background:#ccc;} .zbl-more-2:hover span{color: #fff;} @keyframes moreleft{ 0%{ border-radius:50%;width:20%; height:80%; top:10%; left:0%;} 40%{ border-radius:50%;width:20%;height:80%; top:10%; left:60%;} 50%{ border-radius:50%;width:20%;height:80%; top:10%; left:60%;} 100%{ width:100%; height:100%; top:0; left:0;background:#ccc;} } @keyframes moreright{ 0%{ border-radius:50%;width:20%; height:80%; top:10%;right:0%;} 40%{ border-radius:50%;width:20%; height:80%;top:10%; right:60%;} 50%{ border-radius:50%;width:20%; height:80%;top:10%; right:60%;} 100%{ width:100%; height:100%;top:0;right:0;background:#ccc;} } .zbl-more-3{text-align:center;overflow:hidden; position: relative;} .zbl-more-3 span{position: relative;z-index: 1;} .zbl-more-3:before{content: "";position: absolute;width: 0;height: 100%;top:0;left:0;background: #ccc;transition: 0.3s;} .zbl-more-3:after{content: "";position: absolute;width: 0;height: 100%;top:0;right:0;background: #ccc;transition: 0.3s;} .zbl-more-3:hover:before{width: 50%;} .zbl-more-3:hover:after{width: 50%;} .zbl-more-3:hover span{color: #fff;} } /****************************************弹窗******************************************/ .zbl-tanchuang .tanchuangbox img{cursor: pointer;} .zbl-tanchuang .tanchuangbox .dk{position:fixed;top: 0;left:0;width: 100%;height: 100%;background:rgba(0,0,0,0.4);z-index: 9998;display: none;} .zbl-tanchuang .tanchuangbox .boxs{padding: 40px 10px 10px;position:fixed;z-index: 9999;transition: 0.5s;top:100%;left:0;margin: 0;width: 0;height: 0;overflow:hidden;border: 1px solid #ccc;border-radius:5px;background:rgba(255,255,255,0.9);} .zbl-tanchuang .tanchuangbox .boxs.cur{width:700px;height: 500px;top:50%;left:50%;margin-top: -250px;margin-left:-350px;} .zbl-tanchuang .tanchuangbox .boxs .off{position: absolute;width: 30px;height: 30px;top:6px;right:10px;background:url(img/zbl-off-1.png) no-repeat center;background-size:25px 25px;cursor: pointer;} .zbl-tanchuang .tanchuangbox .boxs .box{overflow: hidden;width: 100%;height: 100%;border-radius:5px;} .zbl-tanchuang .tanchuangbox .boxs .img{width: 100%;height: 100%;} @media only screen and (max-width:768px ) { .zbl-tanchuang .tanchuangbox .boxs.cur{width: 90%;left:5%;margin-left:0;height:70%;margin-top: 0;top:15%} } /*********************************************图片放大*******************************************************/ .pinch-zoom-container{height:100%} .pinch-zoom{height:100%} .pinch-zoom{width: 100%;-webkit-user-drag: none;} .pinch-zoom img{width: 100%;-webkit-user-drag: none;} .pinch-zoom .img{width: 100%;height: 100%;background:none no-repeat center;background-size:contain ;} /*********************************************模糊*******************************************************/