.sort_box{ display:flex; flex-wrap:wrap; justify-content:center; } .sort_name{ padding:0 20px; min-width:130px; font-size:16px; line-height:55px; color:#333!important; text-align:center; overflow:hidden; text-overflow:ellipsis; display:block; white-space:nowrap; text-decoration: none!important; outline:none!important; background:var(--background) no-repeat; background-size:0 100%; transition:all 0.6s ease; } .sort_list:last-child{ margin-right:0; } .sort_name:hover{ background-size:100% 100%; color:#fff!important; } .sort_name.sort_click{ background-size:100% 100%; color:#fff!important; } @media(max-width:768px){ .sort_box{ width:100%; background-color:rgba(243, 242, 242, 1); } .sort_name{ font-size:14px; line-height:44px; padding:0 10px; min-width:114px; } } /*鎸夐挳*/ /*鏇村鎸夐挳*/ @media only screen and (min-width: 769px) { .fa_More{ text-align:center; } /* 鐢ㄦ硶
鏌ョ湅鏇村
*/ .fa_More1 a { display: inline-block; min-width: 180px; line-height: 60px; position: relative; text-align: center; } .fa_More1 a span { display: inline-block; position: relative; z-index: 10; color: #fff; } .fa_More1 a::before, .fa_More a::after { content: ""; position: absolute; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1); display: block; } .fa_More1 a::before { background: var(--color); width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .fa_More1 a::after { border: var(--color) solid 2px; width: 0%; height: 0%; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; } .fa_More1 a:hover::before { width: 80%; height: 80%; } .fa_More1 a:hover::after { width: 100%; height: 100%; opacity: 1; } /* 鐢ㄦ硶
鏌ョ湅鏇村
*/ .fa_More2 { text-align: center; } .fa_More2 a { display: inline-block; min-width: 200px; height: 50px; text-align: center; transition: all 0.5s; position: relative; overflow: hidden; line-height: 50px; } .fa_More2 a span { position: relative; z-index: 10; transition: all 0.5s; display: block; color: #fff; } .fa_More2 a span:before { content: "GO鈬?; position: absolute; transform: translate(-50%, 50%); left: 50%; top: 50%; display: block; width: 100%; color: #fff; font-size: 18px; } .fa_More2 a:hover span { transform: translateY(-100%); } .fa_More2 a:before { background: var(--color); display: block; width: 100%; height: 100%; position: absolute; content: ""; transition: all 0.5s; left: 50%; transform: translateX(-50%); } .fa_More2 a:hover:before { width: 60%; background: #000; } .fa_More2 a:hover { color: #fff; } .fa_More2 a:after { position: absolute; width: 100%; transform: translate(100%, -50%); display: block; left: 0; background: var(--color); opacity: 0.5; transition: all 0.5s; height: 3px; content: ""; top: 50%; } .fa_More2 a:hover:after { transform: translate(-100%, -50%); background: #fff; } /* 鐢ㄦ硶
鏌ョ湅鏇村
*/ .fa_More3 { padding: 20px; } .fa_More3 a { display: inline-block; position: relative; margin: 10px auto; } .fa_More3 a span { display: block; position: relative; z-index: 10; color: #fff; min-width: 200px; line-height: 60px; text-align: center; } .fa_More3 a::before { position: absolute; background: var(--color); content: ""; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; transition: all 0.5s; } .fa_More3 a:hover::before { width: 85%; height: 70%; } .fa_More3 a span::before, .fa_More3 a span::after { position: absolute; content: ""; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.5s; } .fa_More3 a span::before { width: calc(100% - 6px); height: 0; border-left: var(--color) solid 1px; border-right: var(--color) solid 1px; } .fa_More3 a:hover span::before { height: calc(100% + 6px); } .fa_More3 a span::after { height: calc(100% - 6px); width: 0; border-top: var(--color) solid 1px; border-bottom: var(--color) solid 1px; } .fa_More3 a:hover span::after { width: calc(100% + 6px); } .fa_More3 a i { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.5s 0.5s; } .fa_More3 a i:first-child { width: 0; height: calc(100% + 4px); border-top: var(--color) solid 1px; border-bottom: var(--color) solid 1px; } .fa_More3 a i:last-child { height: 0; width: calc(100% + 4px); border-left: var(--color) solid 1px; border-right: var(--color) solid 1px; } .fa_More3 a:hover i:first-child { width: calc(100% - 4px); } .fa_More3 a:hover i:last-child { height: calc(100% - 4px); } /* 鐢ㄦ硶
鏌ョ湅鏇村
*/ .fa_More4 a { display: inline-block; position: relative; min-width: 180px; text-align: center; line-height: 50px; padding: 0 10px; } .fa_More4 a span { display: inline-block; color: var(--color); position: relative; z-index: 10; } .fa_More4 a::before, .fa_More4 a::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; right: 0; bottom: 0; content: ""; border: var(--color) solid 1px; transition: all 0.5s; } .fa_More4 a:hover::before { transform: translate(-3px, -3px); } .fa_More4 a:hover::after { transform: translate(3px, 3px); } /*鐢ㄦ硶
杩涗竴姝ヤ簡瑙Ⅻi class="iconfont">
*/ .fa_More5 a { display: inline-block; background: var(--color); transition: all 0.5s; min-width: 200px; line-height: 50px; text-align: center; color: #fff; position: relative; overflow: hidden; font-size:16px; } .fa_More5 a:before { position: absolute; width: 200px; height: 200px; border-radius: 50%; top: 100%; transition: all 0.5s; background: rgba(255, 255, 255, 0.2); content: ""; display: block; left: 0; } .fa_More5 a:hover:before { top: -10px; } .fa_More5 a:after { position: absolute; width: 200px; height: 200px; border-radius: 50%; bottom: 100%; transition: all 0.5s; background: rgba(255, 255, 255, 0.2); content: ""; display: block; left: 0; } .fa_More5 a:hover:after { bottom: -10px; } .fa_More5 a i { color: #fff; font-size: 20px; margin-left: 10px; transition: all 0.5s; display: inline-block; vertical-align: middle; } .fa_More5 a:hover i { margin-left: 20px; } .fa_More5 a:hover { background: var(--color); } /*
鏌ョ湅璇︽儏
*/ .fa_More6 a { text-align: center; display: inline-block; position: relative; text-decoration: none; color: #fff; text-transform: capitalize; font-size: 16px; padding: 15px 10px; border-radius: 10px; overflow: hidden; background: var(--color); transition: all 0.5s; min-width: 200px; } .fa_More6 a:before { content: "\f054"; font-family: FontAwesome; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 0; left: 0px; height: 100%; width: 30px; background-color: rgba(255, 255, 255, 0.3); border-radius: 0 50% 50% 0; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: left center; transform-origin: left center; -webkit-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; } .fa_More6 a:hover { text-indent: 30px; } .fa_More6 a:hover:before { -webkit-transform: scale(1, 1); transform: scale(1, 1); text-indent: 0; } } @media only screen and (max-width: 768px) { .fa_More a { display: inline-block; padding: 10px 30px; background: var(--color); color: #fff; text-align: center; } } /*------------------------------------------------------------------------------------------------------------*/