.transition(@transition:.4s){-webkit-transition:@transition;-moz-transition:@transition;-ms-transition:@transition;-o-transition:@transition;transition:@transition;} .transform-origin(@origin){-webkit-transform: @origin;-moz-transform: @origin;-ms-transform: @origin;-o-transform: @origin;transform: @origin;} .scale(@scale){-webkit-transform: scale(@scale);-moz-transform:scale(@scale);-ms-transform:scale(@scale);-o-transform:scale(@scale);transform:scale(@scale);} .translateY(@distance){-ms-transform:translateY(@distance); -webkit-transform:translateY(@distance); -o-transform:translateY(@distance); -moz-transform:translateY(@distance); } .border-radius(@border-radius){-webkit-border-radius:@border-radius;-moz-border-radius:@border-radius;-o-order-radius:@border-radius;-ms-border-radius:@border-radius;border-radius:@border-radius;} .rotate(@rotate){-webkit-transform: rotate(@rotate);-moz-transform: rotate(@rotate);-ms-transform: rotate(@rotate);-o-transform: rotate(@rotate);transform: rotate(@rotate);} @mc1:#c89657; @mc2:#e4e3bf; @qt1:#573a59; @qt2:#1a8fdf;/*内页导航背景*/ @qt3:#1a8fdf;/*内页分类侧边背景*/ @qt4:#099f52;/*内页分类侧边li背景*/ @qt5:#fff;/*悬浮背景变色后字体颜色*/ @qt6:#c5a46e;/*按钮悬浮颜色 */ //调用方式 .border(3px); .txt{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;} .browserupgrade{margin:0;padding:1em;background:#ccc;a{color: red;}cursor: pointer;} table{border-right:1px solid #ccc;border-bottom:1px solid #ccc} table td{border-left:1px solid #ccc;border-top:1px solid #ccc;text-align: center;vertical-align: middle;} input,textarea{margin: 0;padding: 0;box-shadow: none;border: none;} /*全局---头部----主体(主页)----底部---侧边---内页--*/ /*--------------------------------------------------------全局开始---------------------------------------------------*/ p,a,h1,h2,h3,h4,h5,h6,li,label,span,i,b,div{ margin: 0;padding: 0;font-size: 18px;} h1,h2,h3,h4,h5,h6 {font-weight: normal;} li{list-style: none;} .off{display:none;} /*隐藏*/ .slh(){text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}/*单行超出部分省略号显示*/ ul{padding: 0;margin:0;} i{font-style: normal;} a {color: #333;text-decoration: none;} /*----------------头部--------------*/ body{color: #333; margin: 0; font-size: 14px; // background: #f4f4f4; } .bg_circle { background: url('../images/bg10.jpg') center top; } body { margin: 0;padding: 0;background: #fff;max-width: 1920px;min-width: 1300px;overflow-x: hidden; } .fl,.left {float: left;} .fr,.right {float: right;} .w1920 {max-width: 1920px;margin: 0 auto;} .w1200,.wrap,.main {width: 1200px;margin:0 auto;} //顶部 .header_top { height: 102px;border-bottom:1px solid #b9b9b9;background: #fff; .logo_box { float: left; img {display: block;width: 600px;height: 102px;object-fit: contain;} } .tel_box { width: 390px;height: 102px; float: right;background: url('../images/tel.jpg') left center no-repeat;box-sizing: border-box;padding-left: 80px; p {display: inline-block;font-size: 28px;line-height: 93px;float: left;} img {width: 90px;height: 90px;margin-top: 6px;float: right;} } } .nav { background: url('../images/bg17.jpg'); ul.main { position: relative;height: 55px; > li { float: left;width: 150px; > a { display: block; font-size: 18px;width: 100px;line-height:55px;text-align: center;color: #fff;margin:0 auto; box-sizing:border-box;.transition(); img {display: inline-block;vertical-align: middle;filter:grayscale(100%) brightness(200%);} } &:hover > a { background:#c89657;color: #fff;.transition(); } .erji_box { width: 880px;height: 450px;box-sizing:border-box;padding:45px 55px 0;background: #fff;position: absolute; left: 0px;right: 0px;top: 55px;z-index: 8;margin:auto;display: none; div { float: left;margin-right: 40px;width:230px;height:385px;box-sizing:border-box;padding-top:15px;background:#f6f6f6; box-sizing:border-box; img {display: block;width: 205px;margin:0 auto;} p:nth-of-type(1) {font-size: 18px;margin-top: 13px;text-align: center;line-height: 2;width: 205px;margin:0 auto;} p:nth-of-type(2) {font-size: 14px;line-height: 24px;height: 72px;overflow: hidden;text-align: center;margin:10px auto;width: 205px;} span { display: block;width: 140px;height: 40px;text-align: center;line-height: 40px;border:1px solid @mc1; margin:0 auto;color: @mc1;.transition(); } &:hover { span { background:@mc1;color: #fff;.transition(); } } } div:nth-of-type(3) {margin-right: 0px;} } } > li.active > a { background:#c89657;color: #fff; } } } .banner1 { height: 650px;position:relative; .swiper-prev {display: inline-block;vertical-align: top;cursor: pointer;position: absolute;left: 0px;top: 45%;z-index: 2;opacity: 0;.transition();} .swiper-next {display: inline-block;vertical-align: top;cursor: pointer;position: absolute;right: 0px;top: 45%;z-index: 2;opacity: 0;.transition();} &:hover { .swiper-next,.swiper-prev { opacity: 1;.transition(); } } .swiper-pagination { .swiper-pagination-bullet {border-radius: 0;opacity: 1;width: 35px;height: 10px;background: #fff;} .swiper-pagination-bullet-active {background:@mc1; } } } .banner1 .swiper-slide {width: 100%;height: 100%;} .neiye_banner { height: 400px;background: url('../images/banner.jpg') center center no-repeat; } .banner_nav { background:#666666;height: 30px;margin-bottom: 35px; .title { font-size: 12px;color:#fff;line-height: 30px; a,span { font-size: 12px;color:#fff;line-height: 30px; } } } // 首页主体部分开始 .search_box { padding: 20px 0;height: 40px; p {float: left;line-height: 40px;} form { display: block;border:1px solid #cccccc;height: 38px;width: 300px;float: right; input {width: 250px;height: 38px;font-size: 14px;text-indent: 1em;line-height:38px;} button {float: right;width:38px;height: 38px;background: #fff;border:none;padding:0;} } } .main_title { height: 190px;margin:0 auto;padding-top: 50px;box-sizing:border-box; h3 { font-size: 36px;text-align: center;line-height: 60px; &:after {display: inline-block;content:'';width: 40px;height: 40px;background: url('../images/bg02.png'); position: relative;left: 60px;top: 10px;} &:before {display: inline-block;content:'';width: 40px;height: 40px;background: url('../images/bg03.png'); position: relative;right: 60px;top: 10px;} } p {font-size: 18px;text-align: center;line-height: 30px;color: #666;} } .main_more { display: block;width: 180px;height: 40px;line-height: 40px;margin:40px auto 0;box-sizing:border-box;.transition(); text-align: center;border:1px solid #999; .transition(); color: #999;background: #fff; &:hover { background: @mc1;color: #fff; .transition();border-color:@mc1; } } .product_type_box { // background:url('../images/bg01.jpg') center top no-repeat; padding-bottom:20px; ul { li { margin-bottom: 15px; div:nth-of-type(1) { width: 1200px;height: 500px;overflow: hidden; img {display: block;width: 1200px;.transition();} } div:nth-of-type(2) { height: 100px;box-sizing: border-box;padding:30px 50px;background: url('../images/bg15.jpg'); p { text-align: center;line-height: 40px;float: left;font-size: 24px;color: #fff; span {margin-left: ;font-size: 16px;color: #fff;} } i { display: block;width: 200px;height: 40px;text-align: center;line-height: 40px;border:1px solid #ccc;font-size: 16px; float: right;font-size: 16px;background: #fff;.transition(); } } &:hover { img {.scale(1.03);.transition();} i {background: #a32324 !important;color: #fff;.transition();} } } } } .product_box { padding-bottom: 37px; .product_left { width: 222px;height: 756px;background: url('../images/bg04.jpg'); background-size: cover;float: left; box-sizing: border-box;padding-top:30px; li { a { display: block;padding-left: 40px;line-height: 50px;color: #fff; background: url('../images/bg05.png') 170px -50px no-repeat; } &:hover { a {background-position-y:-2px;color: @mc1;} } } } .product_right { width: 950px;height: 756px;float: right; li { width: 312px;height: 242px;box-sizing: border-box;border:1px solid #e5e5e5;margin-bottom: 15px;margin-right: 7px;float: left; div { width: 304px;height: 198px;overflow: hidden;margin:3px auto 0; img {display: block;width: 304px;height: 198px;object-fit: cover;.transition();} } p {text-align: center;line-height: 38px;} &:hover { img {.scale(1.08);.transition();} } } li:nth-of-type(3n) {margin-right: 0px;} } } .zhanTingBox { background:url('../images/bg16.jpg') center top;padding-bottom:70px; .main_title { p,h3 {color: #fff;} } ul { li { width: 350px;height: 460px;background: #fff;float: left;margin-right: 75px;.transition();position: relative; img:nth-of-type(1) {display: block;width: 350px;height: 302px;object-fit: cover;margin-bottom: 30px;} img:nth-of-type(2) {display: block;width: 350px;height: 302px;position: absolute;left: 0;top: 0;right: 0;margin:auto;.transition();opacity: 0;} p:nth-of-type(1) {width: 290px;margin:0 auto;font-size: 22px;line-height: 50px;} p:nth-of-type(2) { width: 290px;margin:0 auto;color: #999; &:before { display: inline-block;content:'';width: 80px;height: 2px;background:@mc1;margin-right: 15px;vertical-align: middle; } } &:hover { box-shadow:0px 0px 6px rgba(0,0,0,0.4);.transition(); img:nth-of-type(2) {opacity: 1;.transition();} } } li:nth-of-type(3) {margin-right: 0px;} } } .company_box { .main { padding-bottom:30px; .main_title {margin-bottom: 30px;} .company_video { float: left;position: relative;cursor: pointer; img:nth-of-type(1) {display: block;height: 325px;width: 560px;} img:nth-of-type(2) { left: 12px;bottom: 12px;position: absolute;z-index: 2; } } .company_box_info { width: 585px;float: right; > div { height: 288px;overflow: hidden;margin-bottom: 15px; p {font-size: 20px !important;line-height: 36px !important;} } a { display: inline-block;margin-right: 28px; width: 150px;height: 35px;text-align: center;line-height: 35px; border:1px solid #ccc;.transition(); &:hover { background: @mc1;color: #fff;border-color:@mc1;.transition(); } } a:nth-of-type(1) { border-color: @mc1;color: #fff;background: @mc1; } } } } .gongYiBox { background: url('../images/bg06.png') center bottom no-repeat;padding-bottom:45px; img {display: block;width: 1200px;} } .caseBox { padding-bottom:80px; img {display: block;width: 1200px;} } .news_box { // background: url('../images/bg01.jpg') center top; padding-bottom:75px; ul { li { width: 580px;height: 200px;box-sizing:border-box;overflow:hidden;padding:15px 35px 15px 15px; margin-bottom: 30px;float: left; box-shadow:0px 0px 8px rgba(0,0,0,0.4);background: #fff; img {display: block;width: 260px;height: 166px;object-fit: cover;float: left;margin-right: 25px;} h4 {font-size: 22px;line-height: 50px;.transition();} p {font-size: 16px;line-height: 30px;height: 90px;overflow: hidden;color: #666;} &:hover { h4 {color: @mc1;.transition();} } } li:nth-of-type(2n) {float: right;margin-right: 0px;} } } // 首页结束 //底部样式 // 底部留言 .foot_message { height: 240px;background: url('../images/bg07.jpg') fixed top center ;margin-top: 40px; h3 {font-size: 30px;color: #fff;line-height: 120px;text-align: center;} form { display: block;width: 1200px;margin:0 auto; input { width: 220px;height: 45px;text-indent: 1em;font-size: 16px;display: inline-block;margin-right: 10px; } input:nth-of-type(5) {width: 140px;} img {display: inline-block;height: 45px;margin-right: 10px;vertical-align: middle;} a {display: inline-block;width: 170px;height: 45px;text-align: center;background: @mc1;color: #fff;line-height: 45px;} } } .foor_img { height: 151px;background: url('../images/bg08.jpg') center center no-repeat; } .footer { height: 495px; padding-top: 40px; background: url('../images/bg09.jpg') center top no-repeat;box-sizing: border-box;overflow: hidden; .main { .foot_left { width: 350px; float: left;padding-top:227px;height: 360px;box-sizing: border-box; p:nth-of-type(1) {font-size: 16px;padding-left: 35px;line-height: 30px;color: #fff;} p:nth-of-type(2) {font-size: 30px;color: @mc1;} } .foot_right { width: 820px;float: right;height: 360px;box-sizing: border-box; li { h3 {font-size: 22px;font-weight: bold;margin-bottom: 20px;color: #fff;} float: left;width: 175px; a,p {color: #fff;line-height: 40px;display: block;} img {display: block;width: 120px;height: 120px;} } li:nth-of-type(4) {width: 290px;} } } .footer_bottom_info { color: #fff;font-size: 14px;line-height: 45px; p:nth-of-type(1) { &,a {color: #fff;font-size: 16px;line-height: 50px;} } p:nth-of-type(2) { color: #fff;font-size: 14px;line-height: 45px;display: inline-block; a {color: #fff;font-size: 14px;line-height: 45px;} img {vertical-align: middle;} } h1 {display: inline-block;line-height: 45px;font-size: 14px;} a {color: #fff;font-size: 14px;} } } .layer_box { video {width:800px;height: 480px; } } .fix_box { display: block; position: fixed; right: 0; top: 35%; z-index: 99;width: 70px;background: #fff; div:nth-of-type(1) { width: 70px;height: 60px;background: @mc1;position:relative;box-sizing: border-box;padding-top:5px; p {color: #fff;color: #fff;line-height: 25px;text-align: center;font-size: 14px;} span { width: 110px;height: 60px;background: @mc1;color: #fff;text-align: center;line-height:60px; position: absolute;right: 70px;top: 0;bottom: 0;margin: auto;display: none;font-size: 16px; } &:hover span { display: block; } } div:nth-of-type(2) { width: 70px;height: 85px;border-bottom: 2px solid #c8c8c8; > img:nth-of-type(1) {display: block;width: 100%;} p {text-align: center;line-height: 25px;font-size: 14px;} } div:nth-of-type(3) { width: 70px;height: 85px;position: relative; > img:nth-of-type(1) {display: block;width: 100%;} p {text-align: center;line-height: 25px;font-size: 14px;} > img:nth-of-type(2) { display: none;width: 110px;height: 110px;position: absolute; right: 70px;top: 0px;bottom: 0px;margin: auto; } &:hover { img:nth-of-type(2) {display: block;} } } div:nth-of-type(4) { width: 70px;height: 70px;background: #3d3939;cursor: pointer; > img:nth-of-type(1) {display: block;width: 100%;} p {text-align: center;line-height: 20px;color: #fff;font-size: 14px;} } } // 内页头部样式 .list_banner > div:nth-child(1) {padding-top: 10px;font-size: 14px;} .list_banner_top {height: 146px;padding-top:10px;position: relative;height: 81px;} .list_banner_top > div:nth-child(1) {height: 40px;background: #bfbfbf;color: #fff;font-size: 18px;position: relative;z-index: 2;line-height: 40px;padding-left: 30px;} .list_banner_top img {position: absolute;left: -20px;top: -1px;width: 21px;height: 21px;} .list_banner_top > div:nth-child(2) {height: 50px;background: #dcdcdc;width: 100%;margin-top: -20px;} // 内页主要部分 .list_left{width: 250px;height: 850px;display: inline-block;} .list_right{width: 950px;display: inline-block;} // 留言 .order {margin-left:30px;} .order li {margin-top:30px;position: relative;font-weight: bold;font-size: 18px;} .order > li:nth-child(5) {height: 70px;} .order li input{position: absolute;left: 150px;width: 375px;} .order li textarea{position: absolute;left: 150px;bottom: 0px;width: 375px;height: 100px;} .order p,input {display:inline-block;font-size:18px;} .order input {height:20px;border:1px solid #cfcfcf;} .order textarea {border:1px solid #cfcfcf;} #submit {width:230px;height:50px;border-radius:10px;background:#dd2121;font-size:20px;color:#fff;font-weight:bold;margin:0 auto;display: block;} #submit:hover {border:2px solid #ddd;} // #form1 {width: 580px;} .message_contact { vertical-align: top;display: block;width: 300px;height: 400px;margin-top: 30px; h2 {font-size: 24px;line-height: 36px;margin-bottom: 30px;} p { font-size: 18px;line-height: 25px; a {font-size: 18px;} } } .gc_banner_box { position: relative; .gc_banner { .swiper-slide img { display: block;width: 1200px;height: 450px;object-fit: cover; } .gc-swiper-pagination { position: absolute;text-align: center;z-index: 8; .swiper-pagination-bullet { width: 20px;height: 12px;border-radius: 0;background: rgba(255,255,255,0.6);opacity: 1;} .swiper-pagination-bullet-active {background: @mc1; } } } .gc-swiper-prev {position: absolute;left: 2%;top: 210px;z-index: 8; display: none;} .gc-swiper-next {position: absolute;right: 2%;top: 210px;z-index: 8; display: none;} } // 公司简介 .company_nav { margin:10px auto 50px;width: 1000px;border:1px solid @mc1;height: 50px; li { float: left; a {display: block;width: 200px;height: 50px;text-align: center;border-right: 1px solid @mc1;box-sizing: border-box;;line-height: 50px;font-size: 16px;} } li:last-of-type a {border-right: 0px;} .active {background: @mc1;color: #fff;} } .news_nav { margin:10px auto 50px;width: 900px;border:1px solid @mc1;height: 50px; li { float: left; a {display: block;width:300px;height: 50px;text-align: center;border-right: 1px solid @mc1;box-sizing: border-box;;line-height: 50px;font-size: 16px;} } li:last-of-type a {border-right: 0px;} .active {background: @mc1;color: #fff;} } .company_page_box01 { background: url('../images/bg13.jpg') center bottom no-repeat;padding-bottom:50px; .company_box_info { width: 880px;margin: 40px auto 20px; p {text-indent: 0;text-align: center;font-size: 18px;line-height: 45px !important;} } } .company_page_box02 { display: block;height: 215px;padding-top:65px;box-sizing: border-box; li { width: 300px;float: left;box-sizing: border-box;border-right: 1px solid #dcdcdc;height: 70px; p:nth-of-type(1) {font-size: 34px;font-weight: bold;text-align: center;line-height: 1;margin-bottom: 15px;color: @mc1;} p:nth-of-type(2) {font-size: 16px;text-align: center;} } li:last-of-type {border-right: none;} } .company_page_box03 { height: 708px;background: url('../images/bg14.jpg') center center no-repeat; } .company_page_box04 { padding:100px 0 70px; div:nth-of-type(1) { width: 260px;float: left;height: 350px;border-right: 1px solid #e5e5e5; h3 {font-size: 40px;line-height: 350px;text-align: center;} } div:nth-of-type(2) { width: 890px;float: right; p { font-size: 18px;color: #666;line-height:40px; span { display: inline-block;width: 20px;height: 20px;border:1px solid @mc1;text-align: center;line-height: 20px;vertical-align: middle; font-size: 16px;border-radius: 10px;color:@mc1;margin-right: 5px; } } } } // 公司简介结束 // 搜索页面 .search_list_box { width:920px;float: right; .search_list { li { width: 300px;height: 245px;float: left;margin-right: 10px;margin-bottom: 12px;background:#fff;box-sizing: border-box;border:3px solid #fff; div { width: 294px;height:189px;position:relative;overflow: hidden;box-sizing:border-box; img {width: 294px;height:189px;display: block;.transition();object-fit: cover;} } h4 {font-size: 14px;text-align: center;line-height: 45px;.transition();} &:hover { img {.scale(1.08);.transition();} } } li:nth-of-type(3n) {margin-right: 0px;float: right;} } } .search_pagenation { text-align: center;margin-top: 30px; a {display: inline-block;width: 80px;height: 35px;font-size: 14px;background: #333;color: #fff;line-height: 35px;margin:0 5px;} .noothers {display: none;} } // 售后服务 .service_custom { .service_before_main { padding-bottom:65px; img {float: right;} h3 {font-size: 22px;line-height: 60px;width: 575px;float: left;} p {line-height: 30px;width: 575px;float: left;} } .service_after_main { li { width: 576px;margin-bottom: 40px; img {display: block;width: 575px;height: 253px;object-fit: cover;} p:nth-of-type(1) {font-size: 22px;line-height: 70px; } p:nth-of-type(2) { line-height: 30px; span {color: @mc1;} } } } } .no-goods { padding:50px 0px; img {display: block;margin:0 auto;} p {font-size: 16px;text-align: center;line-height: 60px;} } .product_index_type { height: 140px;border-bottom:1px solid #e5e5e5;margin-bottom: 45px; .main { li { width: 200px;float: left; div { display: block;width: 200px;height: 100px; } p {font-size: 16px;text-align: center;} &:hover { div {background-position-y: -100px !important;.transition(.5s); } p {color: @mc1;} } } .active { div {background-position-y: -100px !important;.transition(.5s); } } li:nth-of-type(1) div {background: transparent url('../images/bg04.png') center 0px no-repeat;.transition(.5s);} li:nth-of-type(2) div {background: transparent url('../images/bg05.png') center 0px no-repeat;.transition(.5s);} li:nth-of-type(3) div {background: transparent url('../images/bg06.png') center 0px no-repeat;.transition(.5s);} li:nth-of-type(4) div {background: transparent url('../images/bg07.png') center 0px no-repeat;.transition(.5s);} li:nth-of-type(5) div {background: transparent url('../images/bg08.png') center 0px no-repeat;.transition(.5s);} li:nth-of-type(6) div {background: transparent url('../images/bg09.png') center 0px no-repeat;.transition(.5s);} } } .product_index { ul { li { width: 280px;height: 415px;float: left;margin-right: 26px; box-sizing:border-box;margin-bottom: 45px; div { width: 280px;height: 280px;background:#f2f2f2;overflow:hidden;padding:8px;box-sizing:border-box; img {display: block;width: 264px;height: 264px;object-fit: contain;.transition();} } h3 {font-size: 16px;color: #333;line-height: 45px;margin-bottom: 15px;width: 250px;margin:0 auto;} p {color: #333;line-height: 30px;color: #333;width: 250px;margin:0 auto 10px;} &:hover { img {.scale(1.05);.transition();} } a:nth-of-type(2),a:nth-of-type(3) { display: inline-block;width: 105px;height: 25px;color: #999;border:1px solid #999;border-radius: 4px;text-align: center;line-height: 25px;.transition(); &:hover { background: @mc1;color: #fff;border-color:@mc1;.transition(); } } a:nth-of-type(2) {margin:0px 33px 0px 15px;background: @mc1;color: #fff;border-color: @mc1;} } li:nth-of-type(4n) {margin-right: 0px;float: right;} } } .product_index1 { width: 920px; box-sizing: border-box; li { width: 300px;height: 245px;float: left;margin-right: 10px;margin-bottom: 12px;background:#fff;box-sizing: border-box;border:3px solid #fff; div { width: 294px;height:189px;position:relative;overflow: hidden;box-sizing:border-box; img {width: 294px;height:189px;display: block;.transition();object-fit: cover;} } h4 {font-size: 16px;text-align: center;line-height: 45px;.transition();} &:hover { img {.scale(1.08);.transition();} } } li:nth-of-type(3n) {margin-right: 0px;float: right;} } //产品详情 多图 .product_info_tab { padding-top: 20px;padding-left: 20px; .product_info_tab_box { .product_info_tab_box_img_big { width: 500px;height: 500px; img {height: 500px;width: 500px;display: block;box-sizing: border-box;border:1px solid #eee;} a {display: none;} a:nth-of-type(1) {display: block;} } .product_info_tab_box_img_small { height: 100px;width: 500px; img {height: 96px;width: 96px;box-sizing: border-box;float: left;margin:2px;border:1px solid #eee;} img:hover {border:1px solid #dd2121;} } } > div:nth-child(2) { width: 400px; h3 {font-size: 24px;line-height: 36px;} img:nth-of-type(1) {} div:nth-of-type(1) { text-align: center;margin-top: 100px; img {width: 240px;height: 240px;border:1px solid #eee;} p {font-size: 20px;line-height: 38px;color: #545454;text-align: center;} } } } .title_1200 { margin: 0 auto 20px; padding: 12px 0px 9px 0px; width: 1200px; height: 25px; border-bottom: 2px solid #dbdbdb; strong { max-width: 150px !important; height: 25px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;display: inline-block; float: left; display: inline-block; padding-bottom: 8px; height: 100%; border-bottom: 2px solid #414141; color: @mc1; text-align: center;font-size: 18px; } span { overflow: hidden; zoom: 1; font-size: 12px;padding-left:20px;display: inline-block;float: right; height: 25px; text-overflow: ellipsis; white-space: nowrap;color: #666; background: url('../images/sprite.gif') no-repeat;background-position: 0 -149px; a {color: #666;} } } .title_900 { margin: 0 auto 20px; padding: 12px 0px 9px 0px; width: 900px; height: 25px; border-bottom: 2px solid #dbdbdb; strong { max-width: 150px !important; height: 25px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;display: inline-block; float: left; display: inline-block; padding-bottom: 8px; height: 100%; border-bottom: 2px solid #414141; color: @mc1; text-align: center;font-size: 18px; } span { overflow: hidden; zoom: 1; font-size: 12px;padding-left:20px;display: inline-block;float: right; height: 25px; text-overflow: ellipsis; white-space: nowrap;color: #666; background: url('../images/sprite.gif') no-repeat;background-position: 0 -149px; a {color: #666;} } } .title1 { padding: 12px 0px 9px 0px; height: 25px; border-bottom: 2px solid #dbdbdb;margin-bottom: 30px; strong { max-width: 150px !important; height: 25px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;display: inline-block; float: left; display: inline-block; padding-bottom: 8px; height: 100%; border-bottom: 2px solid #414141; color: #da020d; text-align: center; } span { overflow: hidden; zoom: 1; font-size: 12px;padding-left:20px;display: inline-block; height: 25px; text-overflow: ellipsis; white-space: nowrap; background: url('../Image/sprite.gif') no-repeat;background-position: 0 -150px; } } .title2 { background: #fff;height: 40px;margin-bottom: 30px;border-bottom: 1px solid #f0f0f0; .crumbs { line-height: 40px;height: 40px;width: 500px;padding-left: 30px;background:url('../images/house.png') left center no-repeat; box-sizing:border-box;float: left;font-size: 16px; a {font-size: 16px;} span {font-weight: bold;} } ul { float: left; li { display: inline-block;margin-left: 120px; a { color: #333;line-height: 70px;display: block;font-size: 16px; &:hover { color: @mc1; } } .active {color: @mc1;} } } } .title3 { height: 50px;line-height: 50px; color: #666; a {color: #666;} span {color: #ff9600;} } .article_content_1200 { border:1px solid #ececec;box-sizing:border-box;padding:30px;width: 1200px;margin:0 auto; min-height: 300px; img {display: block;max-width:1140px;margin:0 auto;} iframe {display: block;width: 800px;height: 600px;margin:20px auto;} } .article_content_800 { box-sizing:border-box;padding:30px 0;width: 800px;margin:0 auto; min-height: 300px; img {display: block;max-width:800px;margin:0 auto;} iframe {display: block;width: 800px;height: 600px;margin:20px auto;} } .article { overflow: hidden; margin-bottom: 12px; width: 920px; border: 1px solid #ececec; background-color: #fff; .article_content { width: 880px;margin:30px auto; img {max-width: 850px;display: block;margin:0 auto;} } .news_title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center;font-size: 18px;font-weight: bold;line-height: 60px; } .meta {color: #999; text-align: center; line-height: 28px;margin-bottom: 10px;} } .article_info { box-sizing:border-box;padding:30px;margin-bottom: 12px; width: 920px; border: 1px solid #ececec;background:#fff; .article_title {font-size: 18px;text-align: center;line-height: 40px;} .meta {color: #999; text-align: center; line-height: 28px;margin-bottom: 20px;font-size: 16px;} img {max-width: 860px;display: block;margin:0 auto;} iframe { display: block;width: 800px;height: 500px;margin: 30px auto; } } .article_content { box-sizing:border-box;padding:20px ; img {max-width: 1160px;display: block;margin:0 auto;} iframe { display: block;width: 800px;height: 500px;margin: 30px auto; } } .article_1200 { box-sizing:border-box;padding:30px 20px;border: 1px solid #ececec; img {max-width: 1160px;display: block;margin:0 auto;} iframe { display: block;width: 800px;height: 500px;margin: 30px auto; } } .contact_main { position: relative;padding:30px;background:#eee;box-sizing:border-box; #dituContent,#allmap {width:55%;height:350px;overflow:hidden;border:1px solid #ddd;float: right;} .contact-info { line-height: 30px;color: #333; width: 40%;float: left;padding-left:10px; h2 {font-size: 20px;font-weight: bold;} p {display: block;line-height: 36px;color: #000;width: 450px;} } } .contact_box { background: url('../images/contact_bg.jpg') center center no-repeat;height: 822px;box-sizing:border-box;padding-top:120px; .contact_box_message { width: 460px;float: left; h3 {font-size: 30px;color: #444;margin-bottom: 30px;} form { input,textarea { background:#fff;margin-bottom: 30px;font-size: 14px; } .form-tr { display: inline-block; input { width: 210px;margin-right: 15px;text-indent: 1em;line-height: 30px; } textarea { width: 435px;box-sizing:border-box;padding:1em;height: 160px; } .code { input { width: 150px;margin-right: 15px;text-indent: 1em;line-height: 30px;vertical-align: top; } img {display: inline-block;height: 30px;} } } .form-submit { float: right; a { width: 120px;text-indent: 1em;line-height: 30px;margin-right: 25px; background:@mc1;color: #fff;text-align: center;display: block; } } } } .contact_box_info { width: 500px;float: right; > p:nth-of-type(1) {font-size: 30px;color: #444;margin-bottom: 5px;text-transform: uppercase;} > p:nth-of-type(2) {font-size: 30px;color: #444;margin-bottom: 30px;} > p:nth-of-type(3) {font-size: 16px;line-height: 30px;} div { margin-bottom: 30px; display: inline-block; margin-right: 40px; img {display: block;width: 150px;height: 150px;border:1px solid #dedede;} p {width: 150px;text-align: center;line-height: 40px;font-size: 16px;} } } } #allmap1 {width:1200px;height:450px;overflow:hidden;border:3px solid #eee; margin:10px auto;} .contact_box2 { li { width: 390px;display: inline-block;margin-bottom: 10px;height: 30px; p {font-size: 16px;} } } // 招商加盟 .com_dh{ h2{font-size: 36px;text-align: center;margin-bottom:5px;font-weight: 400;} h4{color: #666666;font-size: 18px;text-align: center;font-weight: 400;} } .jiameng_banner{background: url("../images/jiameng_banner.jpg")no-repeat top center;max-width: 1920px;height:631px; } .jiameng1{ background: #ececec;position: relative;height: 666px; h2 {font-size: 36px; text-align: center; margin-bottom: 5px; font-weight: 400;} h4 {color: #666666; font-size: 18px; text-align: center; font-weight: 400;margin-bottom: 40px;} .jiameng1_nr{ background: #fff;height: 666px;padding: 50px;box-sizing: border-box;margin: -67px auto 0;position: absolute;;z-index: 22;left:0; right:0; > img{float: right;margin-left: 40px;width: 513px;display: block;} .jiameng1_txt{ h3 {font-size: 20px; color: #1f2a64; line-height: 60px; font-weight: bold;} p{line-height: 30px;} } } } .jiameng2{background: #fff;padding:50px 0; img{margin-top: 40px;} } .jiameng3{ background: url("../images/jiameng3.jpg") no-repeat top center fixed; height:610px;box-sizing: border-box;padding-top: 60px;text-align: center;color: #fff; h2{font-size: 36px;font-weight: 400;margin-bottom: 60px;} p{line-height: 36px;} } .jiameng4{background: #fff;padding: 50px 0; } .fwlc{margin-top: 40px; overflow: hidden; height:160px; } .fwlc1{ width: 1200px; margin: 0 auto; } .fwlc1_head h3{ font-size: 30px; color: #b62e27; text-align: center; margin-top:50px; font-weight: normal; margin-bottom: 50px; } .fwlc1_con ul li{ float: left; height:133px; width: 130px; margin-right: 41px; text-align: center; position: relative; } .fwlc1_con ul li:last-child{ margin-right:0; } .fwlc1_con_text h3{ font-weight: normal; color: #555555; font-size: 24px; margin-top: 38px; } .fwlc1_con_text p{ font-size: 14px; color:#555555; } .fwlc1_con_text span{ display: block; width: 30px; height: 2px; background: #555555; margin: 0 auto; margin-top: 9px; } .pic img{ -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } .fwlc1_con ul li:hover .pic img{ -webkit-filter: grayscale(0); /* Chrome, Safari, Opera */ filter: grayscale(0); } .fwlc1_con ul li:hover h3{ color: #cc3333; } .fwlc1_con ul li:hover p{ color: #cc3333; } .fwlc1_con ul li:hover span{ background: #cc3333; } .fwlc1_con ul li:hover .pic:before{ background: url("../images/bg_progress_pic11.png") no-repeat; } .fwlc1_con ul li:hover .pic:after{ background: url("../images/bg_progress_pic12.png") no-repeat; } .fwlc1_con li{ float:left; width:25%; text-align:center;} .fwlc1_con li .pic{ position:relative; display:block; width:136px; margin:0 auto;} .fwlc1_con li .pic:after{ position:absolute; top:0; right:0; bottom:0; left:0; background:url(../images/bg_progress_pic.png) no-repeat; content:'';} .fwlc1_con li .pic:before{ position:absolute; top:0; right:0; bottom:0; left:0; background:url(../images/bg_progress_pic1.png) no-repeat; content:'';} .fwlc1_con li.p0 .pic:after{ -webkit-animation:rollP0 2s linear infinite; -o-animation:rollP0 2s linear infinite; animation:rollP0 2s linear infinite;} .fwlc1_con li.p0 .pic:before{ -webkit-animation:rollP00 2s linear infinite; -o-animation:rollP00 2s linear infinite; animation:rollP00 2s linear infinite;} .fwlc1_con li.p1 .pic:after{ -webkit-animation:rollP1 2s linear infinite; -o-animation:rollP1 2s linear infinite; animation:rollP1 2s linear infinite;} .fwlc1_con li.p1 .pic:before{ -webkit-animation:rollP1 2s linear infinite; -o-animation:rollP11 2s linear infinite; animation:rollP11 2s linear infinite;} .fwlc1_con li.p2 .pic:after{ -webkit-animation:rollP0 2s linear infinite; -o-animation:rollP0 2s linear infinite; animation:rollP0 2s linear infinite;} .fwlc1_con li.p2 .pic:before{ -webkit-animation:rollP00 2s linear infinite; -o-animation:rollP00 2s linear infinite; animation:rollP00 2s linear infinite;} .fwlc1_con li.p3 .pic:after{ -webkit-animation:rollP1 2s linear infinite; -o-animation:rollP1 2s linear infinite; animation:rollP1 2s linear infinite;} .fwlc1_con li.p3 .pic:before{ -webkit-animation:rollP1 2s linear infinite; -o-animation:rollP11 2s linear infinite; animation:rollP11 2s linear infinite;} .fwlc1_con li.p4 .pic:after{ -webkit-animation:rollP0 2s linear infinite; -o-animation:rollP0 2s linear infinite; animation:rollP0 2s linear infinite;} .fwlc1_con li.p4 .pic:before{ -webkit-animation:rollP00 2s linear infinite; -o-animation:rollP00 2s linear infinite; animation:rollP00 2s linear infinite;} .fwlc1_con li.p5 .pic:after{ -webkit-animation:rollP1 2s linear infinite; -o-animation:rollP1 2s linear infinite; animation:rollP1 2s linear infinite;} .fwlc1_con li.p5 .pic:before{ -webkit-animation:rollP11 2s linear infinite; -o-animation:rollP11 2s linear infinite; animation:rollP11 2s linear infinite;} .fwlc1_con li.p6 .pic:after{ -webkit-animation:rollP0 2s linear infinite; -o-animation:rollP0 2s linear infinite; animation:rollP0 2s linear infinite;} .fwlc1_con li.p6 .pic:before{ -webkit-animation:rollP00 2s linear infinite; -o-animation:rollP00 2s linear infinite; animation:rollP00 2s linear infinite;} .fwlc1_con li .pic img{ display:block; width:100%;} .fwlc1_con li h3{ margin:30px 0 15px;font-size:18px; font-weight:normal; color:#555556;} .fwlc1_con li p{ margin:0;} @-webkit-keyframes rollP0{ 0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);} } @-o-keyframes rollP0{ 0%{-o-transform:rotate(0deg);} 100%{-o-transform:rotate(360deg);} } @-moz-keyframes rollP0{ 0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(360deg);} } @keyframes rollP0{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } @-webkit-keyframes rollP00{ 0%{-webkit-transform:rotate(360deg);} 100%{-webkit-transform:rotate(0deg);} } @-o-keyframes rollP00{ 0%{-o-transform:rotate(360deg);} 100%{-o-transform:rotate(0deg);} } @-moz-keyframes rollP00{ 0%{-moz-transform:rotate(360deg);} 100%{-moz-transform:rotate(0deg);} } @keyframes rollP00{ 0%{transform:rotate(360deg);} 100%{transform:rotate(0deg);} } @-webkit-keyframes rollP1{ 0%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform:rotate(630deg);} } @-o-keyframes rollP1{ 0%{-o-transform:rotate(270deg);} 100%{-o-transform:rotate(630deg);} } @-moz-keyframes rollP1{ 0%{-moz-transform:rotate(270deg);} 100%{-moz-transform:rotate(630deg);} } @keyframes rollP1{ 0%{transform:rotate(270deg);} 100%{transform:rotate(630deg);} } @-webkit-keyframes rollP11{ 0%{-webkit-transform:rotate(630deg);} 100%{-webkit-transform:rotate(270deg);} } @-o-keyframes rollP11{ 0%{-o-transform:rotate(630deg);} 100%{-o-transform:rotate(270deg);} } @-moz-keyframes rollP11{ 0%{-moz-transform:rotate(630deg);} 100%{-moz-transform:rotate(270deg);} } @keyframes rollP11{ 0%{transform:rotate(630deg);} 100%{transform:rotate(270deg);} } .fwlc1_con_text{ position: absolute; z-index: 1; top: 0; left: 0; right: 0; } .jiameng5 { background: #ececec;padding-bottom:50px; h2 {text-align: center;font-size: 36px;font-weight: 400;padding: 50px 0;} form { .form-tr { width: 300px;float: left; p{width: 40px;float: left;line-height: 40px;} input{background: #fff;height: 40px;border: 1px solid #dcdcdc;width: 227px;text-indent: 1em;font-size: 14px;} .captcha { width: 120px;vertical-align: top; } img {display: inline-block;height: 40px;} } .submit {background:#d53f22;color: #fff;height: 40px;width: 200px;line-height: 40px;margin-top: 20px;text-align: center; display: block;margin:40px auto 0;} } } // 产品详情 .product_info_img_box { margin-bottom: 30px;height: 400px; > div:nth-of-type(1){ width: 500px;height: 400px;border:1px solid #f2f2f2;float: left;box-sizing:border-box;padding:10px; img { display: block;width: 480px;height: 380px;object-fit: contain; } } > div:nth-of-type(2){ width: 600px;float: right; h1 { font-size: 20px;font-weight: bold;line-height: 50px;margin-bottom: 55px; } > p { font-size: 14px;line-height: 30px;overflow: hidden;border-bottom:1px solid #f0f0f0;border-top:1px solid #f0f0f0;margin-bottom: 20px;padding: 15px 0; span {display: inline-block;width: 100px;color: #888;line-height: 30px;} } .product_description { margin-bottom: 30px;border-bottom:1px solid #f0f0f0;padding-bottom:15px; span {display: inline-block;width: 100px;color: #888;line-height: 30px;float: left;} p { width: 500px;float: right;font-size: 14px;line-height: 30px;height: 90px;overflow: hidden; } } a { color: #fff;background:#ff9600;width: 120px;height: 36px;line-height: 36px;text-align: center;display: inline-block; border-radius:5px;margin-right: 20px; } } } .product_info_content_box { margin-top: 45px;background: #f5f5f5;padding:40px 0 70px; .product_info_content_box_left { width: 890px;float: left;padding:25px 0px;background: #fff; .product_info_title { line-height: 50px;width: 800px;margin:0 auto;border-bottom:1px solid #f0f0f0; span { font-size: 30px;display: block;line-height: 50px;border-bottom:2px solid #ff9600;width: 120px;text-align: center; } } .newsPage { width: 800px;margin:0 auto; } } .product_info_content_box_right { width: 250px;float: right;background:#fff; li { width: 200px;margin:0 auto;padding:10px 0px; div { width: 200px;height: 200px;border-radius:5px;overflow:hidden;box-sizing:border-box;padding:5px; img {display: block;width: 190px;height: 190px;object-fit: cover;} } h3 {border-bottom: 1px solid #eaeaea;line-height: 28px;font-size: 16px;padding-bottom: 5px;text-align: center;} } } } // 产品详情 多图 .product_info_img_box1 { margin-top: 30px; .product_info_img_box1_right { width: 920px;background:#fff;float: right;min-height: 500px; .product_title_info { box-sizing:border-box;background:#f7f7f9;position:relative;margin-top: 15px;overflow: hidden;width: 920px;margin:15px auto 0 ; padding:15px; .banner_box { width: 400px;position:relative;float: left;height: 340px; .productinfo_banner { width: 400px;height: 265px;border:1px solid #dedede; img {display: block;width: 400px;height: 265px;object-fit: contain;} } .swiper-prev {position: absolute;left: 0px;bottom: 0px;cursor: pointer;} .swiper-next {position: absolute;right: 0px;bottom: 0px;cursor: pointer;} } .product_right_info { width: 450px;float: right; h1 {font-size: 24px;line-height: 50px;border-bottom: 1px dotted #dedede;margin-bottom: 20px;} .product_right_info_main {width: 300px; line-height: 30px;color: #333;margin-bottom: 50px;22 span {display: inline-block;line-height: 30px;color: #000} } .ewm_box { img {display: block;width: 135px;height: 135px;margin:0 auto 5px;border:1px solid #ccc;} p {text-align: center;line-height: 20px;color: #9d2932;} } } .go_order { width: 150px;height: 50px;color: #fff;text-align: center;line-height: 50px;border-radius: 6px;background: #9d2932;font-size: 16px; border:none;margin-right: 20px;display: block; } .contact_inline {width: 150px;height: 50px;color: #fff;text-align: center;line-height: 50px;border-radius: 6px;background: #667284;font-size: 16px;display: inline-block;} } } } .productinfo-swiper-pagination { overflow: hidden;text-align: center;height: 64px;width: 400px;margin:15px auto 0; li { width:50px;height:52px;margin:0 4px;box-sizing:border-box;padding-top:1px; img {width:48px;height:48px;display: block;object-fit: cover;} } .swiper-pagination-bullet {opacity: 1;background: none;border:1px solid #999;border-radius: 0;} .swiper-pagination-bullet-active {opacity: 1;background: none;border:1px solid @mc1;box-sizing: border-box;} } .info_title { clear: both;margin: 0px auto; width: 850px; height: 60px;border-top:1px solid #dedede;border-bottom:1px solid #dedede; span { display: block;height: 60px;box-sizing:border-box;border-top: 5px solid @mc1;border-left:1px solid #dedede;border-right:1px solid #dedede; font-size: 16px;color: @mc1;width: 160px;text-align: center;line-height: 50px;letter-spacing: 2px; } } .product_info_title { font-size: 18px;margin: 40px auto 20px;line-height: 40px;border-bottom: 1px dashed #666; text-indent: 20px;background: url('../images/p-detail-right-active.png') left center no-repeat; } .product_info_marquee { overflow:hidden;height: 200px;margin:30px auto;width: 1200px; li { float: left;width: 250px;height: 200px;margin-right: 15px; div { width: 250px;height: 165px;overflow: hidden; img {display: block;width: 250px;height: 165px;object-fit: cover;box-sizing: border-box;.transition();} } p {line-height: 35px;text-align: center;background: #eee;font-size: 16px;;.transition();} &:hover { img {.scale(1.06);.transition();} p {color: #fff;background: @mc1;;.transition();} } } } .product_info_img_box2 { .banner_box { width: 650px;position:relative;float: left;height: 520px; .productinfo_banner { width: 650px;height: 430px;border:1px solid #dedede; img {display: block;width: 650px;height: 430px;object-fit: contain;} } .swiper-prev {position: absolute;left: 0px;bottom: 0px;cursor: pointer;} .swiper-next {position: absolute;right: 0px;bottom: 0px;cursor: pointer;} } .product_right_info { width: 480px;float: right; h1 {font-size: 24px;line-height: 50px;border-bottom: 1px dotted #dedede;margin-bottom: 20px;} .product_right_info_main { width: 300px; line-height: 40px;color: #333;margin-bottom: 50px;22 span {display: inline-block;line-height: 30px;color: #000} } .ewm_box { img {display: block;width: 135px;height: 135px;margin:0 auto 5px;border:1px solid #ccc;} p {text-align: center;line-height: 20px;color: #9d2932;} } .go_order { width: 150px;height: 50px;color: #fff;text-align: center;line-height: 50px;border-radius: 6px;background: #9d2932;font-size: 16px; border:none;margin-right: 20px;display: block; } } } .productinfo1-swiper-pagination { overflow: hidden;text-align: center;height: 80px;width: 650px;margin:15px auto 0; li { width:80px;height:80px;margin:0 8px;box-sizing:border-box;padding-top:1px; img {width:80px;height:80px;display: block;object-fit: cover;} } .swiper-pagination-bullet {opacity: 1;background: none;border:1px solid #999;border-radius: 0;} .swiper-pagination-bullet-active {opacity: 1;background: none;border:1px solid @mc1;box-sizing: border-box;} } .rmtj_box { width: 300px;box-sizing: border-box;padding:15px;background: #eee; .product_info_title {margin-top: 0px;} li { width: 270px;margin-bottom: 20px; div { width: 270px;height: 180px;overflow: hidden; img {display: block;width: 270px;height: 180px;object-fit: cover;.transition();} } p {display: block;line-height: 40px;font-size: 16px;text-align: center;} &:hover { img {.scale(1.05);.transition();} } } } .product_info_content_850 { width: 850px;float: right; } .newsPage { margin-top: 30px;padding:20px; .page-a {line-height: 40px;text-align: right;} } //新闻index .news_index {margin:20px 20px 0; li {box-sizing: border-box;padding:20px;background: #fff;margin-bottom: 20px;overflow: hidden;border-bottom:1px dashed #eee; img {display: block;margin-right: 20px;object-fit: cover;width: 260px;height: 165px;border:1px solid #eee;} h3 {font-size: 18px; line-height: 45px; color: #333;} p { font-size: 14px; line-height: 30px; color: #666;height: 90px;overflow: hidden;height: 90px;overflow: hidden; } time {color: #666;} &:hover { h3 {color: @mc1;} } } } //新闻index1 .news_index1 { li { width: 290px;float: left;margin-right: 6px;margin-bottom: 13px;border:1px solid #ededed;box-sizing:border-box; .transition(); div { width: 290px;height: 230px;overflow: hidden;box-sizing:border-box;background:#fff; img {width: 290px;display: block;height: 230px;.transition();object-fit: cover;} } h3 {line-height: 45px;box-sizing: border-box;padding:0px 10px;font-size: 14px;background: #eee;text-align: center;} &:hover { img {.scale(1.05);.transition();} box-shadow:0px 0px 3px rgba(0,0,0,0.4);.transition(); } } li:nth-of-type(4n) {margin-right: 0px;float: right;} } //新闻index2 .news_index2 { li { margin-bottom: 20px;border:1px solid #e9e9e9;height: 80px; .news_index2_left { width: 1050px;box-sizing:border-box;padding-left:20px;float: left; h3 {font-size: 16px;line-height: 80px;font-weight: bold;} // p {font-size: 14px;line-height: 30px;height: 60px;overflow: hidden;color: #666;} } .news_index2_right { width: 120px;height: 80px;line-height: 80px;text-align: center;background:@mc1; color: #fff;float: right;.transition(); } &:hover { h3 {color: @mc1;} } } } //新闻index3 .news_index3 { li { padding:18px 0px;border-bottom: 1px dashed #d2d2d5; div:nth-of-type(1) { width: 75px;float: left;padding-top: 10px; time {display: block;text-align: right; } time:nth-of-type(1) {font-size: 30px;line-height: 50px;font-weight: bold;} time:nth-of-type(2) {font-size: 14px;} } img {display: block;width: 290px;height: 150px;object-fit: cover;margin:0px 50px 0 40px;float: left;} div:nth-of-type(2) { width: 700px;float: left; h3 {font-size: 18px;line-height: 45px;} p {font-size: 14px;line-height: 24px;height: 72px;overflow:hidden;color: #666;} } &:hover { time {color: @mc1;} h3 {color: @mc1;} } } } //新闻index4 .news_index4 { li { border: 1px solid #dedede;width: 390px;margin-right: 15px;box-sizing:border-box;float: left;margin-bottom: 20px; height: 210px;padding-top:30px; div:nth-of-type(1) { width: 95px;box-sizing:border-box;height: 110px;border-right:1px solid #dedede;margin-right: 15px;float: left; time:nth-of-type(1) {font-size: 40px;line-height: 70px;text-align: center;display: block;text-align: center;} time:nth-of-type(2) {font-size: 14px;text-align: center;display: block;} } div:nth-of-type(2) { width: 260px;float: left;height: 110px; h3 {font-size: 22px;line-height: 50px;} p {font-size: 14px;line-height: 24px;height: 48px;overflow:hidden;color: #666;} } .news_index_more { border-top: 1px solid #dedede; padding:0 15px; color: #666;line-height: 40px;height: 40px;margin-top: 30px; span { display: inline-block;line-height: 40px;color: #000;float: right;margin-right: 10px;.transition(); } } &:hover { h3 {color: @mc1;} .news_index_more { color: @mc1; span {margin-right: 0px;color: @mc1;.transition();} } } } li:nth-of-type(3n) {margin-right: 0px;float: right;} } //新闻index5 .news_index5 { li { width: 280px;box-sizing:border-box;border:1px solid #ededed;float: left;margin-right: 26px;margin-bottom: 15px; .img { width: 278px;height: 300px;overflow: hidden;box-sizing:border-box;background:#fff; img {width: 278px;display: block;height: 300px;.transition();object-fit: contain;} } h3 {line-height: 36px;box-sizing: border-box;padding:0px 10px;font-size: 16px;background: #eee;text-align: center;} } li:nth-of-type(4n) {margin-right: 0px;float: right;} } //荣誉资质 .honor_banner_box { position: relative; .honor_banner { margin:20px auto 60px; .swiper-slide { time {font-size: 24px;line-height: 45px;border-bottom: 4px solid @mc1;margin-bottom: 10px;display: block;color:@mc1} p {font-size: 18px;line-height: 28px;} } } .development_line { position: absolute;display: block;width: 1200px;background: #ccc;height: 1px;content: ''; left: 0px;right: 0px;top:48px;z-index: 8;margin:auto; } .history-swiper-prev {position: absolute;left: -80px;top: 30px;cursor: pointer;} .history-swiper-next {position: absolute;right: -80px;top: 30px;cursor: pointer;} } .honor_box { .zhaoshang_title {margin-bottom: 40px;} li { width: 280px;box-sizing:border-box;border:1px solid #ededed;float: left;margin-right: 26px;margin-bottom: 15px; .img { width: 278px;height: 210px;overflow: hidden;box-sizing:border-box;background:#fff; img {width: 278px;height: 210px;.transition();object-fit: contain;display: block;} } h3 {line-height: 45px;box-sizing: border-box;padding:0px 10px;font-size: 18px;background: #eee;text-align: center;} } li:nth-of-type(3n) {margin-right: 0px;float: right;} } //新闻index6 .news_index6 { li { display: block;width: 590px;height: 190px;box-sizing:border-box;padding:12px 15px 12px 12px;margin-bottom: 30px; float: left;background:#eee; img { display: block;width: 260px;height: 166px;object-fit: cover;float: left; } div { width: 280px;float: right; h3 {font-size: 18px;line-height: 50px;} p {color: #666;height: 56px;line-height: 28px;overflow:hidden;margin-bottom: 20px;font-size: 16px;} time {font-size: 14px;color: #999;float: left;} span {display: block;width: 80px;height: 30px;float: right;text-align: center;line-height: 30px;background:#a0a0a0;color: #fff;.transition();} } &:hover { h3 {color: @mc1;} span {background:@mc1;.transition();} } } li:nth-of-type(2n) {float: right;} } .news_index7 { li { display: block;width: 370px;height: 415px;box-sizing:border-box; float: left;margin-right: 45px;background:#f8f8f8;margin-bottom: 20px;.transition(); img { display: block;width: 370px;height: 240px;object-fit: cover;margin-bottom: 15px; } div { width: 350px;margin:0 auto; h3 {font-size: 16px;line-height: 55px;border-bottom: 1px solid #ccc;margin-bottom: 15px;} p {color: #666;height: 48px;line-height: 24px;overflow:hidden;} } &:hover { box-shadow:0px 0px 6px rgba(0,0,0,0.4);.transition(); background:#ffffff; h3 {border-color: @mc1;} } } li:nth-of-type(3) {float: right;margin-right: 0px;} } .message { padding: 50px 0px 60px; background: #eee; overflow: hidden; h3 {font-size: 30px;text-align: center;font-weight: bold;margin-bottom: 40px;} .form-tr { width: 550px;margin-right: 45px;float: left;margin-bottom: 20px; textarea {height: 80px;width: 550px;font-size: 18px;line-height: 38px;text-indent: 1em;border:1px solid #dfdfdf;display: inline-block;margin-right: 14px;margin-bottom: 20px;font-size: 14px;} input {width: 550px;line-height: 38px;text-indent: 1em;margin-right: 14px;border:1px solid #dfdfdf;font-size: 14px; } img {height: 38px;vertical-align: middle;} .captcha {width: 350px;} .error {font-size: 14px;color: #ce2029; } } .form-submit { .submit { display: block;width: 180px;height: 40px;border-radius:5px;font-size: 16px;line-height: 40px;text-align: center; background:#237ed2;color: #fff;margin:20px auto; } } } // 制作工艺 .zhaoshang_title { height: 50px;text-align: center;color: #000;font-size: 36px; } .dingzhi_choice { margin-top: 40px;margin-bottom: 30px; ul { overflow: hidden;margin-top: 40px; li { width:400px; float: left;padding-left: 70px;box-sizing: border-box; img {} p:nth-of-type(1) { font-size: 24px;margin-top: 20px;margin-bottom: 5px;padding-left:35px;position:relative; &:before { width: 10px;height: 10px;display: block;content:'';border-radius:50%;background: #000;position:absolute;left: 10px;top: 14px; } } p:nth-of-type(2) { font-size: 14px;line-height:28px;color: #333;padding:0px 10px; } } li:last-of-type {margin-right: 0px;} } } .dingzhi_lc { margin-top: 40px; ul { overflow: hidden;margin-top: 40px; img {width: 160px;height: 255px;float: left;margin-right: 48px;} img:last-of-type {margin-right: 0px;} } } .dingzhi_service {margin-top: 40px; ul {margin-top: 40px; li {width: 390px;height:325px;box-sizing:border-box;padding-top:90px;float: left;margin-right: 15px;margin-bottom: 20px; p:nth-of-type(1) {font-size: 24px;margin-bottom: 20px;text-align: center;} p:nth-of-type(2) {font-size: 14px;line-height: 24px;text-align: center;height: 72px; } &:after { content:'';display: block;width: 20px;height: 2px;background: #707e91;margin:10px auto; } } li:nth-of-type(1) {background: #eeeef0 url('../Images/bg24.jpg') center center no-repeat;} li:nth-of-type(5), li:nth-of-type(2) {background: #eeeef0;} li:nth-of-type(3) {background: #eeeef0 url('../Images/bg25.jpg') center center no-repeat;margin-right: 0px;} li:nth-of-type(4) {background: #eeeef0 url('../Images/bg26.jpg') center center no-repeat;} li:nth-of-type(6) {background: #eeeef0 url('../Images/bg27.jpg') center center no-repeat;margin-right: 0px;} } } // 国外工厂 .gw_box01 { .zhaoshang_title {margin-bottom: 40px;} img {display: block;width: 1200px;} } .gn_box01 { .zhaoshang_title {margin-bottom: 40px;} p {font-size: 22px;background: @mc1;line-height: 45px;color: #fff;margin-bottom: 20px;text-align: center;} img {display: block;width: 1200px;} } .message_index1 { height: 800px; background: url('../images/message2_bg.jpg') center top no-repeat;box-sizing:border-box;padding-top:170px; h2 {font-size: 55px;color: #fff;text-align: center;} h3 {font-size: 24px;color: #fff;text-align: center;margin-bottom: 190px;line-height: 2;} .contact_message { padding-left:90px;position:relative; p:nth-of-type(1) {font-size: 30px;color: #666;} p:nth-of-type(2) { font-size: 14px;color: #999;margin-bottom: 20px;line-height: 40px; span {color: #c10708;} } .form-tr { width: 340px;height: 40px;display: inline-block;margin-bottom: 20px;margin-bottom: 20px; } input {width: 300px;height: 40px;text-indent: 1em;font-size: 14px;background: #f5f5f5;} img {position: absolute; left: 635px; top: 166px; height: 30px; } .form-submit { display: inline-block; a {background: @mc1;color: #fff;width: 300px;height: 40px;display: block;text-align: center;font-size: 16px;line-height: 40px;} } } } .service_message { text-align: center;padding:30px 0; h3 {font-size: 36px;color: #333;} h4 {font-size: 16px;color: #999;line-height: 2;margin-bottom: 20px;} li {display: inline-block;width: 200px;margin:0px 30px;} } .pagination { text-align: center;margin-bottom:20px;padding-top: 20px;line-height: 30px; .btn {display: inline-block;height: 30px;padding:0px 5px;line-height: 30px;text-align: center;border:1px solid #999;vertical-align: top;} .btn-inverse {background: @mc1;color: #fff;vertical-align: top;} select {height: 30px;vertical-align: top;border:1px solid #999;} } .goods_list {margin-top: 30px;} //sidebar .product_sidebar { float: left; .product_sidebar_main { width: 255px;border:1px solid #dedede;padding-bottom:35px;margin-bottom: 20px;box-sizing:border-box;background: #fff; .product_sidebar_title { line-height:80px;color: #fff;font-weight: bold;font-size: 28px;text-align: center;margin-bottom: 15px; background: url('../images/bg11.png'); letter-spacing: 3px; } .product_type_sidebar { > a { width: 225px;height: 45px; background: url('../images/bg12.png') center 45px;text-indent: 20px; font-size: 16px;line-height: 45px; display: block;margin:0px auto 12px;; &:hover {background-position-y: 0px;color: #fff;} } .active {background-position-y: 0px;color: #fff;} } } .product_sidebar_info { border:1px solid #dedede;border-top: 6px solid @mc1;padding:20px 0px;background: #fff; p {width: 230px;margin:0 auto;} p:nth-of-type(1) { line-height: 45px;font-size: 18px;font-weight: bold;text-align: center; } p:nth-of-type(2) { line-height: 45px;font-size: 22px;font-weight: bold;color: @mc1;text-align: center; } p:nth-of-type(3) { line-height: 30px;font-size: 16px;padding:20px 0 55px;border-top: 1px dashed #ccc;border-bottom: 1px dashed #ccc;} p:nth-of-type(4) { line-height: 45px;font-size: 16px;color: #666;text-align: center; } img:nth-of-type(1) {display: block;width: 230px;margin:0 auto;} img:nth-of-type(2) { display: block;width: 150px;height: 150px;margin:20px auto 0; } } } .news_sidebar {width: 255px;background:#fff;border:1px solid #eee;margin-bottom: 30px;padding-bottom:10px; h3 {border-bottom:1px solid #eee;border-left: 3px solid @mc1;line-height: 40px;text-indent: 1em;} li {box-sizing:border-box;padding:0px 10px; a {line-height: 40px;display: block; img {display: inline-block;margin-right: 10px;vertical-align: middle;} } } } .content { margin-bottom: 30px;overflow: hidden;} .custom_article { img {max-width: 1200px;} h1 {font-size: 20px;font-weight: bold;text-align: center;} .meta {display: block;text-align: center;margin-bottom: 20px;} } //人才招聘 .jobs_list { width: 31%; background: #eee; float: left; box-sizing: border-box; height: 200px; padding: 20px; margin: 1%; cursor: pointer;box-sizing: border-box;margin: 20px 1%; h4 { font-weight: 400;font-size: 18px;margin-bottom: 15px; span {font-size: 34px;margin-left: 10px;} } p {line-height: 24px;} .job-btn { display: block;width: 80px;height: 30px;text-align: center;line-height: 30px;color: #fff; background:@mc1;margin-top: 10px; } } .jobs_list:hover { h4 {font-weight: 600;} } //招聘详情页 .jobs { table { border:1px solid #333;width: 100%; tr:nth-of-type(1) { background: #000; td { text-align:center; strong {color: #fff;} } } td {text-align: center;width:25%;} } tr {height: 40px;} .well { min-height: 300px; > p:nth-child(1) {font-size: 18px;color: #202020;margin-top: 20px;margin-bottom: 20px;background: #eee;line-height:30px;text-indent: 1em;} > a:last-child {margin-top: 60px;font-size: 18px;color: #fff;display: block;width: 150px;height: 50px;text-align: center;background: @mc1;line-height:50px;} > a:last-child:hover {font-weight: bold;} } } //招聘留言页面 #form2{ .order { width: 1000px;margin:0 auto;border:1px dashed #ccc; tr { td:nth-of-type(1) {width: 300px;} td:nth-of-type(2) { width: 700px; } } } } .clearfix,.clear {clear: both;} // 荣誉资质列表页 .honor_index_box { ul { li { width: 220px;height: 340px;box-sizing:border-box;border:1px solid #dcdcdc;float: left;margin-right: 25px;margin-bottom: 30px; .img { width: 218px;height: 298px;overflow: hidden;box-sizing:border-box; img {width: 218px;display: block;height: 298px;.transition();object-fit: contain;.transition();} } h3 {line-height: 40px;box-sizing: border-box;padding:0px 10px;font-size: 16px;text-align: center;} &:hover { img {.scale(1.05);.transition();} } } li:nth-of-type(5n) {margin-right: 0px;float: right;} } } // 分页 .de-page-mian { overflow: hidden; text-align: center; font-size:0; margin:10px 0 35px; .page-inner{ margin-left: 42%; overflow: hidden; a{ display:block; float: left; min-width:26px; padding:0 5px; height: 36px; border:1px solid #dddddd; background: #fff; text-align: center; line-height: 36px; font-size:16px; color:#333; margin-right:-1px; overflow: hidden; &.active,&:hover{ color:#fff; border-color:@mc1; background: @mc1; } &.prev { margin-right:10px; background: #fff url(../images/prev.jpg) no-repeat center; &.on { background: #fff url(../images/prev-hover.jpg) no-repeat center; } &:hover{ background-color: #fff; border-color:#dddddd; } } &.next{ margin-left:10px; margin-right: 15px; background: #fff url(../images/next.jpg) no-repeat center; &.on{ background: #fff url(../images/next-hover.jpg) no-repeat center; } &:hover{ background-color: #fff; border-color:#dddddd; } } &.page-btn { font-size:16px; margin-right: 0; width:63px; margin-left:10px; } } span{ display: block; font-size:16px; color:#333; float: left; line-height: 38px; } input{ display: block; float: left; height: 36px; width:36px; border:1px solid #dddddd; text-align: center; line-height: 36px; font-size:14px; color:#333; margin:0 5px; } } } .news_info_content { width: 950px; .page-header { h1 {font-size: 25px;color: #000;margin-bottom: 10px;} p {text-align: center;} margin-bottom: 25px; } .list-con { min-height: 450px; } } .news_info {min-height: 450px;} .product_info_main { min-height:450px;margin-top:20px;width: 950px; > div:nth-of-type(1) { height: 400px; .product_info_main_img { width:500px;height:400px;position:relative;overflow:hidden;margin:0 auto;border:1px solid #ccc; img {position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;} } > div:nth-of-type(2) { width:430px;height: 400px; h1 {display: block;margin: 10px auto;text-align: left;font-size: 22px;border-bottom: dashed 1px #ccc;padding-bottom: 15px;} p {margin-top: 20px;font-size: 14px;line-height: 36px;margin-bottom: 30px;} a {display: block;background: @mc2;width: 150px;line-height: 50px;text-align: center;color: #fff;} } } > div:nth-child(2) { height: 40px;background: #eee;margin-bottom: 20px;margin-top: 20px; h4 { width: 20%; background: @mc2; color: #fff; font-size: 16px; text-align: center; line-height: 40px; } } .product_info_content {min-height:200px;width: 950px;margin: 0 auto;} } .product_info_main2 { .product_info_main2_top { .product_info_main_img { margin:20px auto; // width: 500px;height: 500px;border:1px solid #ccc;position:relative;margin:0 auto; // img {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin:auto;max-width: 100%;max-height: 100%;margin:auto;} img {display: block;max-height: 500px;margin:0 auto;} } h1 {text-align: center;font-size: 20px;line-height: 40px;} } .product_info_content_title { background: #ccc;margin-top: 30px; h4 {display: inline-block;line-height: 40px;background: #999;padding:0px 20px;color: #fff;} } .product_info_content { min-height: 200px;padding:20px 0; } } .product_info_main1 { min-height:450px;width: 950px; > div:nth-of-type(1) { .product_info_main_img { width:500px;height:400px;position:relative;overflow:hidden;margin:0 auto;border:1px solid #ccc;background:#fff; img {position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;} } > div:nth-of-type(2) { width:390px;height: 400px; h1 {display: block;margin: 10px auto;text-align: left;font-size: 22px;border-bottom: dashed 1px #ccc;line-height: 80px;margin-bottom: 30px;} table { width: 300px; tr { td:nth-of-type(1) {width: 80px;height: 40px;line-height: 40px;} td:nth-of-type(2) {width: 220px;height: 40px;line-height: 40px;} } } } } > div:nth-child(2) { height: 40px;background: #eee;margin:30px auto; h4 { width: 20%; background: @mc1; color: #fff; font-size: 16px; text-align: center; line-height: 40px; } } .product_info_content {min-height:200px;width: 1000px;margin: 0 auto;} } // 右侧悬浮侧边 .fix_side { width: 50px; position: fixed; top: 50%; right: 0; margin-top: -100px;z-index: 18; li { display: block;width: 50px;height: 50px;margin-bottom: 5px;position:relative; a {display: block;width: 50px;height: 50px;} } .back_to_top { cursor: pointer; background:@mc1 url('../images/side04.png') center center no-repeat; } .qiao { cursor: pointer; background:@mc1 url('../images/side05.png') center center no-repeat; } .sidemessage { background:@mc1 url('../images/side02.png') center center no-repeat; span {position: absolute;height: 40px;line-height: 40px;display: block;background: @mc1;color: #fff;right:-240px;width: 240px;top: 5px;text-align: center;.transition();} &:hover { span {left: -240px;.transition();} } } .phone { background:@mc1 url('../images/side01.png') center center no-repeat; span {position: absolute;height: 40px;line-height: 40px;display: block;background: @mc1;color: #fff;right:-115px;width: 115px;top: 5px;text-align: center;.transition();} &:hover { span {left: -115px;.transition();} } } .wx { background:@mc1 url('../images/side03.png') center center no-repeat; img {position: absolute;right: -115px;top: -30px;border:1px solid #ccc;width: 113px;height: 113px;.transition();} &:hover { img {left: -115px;.transition();} } } } .move_self:hover { -ms-transform:translateY(-10px); -webkit-transform:translateY(-10px); -o-transform:translateY(-10px); -moz-transform:translateY(-10px); transition: all 0.7s; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -o-transition: all 0.7s; } //悬浮 图片向上移动 .move_y:hover img { -ms-transform:translateY(-10px); -webkit-transform:translateY(-10px); -o-transform:translateY(-10px); -moz-transform:translateY(-10px); transition: all 0.7s; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -o-transition: all 0.7s; } //悬浮 图片放大 .move_big:hover img { transform:scale(1.05); -ms-transform:scale(1.05); -webkit-transform:scale(1.05); -o-transform:scale(1.05); -moz-transform:scale(1.05); transition: all 0.7s; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -o-transition: all 0.7s; } .move_big_self:hover { transform:scale(1.05); -ms-transform:scale(1.05); -webkit-transform:scale(1.05); -o-transform:scale(1.05); -moz-transform:scale(1.05); transition: all 0.7s; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -o-transition: all 0.7s; } @-webkit-keyframes rotation{ from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } .move_circle:hover img { -webkit-transform: rotate(360deg); animation: rotation 15s linear infinite; -moz-animation: rotation 15s linear infinite; -webkit-animation: rotation 15s linear infinite; -o-animation: rotation 15s linear infinite; } //按钮效果 .btn-0 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;} .btn-0:before { background: @qt1;content: '';.transition(all .6s);position: absolute;top: 0;left: 0;width: 0;height: 100%;z-index: -1;} .btn-0:hover:before {width: 100%;} .btn-1 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;} .btn-1:before {.transition(all .6s);content: '';width: 0;height: 0;.rotate(360deg);border-style: solid;border-width: 0 0 0 0;border-color:@mc1 transparent transparent transparent;position: absolute;top: 0;left: 0;z-index: -1;} .btn-1:hover:before {border-width: 900px 900px 0 0;} .btn-2 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;} .btn-2:before {content: '';position: absolute;bottom: 0;left: 0; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;border-color: transparent transparent transparent @mc1;.rotate(360deg); .transition(all .6s);z-index: -1;} .btn-2:after {border-style: solid;content: '';width: 0;height: 0;border-width: 0 0 0 0;border-color: transparent @mc1 transparent transparent;position: absolute;right: 0;top: 0;.rotate(360deg); .transition(all .6s);z-index: -1;} .btn-2:hover:before {border-width: 165px 0 0 165px;} .btn-2:hover:after {border-width: 0 165px 165px 0;} .btn-3 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;} .btn-3:before {content: '';position: absolute;bottom: 0;left: 0; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;border-color: transparent transparent transparent @qt6;.rotate(360deg); .transition(all .6s);z-index: -1;} .btn-3:after {border-style: solid;content: '';width: 0;height: 0;border-width: 0 0 0 0;border-color: transparent transparent @qt6 transparent;position: absolute;right: 0;bottom: 0;.rotate(360deg); .transition(all .6s);z-index: -1;} .btn-3:hover:before {border-width: 222px 0 0 222px;} .btn-3:hover:after {border-width: 0 0 222px 222px;} .btn-4 {position: relative;overflow: hidden;.transition(all .2s);display: block;z-index: 1;} .btn-4:before, .btn-4:after {position: absolute;top: 50%;content: '';width: 20px;height: 20px;background: #3655ca;.border-radius(50%);z-index: -1;} .btn-4:before {left: -20px;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%); } .btn-4:after {right: -20px;-webkit-transform: translate(50%, -50%);-moz-transform: translate(50%, -50%);-mz-transform: translate(50%, -50%);-o-transform: translate(50%, -50%);transform: translate(50%, -50%);} .btn-4:hover:before {-webkit-animation: criss-cross-left 0.8s both;-moz-animation: criss-cross-left 0.8s both;-o-animation: criss-cross-left 0.8s both;-ms-animation: criss-cross-left 0.8s both;animation: criss-cross-left 0.8s both;} .btn-4:hover:after {-webkit-animation: criss-cross-right 0.8s both;-moz-animation: criss-cross-right 0.8s both;-ms-animation: criss-cross-right 0.8s both;-o-animation: criss-cross-right 0.8s both;animation: criss-cross-right 0.8s both;} @-webkit-keyframes criss-cross-left { 0% {left: -20px;} 50% {left: 50%;width: 20px;height: 20px;} 100% {left: 50%;width: 375px;height: 375px;} } @keyframes criss-cross-left { 0% {left: -20px;} 50% {left: 50%;width: 20px;height: 20px;} 100% {left: 50%;width: 375px;height: 375px;} } @-webkit-keyframes criss-cross-right { 0% {right: -20px;} 50% {right: 50%;width: 20px;height: 20px;} 100% {right: 50%;width: 375px;height: 375px;} } @keyframes criss-cross-right { 0% {right: -20px;} 50% {right: 50%;width: 20px;height: 20px;} 100% {right: 50%;width: 375px;height: 375px;} } .btn-5 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;} .btn-5:after {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;top: 0;right: 0;border-color: transparent #3f444e transparent transparent;} .btn-5:before {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;bottom: 0;left: 0;border-color: transparent transparent transparent #3f444e;} .btn-5:hover:before, .btn-5:hover:after {border-width:80px 433px;} .btn-6 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;} .btn-6:before, .btn-6:after {content: '';position: absolute;top: 0;left: 0;width: 250px;height: 0;background:@qt6;.transition(all .6s);z-index: -1;} .btn-6:after {top: auto;bottom: 0;} .btn-6:hover:before, .btn-6:hover:after {height: 40px;} .btn-7{position:relative;transform-style:preserve-3d;transition:0.4s;} .btn-7:hover{transform:translateZ(20px) rotateX(360deg) scale(1.1);} .btn-8{position:relative;transform-style:preserve-3d;transition:0.4s;} .btn-8:hover{transform:rotateY(360deg) scale(1.1);} .btn-9{position: relative; &::after{position: absolute; content: "";width: 100%;height: 100%;left: 0;top: 0;background: @qt6;transition: transform .4s cubic-bezier(.4,0,.2,1);transform-origin:right bottom;transform: scaleX(0);z-index: -1;} } .btn-9:hover::after{transform: scaleX(1); transform-origin: left bottom;} //btn-span-1标签 .btn-span-1 {position: relative;overflow: hidden;.transition(all .6s);display: block;width: 100%;height: 100%;z-index: 1;} .btn-span-1:before {content: '';position: absolute;bottom: 0;left: 0; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;border-color: transparent transparent transparent @qt6;.rotate(360deg); .transition(all .6s);z-index: -1;} .btn-span-1:after {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;top: 0;right: 0;border-color: transparent @qt6 transparent transparent;} .btn-span-1 span:before {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;bottom: 0;right: 0;border-color: transparent transparent @qt6 transparent;} .btn-span-1 span:after {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;top: 0;left: 0;border-color: @qt6 transparent transparent transparent;} .btn-span-1:hover:before {border-width: 165px 0 0 165px;} .btn-span-1:hover:after {border-width: 0 165px 165px 0;} .btn-span-1:hover span:before {border-width: 0 0 165px 165px;} .btn-span-1:hover span:after {border-width: 165px 165px 0 0;} //btn-span-2标签 .btn-span-2{position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;} .btn-span-2:after {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;top: 0;right: 0;border-color: transparent @qt6 transparent transparent;} .btn-span-2:before {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;bottom: 0;left: 0;border-color: transparent transparent transparent @qt6;} .btn-span-2:before, .btn-span-2:after {border-color:@qt6;} .btn-span-2span:after {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;top: 0;left: 0;border-color: @qt6 transparent transparent transparent;} .btn-span-2span:before {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;right: 0;bottom: 0;border-color: transparent transparent @qt6 transparent;} .btn-span-2span:before, .btn-span-2span:after {border-color: @qt6;} .btn-span-2:hover:before {border-width: 20px 62.5px;} .btn-span-2:hover:after {border-width: 20px 62.5px;} .btn-span-2:hover span:before {border-width: 20px 62.5px;} .btn-span-2:hover span:after {border-width: 20px 62.5px;} //btn-span-3标签 .btn-span-3 {position: relative;overflow: hidden;.transition(all .6s);display: block;;z-index: 1;} .btn-span-3 span {position: absolute;display: block;width: 0;height: 0;.border-radius(50%);background: @qt6;z-index: -1; -webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);-webkit-transition:width 0.4s, height 0.4s;-moz-transition:width 0.4s, height 0.4s;-ms-transition:width 0.4s, height 0.4s;-o-transition:width 0.4s, height 0.4s;transition:width 0.4s, height 0.4s;} .btn-span-3:hover span {width: 562.5px;height: 562.5px;} //btn-span-4标签 .btn-span-4 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;} .btn-span-4:before, .btn-span-4:after,.btn-span-4 span:before,.btn-span-4 span:after {content: '';position: absolute;top: 0;width: 63.5px;height: 0;background: #012f04;.transition(all .6s);z-index: -1;} .btn-span-4:before {left: 0;} .btn-span-4:after {left: 125px;} .btn-span-4 span:before, .btn-span-4 span:after {top: auto;bottom: 0;} .btn-span-4 span:before {left: 62.5px;} .btn-span-4 span:after {left: 187.5px;} .btn-span-4:hover {color: #c0d3c1;} .btn-span-4:hover:before, .btn-span-4:hover:after,.btn-span-4:hover span:before,.btn-span-4:hover span:after {height: 80px;} //btn-span-5标签 .btn-span-5 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;} .btn-span-5:before, .btn-span-5:after,.btn-span-5 span:before,.btn-span-5 span:after {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 0;background:fade(@qt6,50%);.transition(all .6s);z-index: -1;} .btn-span-5:after,.btn-span-5 span:before {top: auto;bottom: 0;} .btn-span-5 span:before,.btn-span-5 span:after { -webkit-transition-delay: 0.4s;-moz-transition-delay: 0.4s;-ms-transition-delay: 0.4s;-o-transition-delay: 0.4s;transition-delay: 0.4s;z-index: -1;} .btn-span-5:hover:before, .btn-span-5:hover:after,.btn-span-5:hover span:before,.btn-span-5:hover span:after {height: 80px;} //btn-span-6标签 .btn-span-6 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;} .btn-span-6:before, .btn-span-6:after,.btn-span-6 span:before,.btn-span-6 span:after {content: '';position: absolute;top: 0;left: 0;width: 0;height: 80px;background: fade(@qt6,25%);.transition(.4s);z-index: -1;} .btn-span-6:after,.btn-span-6 span:before {left: auto;right: 0;} .btn-span-6 span:before,.btn-span-6 span:after {-webkit-transition-delay: 0.4s; -ms-transition-delay: 0.4s;-o-transition-delay: 0.4s;-moz-transition-delay: 0.4s;transition-delay: 0.4s;} .btn-span-6:hover:before, .btn-span-6:hover:after,.btn-span-6:hover span:before,.btn-span-6:hover span:after {width: 250px;} //btn-span-7标签 .btn-span-7 {.transition(.5s);position: relative;overflow: hidden;display: block;} .btn-span-7 span {.transition(.3s);} .btn-span-7:hover{background-color:@qt6;} .btn-span-7:hover > span{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0px,-40px);transform: translate(0px,-40px);} .btn-span-7::after{position: absolute;content: attr(data-text);-webkit-transform: translate(0, 30%);transform: translate(0, 30%);width: 100%;height: 100%;top: 0;left: 0;opacity: 0;filter: alpha(opacity=0);.transition(.3s);} .btn-span-7:hover::after{opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(0, 0);transform: translate(0, 0);} //btn-span-7-1标签 .btn-span-7-1 {.transition(.5s);position: relative;overflow: hidden;display: block;} .btn-span-7-1 span {.transition(.3s);} .btn-span-7-1:hover{background-color:@qt6;} .btn-span-7-1:hover > span{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0px,40px); transform: translate(0px,40px);} .btn-span-7-1::after{position: absolute;content: attr(data-text);-webkit-transform: translate(-30%,0);transform: translate(-30%,0);width: 100%;height: 100%;top: 0;left: 0;opacity: 0;filter: alpha(opacity=0);.transition(.3s); } .btn-span-7-1:hover::after{-webkit-transform: translate(0, 0);opacity: 1;filter: alpha(opacity=100);transform: translate(0, 0);} //btn-span-7-2标签 .btn-span-7-2 {.transition(.5s);position: relative;overflow: hidden;display: block;} .btn-span-7-2 span {.transition(.3s);} .btn-span-7-2:hover{background-color:@qt6;} .btn-span-7-2:hover > span{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0px,40px); transform: translate(0px,40px);} .btn-span-7-2::after{position: absolute;content: attr(data-text);-webkit-transform: translate(-30%, -50%) rotate(-30deg); transform: translate(-30%, -50%) rotate(-30deg); width: 100%;height: 100%;top: 0;left: 0;opacity: 0;filter: alpha(opacity=0);.transition(.3s); } .btn-span-7-2:hover::after{-webkit-transform: translate(0, 0);opacity: 1;filter: alpha(opacity=100);transform: translate(0, 0);} //btn-span-8标签 @-webkit-keyframes jello { from, 11.1%, to {-webkit-transform: none;transform: none;} 22.2% {-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);transform: skewX(-12.5deg) skewY(-12.5deg);} 33.3% {-webkit-transform: skewX(6.25deg) skewY(6.25deg);transform: skewX(6.25deg) skewY(6.25deg);} 44.4% {-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);transform: skewX(-3.125deg) skewY(-3.125deg);} 55.5% {-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);transform: skewX(1.5625deg) skewY(1.5625deg);} 66.6% {-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);transform: skewX(-0.78125deg) skewY(-0.78125deg);} 77.7% {-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);transform: skewX(0.390625deg) skewY(0.390625deg);} 88.8% {-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);transform: skewX(-0.1953125deg) skewY(-0.1953125deg);} } @keyframes jello { from, 11.1%, to {-webkit-transform: none;transform: none;} 22.2% {-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);transform: skewX(-12.5deg) skewY(-12.5deg);} 33.3% {-webkit-transform: skewX(6.25deg) skewY(6.25deg);transform: skewX(6.25deg) skewY(6.25deg);} 44.4% {-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);transform: skewX(-3.125deg) skewY(-3.125deg);} 55.5% {-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);transform: skewX(1.5625deg) skewY(1.5625deg);} 66.6% {-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);transform: skewX(-0.78125deg) skewY(-0.78125deg);} 77.7% {-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);transform: skewX(0.390625deg) skewY(0.390625deg);} 88.8% {-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);transform: skewX(-0.1953125deg) skewY(-0.1953125deg);} } .btn-span-8{.transition(.5s);position: relative;display: block;} .btn-span-8:hover{background-color:fade(@qt6,20%); -webkit-animation-name: jello;animation-name: jello;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;} //btn-span-9标签 .btn-span-9{.transition(.5s);position: relative;display: block;width: 100%;height: 100%;} .btn-span-9 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-9::before{content: '';position: absolute;top: 0;left: 0;-webkit-transform: scale(0.5, 1);transform: scale(0.5, 1);width: 100%; height: 100%; z-index: 1; opacity: 0;filter: alpha(opacity=0); background-color: @qt6;.transition(.4s);} .btn-span-9:hover::before{ opacity: 1;filter: alpha(opacity=100); -webkit-transform: scale(1, 1); transform: scale(1, 1);} //btn-span-9-1标签 .btn-span-9-1{.transition(.5s);position: relative;display: block;width: 100%;height: 100%;} .btn-span-9-1 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-9-1::before{content: '';position: absolute;top: 0;left: 0;-webkit-transform: scale(1,0.5);transform: scale(1,0.5);width: 100%; height: 100%; z-index: 1; opacity: 0;filter: alpha(opacity=0); background-color: @qt6;.transition(.4s);} .btn-span-9-1:hover::before{ opacity: 1;filter: alpha(opacity=100); -webkit-transform: scale(1, 1); transform: scale(1, 1);} //btn-span-10标签 .btn-span-10{.transition(.5s);position: relative;display: block;overflow: hidden;} .btn-span-10 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-10::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; opacity: 0;filter: alpha(opacity=0); background-color: @qt6;.transition(.4s);} .btn-span-10:hover::before{transform: skewX(-180deg) scale(0.6,1);opacity: 1;filter: alpha(opacity=100);-webkit-transform: skewX(-180deg) scale(0.6,1);} //btn-span-11标签 .btn-span-11{.transition(.5s);position: relative;display: block;} .btn-span-11 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-11::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.5);.transition(.4s); border: 1px solid rgba(255,255,255,0.5);} .btn-span-11::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1;.transition(.5s); border: 1px solid rgba(255,255,255,0.5); background-color: rgba(255,255,255,0.25);} .btn-span-11:hover::before{.rotate(-45deg);background-color: rgba(255,255,255,0);} .btn-span-11:hover::after{.rotate(45deg);background-color: rgba(255,255,255,0);} //btn-span-12标签 .btn-span-12{.transition(.5s);position: relative;display: block;width: 100%;height: 100%;perspective: 2000px;} .btn-span-12 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-12::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.4s);} .btn-span-12::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1;.transition(.5s); border: 1px solid rgba(255,255,255,0.5); background-color: rgba(255,255,255,0.25);} .btn-span-12:hover::before{-webkit-transform: rotateX(60deg) translate(0px,40px);transform: rotateX(60deg) translate(0px,40px) ;} .btn-span-12:hover::after{-webkit-transform: rotateX(-60deg) translate(0px,-40px) ;transform: rotateX(-60deg) translate(0px,-40px) ;} //btn-span-13标签 .btn-span-13 {.transition(.5s);position: relative;display: block;} .btn-span-13 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-13::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.4s);} .btn-span-13:hover::before{opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(1.2,1.2);transform: scale(1.2,1.2);} .btn-span-13::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1;.transition(.5s); border: 1px solid rgba(255,255,255,0.5); background-color: rgba(255,255,255,0.25);filter: alpha(opacity=0);opacity: 0;-webkit-transform: scale(0.5,0.5);transform: scale(0.5,0.5);} .btn-span-13:hover::after{opacity: 1 ;filter: alpha(opacity=100);-webkit-transform: scale(1,1);transform: scale(1,1);} //btn-span-13-1标签 .btn-span-13-1{.transition(.5s);position: relative;display: block;width: 100%;height: 100%;} .btn-span-13-1 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-13-1::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.4s);background-color: rgba(255,255,255,0.25);.transition(.3s);} .btn-span-13-1:hover::before{opacity:0 ;filter: alpha(opacity=0);-webkit-transform: scale(0.5,0.5);transform: scale(0.5,0.5);} .btn-span-13-1::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1;opacity:0 ;filter: alpha(opacity=0);.transition(.3s);-webkit-transform: scale(1.2,1.2);transform: scale(1.2,1.2);border: 1px solid rgba(255,255,255,0.5);} .btn-span-13-1:hover::after{opacity:1 ;filter: alpha(opacity=100);-webkit-transform: scale(1,1);transform: scale(1,1);} //btn-span-14标签 .btn-span-14 {.transition(.5s);position: relative;display: block;overflow: hidden;} .btn-span-14 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-14::before, .btn-span-14::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(0,-100%);transform: translate(0,-100%);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);} .btn-span-14::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;} .btn-span-14:hover::before, .btn-span-14:hover::after{-webkit-transform: translate(0,0);transform: translate(0,0);} //btn-span-14-1标签 .btn-span-14-1{.transition(.5s);position: relative;display: block;overflow: hidden;} .btn-span-14-1 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-14-1::before, .btn-span-14-1::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(-100%,0);transform: translate(-100%,0);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);} .btn-span-14-1::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;} .btn-span-14-1:hover::before, .btn-span-14-1:hover::after{-webkit-transform: translate(0,0);transform: translate(0,0);} //btn-span-14-2标签 .btn-span-14-2 {.transition(.5s);position: relative;display: block;overflow: hidden;} .btn-span-14-2 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-14-2::before, .btn-span-14-2::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(-13%,-190%) rotate(-30deg);transform: translate(-13%,-190%) rotate(-30deg);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);} .btn-span-14-2::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;} .btn-span-14-2:hover::before, .btn-span-14-2:hover::after{-webkit-transform: translate(0,0);transform: translate(0,0);} //btn-span-14-3标签 .btn-span-14-3 {.transition(.3s);position: relative;display: block;overflow: hidden;} .btn-span-14-3 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-14-3::before, .btn-span-14-3::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(13%,190%) rotate(-30deg);transform: translate(13%,190%) rotate(-30deg);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);} .btn-span-14-3::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;} .btn-span-14-3:hover::before, .btn-span-14-3:hover::after{-webkit-transform: translate(0,0);transform: translate(0,0);} //btn-span-14-4标签 .btn-span-14-4 {.transition(.3s);position: relative;display: block;overflow: hidden;} .btn-span-14-4 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-14-4::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(13%,190%) rotate(-30deg);transform: translate(13%,190%) rotate(-30deg);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);} .btn-span-14-4::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(-13%,-190%) rotate(-30deg);transform: translate(-13%,-190%) rotate(-30deg);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);} .btn-span-14-4::before{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;} .btn-span-14-4:hover::before, .btn-span-14-4:hover::after{-webkit-transform: translate(0,0);transform: translate(0,0);} //btn-span-14-5标签 .btn-span-14-5 {.transition(.3s);position: relative;display: block;overflow: hidden;} .btn-span-14-5 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-14-5::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(13%,-190%) rotate(30deg);transform: translate(13%,-190%) rotate(30deg);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);} .btn-span-14-5::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(-13%,-190%) rotate(-30deg);transform: translate(-13%,-190%) rotate(-30deg);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);} .btn-span-14-5::before{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;} .btn-span-14-5:hover::before, .btn-span-14-5:hover::after{transform: translate(0,0);-webkit-transform: translate(0,0);} //btn-span-15标签 .btn-span-15 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;} .btn-span-15 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-15::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(0,-105%);transform: translate(0,-105%);border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: rgba(255,255,255,1);background-color: rgba(255,255,255,0.25);} .btn-span-15:hover::before{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0,0);transform: translate(0,0);} //btn-span-15-1标签 .btn-span-15-1{.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;} .btn-span-15-1 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-15-1::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(-105%,0);transform: translate(-105%,0);border-right-width: 1px;border-right-style: solid;border-right-color: rgba(255,255,255,1);background-color: rgba(255,255,255,0.25);} .btn-span-15-1:hover::before{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0,0);transform: translate(0,0);} //btn-span-15-2标签 .btn-span-15-2 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;} .btn-span-15-2 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-15-2::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.5s);opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(-13%,-190%) rotate(-30deg);transform: translate(-13%,-190%) rotate(-30deg);border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: rgba(255,255,255,1);background-color: rgba(255,255,255,0.25);} .btn-span-15-2:hover::before{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0,0);transform: translate(0,0);} //btn-span-15-3标签 .btn-span-15-3 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;} .btn-span-15-3 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-15-3::before, .btn-span-15-3::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.5s);opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(0,-105%);transform: translate(0,-105%);border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: rgba(255,255,255,1);background-color: rgba(255,255,255,0.25);} .btn-span-15-3::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;} .btn-span-15-3:hover::before, .btn-span-15-3:hover::after{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0,0);transform: translate(0,0);} //btn-span-15-4标签 .btn-span-15-4 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;} .btn-span-15-4 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-15-4::before, .btn-span-15-4::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.5s);opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(-105%,0);transform: translate(-105%,0);border-right-width: 1px;border-right-style: solid;border-right-color: rgba(255,255,255,1);background-color: rgba(255,255,255,0.25);} .btn-span-15-4::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;} .btn-span-15-4:hover::before, .btn-span-15-4:hover::after{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0,0);transform: translate(0,0);} //btn-span-15-5标签 .btn-span-15-5 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;} .btn-span-15-5 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;} .btn-span-15-5::before, .btn-span-15-5::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.5s);opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(-13%,-190%) rotate(-30deg);transform: translate(-13%,-190%) rotate(-30deg);border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: rgba(255,255,255,1);background-color: rgba(255,255,255,0.25);} .btn-span-15-5::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;} .btn-span-15-5:hover::before, .btn-span-15-5:hover::after{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0,0);transform: translate(0,0);} //btn-span-16标签 .btn-span-16 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;border: 1px solid rgba(255,255,255,1);} .btn-span-16:hover{border: 1px solid rgba(255,255,255,0);} .btn-span-16::before{content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;z-index: 1;.transition(.5s); -webkit-transform: translate(-100%, -600%) rotate(30deg);transform: translate(-100%, -600%) rotate(30deg);background-color: rgba(255,255,255,0.5);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);} .btn-span-16:hover::before{-webkit-transform: translate(0,0);transform: translate(0,0);} //btn-span-17标签 .btn-span-17 {.transition(.3s);position: relative;display: block;overflow: hidden;} .btn-span-17 span{position: relative;.transition(.3s);z-index:2;letter-spacing:0;} .btn-span-17::before{content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;z-index: 1;opacity: 0;filter: alpha(opacity=0);.transition(.3s);border-top-width: 1px;border-bottom-width: 1px;border-top-style: solid;border-bottom-style: solid;border-top-color: rgba(255,255,255,0.5);border-bottom-color: rgba(255,255,255,0.5);-webkit-transform: scale(0.1, 1);transform: scale(0.1, 1);} .btn-span-17:hover span{letter-spacing: 2px;} .btn-span-17:hover::before{filter: alpha(opacity=100);opacity: 1;-webkit-transform: scale(1, 1);transform: scale(1, 1);} .btn-span-17::after{content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;z-index: 1;.transition(.3s);background-color: rgba(255,255,255,0.25);} .btn-span-17:hover::after{opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0.1, 1);transform: scale(0.1, 1);} //btn-span-18标签 translate Y轴高度取决于a标签的一半高度 .btn-span-18 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;border-right-width: 1px;border-left-width: 1px;border-right-style: solid;border-left-style: solid;border-right-color: rgba(255,255,255,0.5);border-left-color: rgba(255,255,255,0.5);} .btn-span-18 span{.transition(.3s);letter-spacing:0;} .btn-span-18:hover span{letter-spacing: 2px;} .btn-span-18:hover{ border-right-color: rgba(255,255,255,0);border-left-color: rgba(255,255,255,0);} .btn-span-18::before{content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;z-index: 1;.transition(.3s);background-color: rgba(255,255,255,0.5);} .btn-span-18:hover::before{transform: translate(0,-45px) rotate(-45deg);} .btn-span-18::after{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 1px;z-index: 1;.transition(.3s);background-color: rgba(255,255,255,0.5);} .btn-span-18:hover::after{transform: translate(0,45px) rotate(45deg);} //btn-span-19标签 .btn-span-19 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;border-top-width: 1px;border-bottom-width: 1px;border-top-style: solid;border-bottom-style: solid;border-top-color: rgba(255,255,255,0.5);border-bottom-color: rgba(255,255,255,0.5);} .btn-span-19 span{.transition(.3s);letter-spacing:0;} .btn-span-19:hover span{letter-spacing: 2px;} .btn-span-19:hover{border-top-color: rgba(255,255,255,0);border-bottom-color: rgba(255,255,255,0);} .btn-span-19::before{content: '';position: absolute;top: 0;right: 0;width: 1px;height: 100%;z-index: 1;.transition(.3s);background-color: rgba(255,255,255,0.5);} .btn-span-19:hover::before{-webkit-transform: translate(-94.9845px,0) rotate(270deg);-moz-transform: translate(-94.9845px,0) rotate(270deg);transform: translate(-94.9845px,0) rotate(270deg);} .btn-span-19::after{content: '';position: absolute;top: 0;left: 0;width: 1px;height: 100%;z-index: 1;.transition(.3s);background-color: rgba(255,255,255,0.5);} .btn-span-19:hover::after{-webkit-transform: translate(94.9845px,0) rotate(180deg);-moz-transform: translate(94.9845px,0) rotate(180deg);transform: translate(94.9845px,0) rotate(180deg);} //btn-span-20标签 文字顶上去的效果 .btn-span-20{position: relative;overflow: hidden;;display: block; span{display: block;.transition(.4s);} span::before{content:attr(data-hover);position: absolute;top: 100%;.transition(.4s);left: 0;} } .btn-span-20:hover{ span{transform: translateY(-100%);} }