pc端电商添加购物车飞入边栏动画效果代码
代码语言：html
所属分类：电商
代码描述：pc端电商添加购物车飞入边栏动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://raw.githubusercontent.com/greenwoodents/quickbeam.js/master/demo/css/demo.css'>
<style>
@-moz-keyframes quick_cart_pay_show {
0% {
-webkit-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
right: -100px;
}
50% {
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
right: 20px;
}
100% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
right: 0;
}
}
@-webkit-keyframes quick_cart_pay_show {
0% {
-webkit-transform: rotate(70deg);
transform: rotate(70deg);
right: -100px;
}
50% {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
right: 20px;
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
right: 0;
}
}
@keyframes quick_cart_pay_show {
0% {
-webkit-transform: rotate(70deg);
transform: rotate(70deg);
right: -100px;
}
50% {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
right: 20px;
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
right: 0;
}
}
@-webkit-keyframes quick_cart_pay_hide {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(200px);
transform: translateX(200px);
}
}
@keyframes quick_cart_pay_hide {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(200px);
transform: translateX(200px);
}
}
@keyframes fadeDown {
0% {
-webkit-transform: rotate(0deg) translateY(0px);
transform: rotate(0deg) translateY(0px);
opacity: 1;
}
100% {
-webkit-transform: rotate(5deg) translateY(5px);
transform: rotate(5deg) translateY(5px);
opacity: 0;
}
}
@-webkit-keyframes fadeDown {
0% {
-webkit-transform: rotate(0deg) translateY(0px);
transform: rotate(0deg) translateY(0px);
opacity: 1;
}
100% {
-webkit-transform: rotate(5deg) translateY(5px);
transform: rotate(5deg) translateY(5px);
opacity: 0;
}
}
@keyframes fadeUp {
0% {
-webkit-transform: rotate(5deg) translateY(5px);
transform: rotate(5deg) translateY(5px);
opacity: 0;
}
100% {
-webkit-transform: rotate(0deg) translateY(0px);
transform: rotate(0deg) translateY(0px);
opacity: 1;
}
}
@-webkit-keyframes fadeUp {
0% {
-webkit-transform: rotate(5deg) translateY(5px);
transform: rotate(5deg) translateY(5px);
opacity: 0;
}
100% {
-webkit-transform: rotate(0deg) translateY(0px);
transform: rotate(0deg) translateY(0px);
opacity: 1;
}
}
.fadeDown {
opacity: 0;
position: relative;
-webkit-animation: fadeDown 400ms ease-in-out;
animation: fadeDown 400ms ease-in-out;
}
.fadeUp {
opacity: 1 !important;
position: relative;
-webkit-animation: fadeUp 400ms ease-in-out;
animation: fadeUp 400ms ease-in-out;
}
.animateOut {
position: absolute !important;
top: 0;
left: 0;
-webkit-animation: quick_cart_pay_hide 200ms ease-in forwards;
animation: quick_cart_pay_hide 200ms ease-in forwards;
}
.quick-cart-product .hide {
opacity: 0;
}
#quick-cart {
bottom: 20px;
padding-bottom: 60px;
position: fixed;
right: 10px;
top: auto !important;
z-index: 1000;
}
#quick-cart-pay {
font-size: 100%;
line-height: 123.07692%;
font-family: "robotobold", sans-serif;
border-radius: 50%;
-webkit-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
border: 2px solid #086fcf;
bottom: 0;
cursor: pointer;
display: block;
position: absolute;
text-decoration: none;
right: -100px;
}
#quick-cart-pay > span {
border-radius: 50%;
transition: all 0.3s ease-in-out;
background-color: #086fcf;
border: 2px solid #fff;
color: #fff;
display: block;
height: 56px;
padding-top: 15px;
position: relative;
text-align: center;
text-transform: uppercase;
width: 56px;
}
#quick-cart-pay.open {
-webkit-animation: quick_cart_pay_show 1s ease-in-out forwards;
animation: quick_cart_pay_show 1s ease-in-out forwards;
}
#quick-cart-pay.cart-ico strong {
display: none;
}
#quick-cart-pay.cart-ico > span {
background: #086fcf url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE5cHgiIGhlaWdodD0iMThweCIgdmlld0JveD0iMCAwIDE5IDE4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDxnIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02ODYuMDAwMDAwLCAtNDUwLjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NjAuMDAwMDAwLCAxNjUuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMjY5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2LjAwMDAwMCwgMTYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNi43NjU0Nzg0LDQuMjc1IEwxNS44NzU4NzQ5LDguNTkzMzYwNzEgTDQuNjk5ODQwNTksOS43MjQwOTgyMSBMMy40NzM5MDMwNCw0LjI3NSBMMTYuNzY1NDc4NCw0LjI3NSBaIE0xNi44MDQ1NDYzLDkuNzI4MDY3ODYgTDE4LjY3MzcyNTEsMy4wNTM1NzE0MyBMMy4xOTkxNTIwNywzLjA1MzU3MTQzIEwyLjUxMjI3NDYzLDAgTDMuMjYzMDc1NzJlLTA1LDAgTDMuMjYzMDc1NzJlLTA1LDEuMjIxNDI4NTcgTDEuNDUzMDgwMjUsMS4yMjE0Mjg1NyBMNC4wNjM1NDA4MywxMi44MjUgTDE2Ljk2ODAyNjQsMTIuODI1IEwxNi45NjgwMjY0LDExLjYwMzU3MTQgTDUuMTIyNzM1MjEsMTEuNjAzNTcxNCBMNC45NzAwMjMyNiwxMC45MjUzNzMyIEwxNi44MDQ1NDYzLDkuNzI4MDY3ODYgWiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNy44MzEzODE3MywxNS4yNjc4NTcxIEM3LjgzMTM4MTczLDE2LjI3OTgxMDcgNi45NTQ5MTk1OSwxNy4xIDUuODczNTM2MywxNy4xIEM0Ljc5MjE1MzAxLDE3LjEgMy45MTU2OTA4NywxNi4yNzk4MTA3IDMuOTE1NjkwODcsMTUuMjY3ODU3MSBDMy45MTU2OTA4NywxNC4yNTU5MDM2IDQuNzkyMTUzMDEsMTMuNDM1NzE0MyA1Ljg3MzUzNjMsMTMuNDM1NzE0MyBDNi45NTQ5MTk1OSwxMy40MzU3MTQzIDcuODMxMzgxNzMsMTQuMjU1OTAzNiA3LjgzMTM4MTczLDE1LjI2Nzg1NzEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE1LjY2Mjc2MzUsMTUuMjY3ODU3MSBDMTUuNjYyNzYzNSwxNi4yNzk4MTA3IDE0Ljc4NjMwMTMsMTcuMSAxMy43MDQ5MTgsMTcuMSBDMTIuNjIzNTM0NywxNy4xIDExLjc0NzA3MjYsMTYuMjc5ODEwNyAxMS43NDcwNzI2LDE1LjI2Nzg1NzEgQzExLjc0NzA3MjYsMTQuMjU1OTAzNiAxMi42MjM1MzQ3LDEzLjQzNTcxNDMgMTMuNzA0OTE4LDEzLjQzNTcxNDMgQzE0Ljc4NjMwMTMsMTMuNDM1NzE0MyAxNS42NjI3NjM1LDE0LjI1NTkwMzYgMTUuNjYyNzYzNSwxNS4yNjc4NTcxIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=") no-repeat center 9px;
}
#quick-cart-pay:hover {
border-color: #303030;
}
#quick-cart-pay:hover > span {
background-color: #303030;
}
#quick-cart-pay #quick-cart-price {
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
font-family: "robotobold", sans-serif;
border-radius: 11px;
background-color: #16161a;
bottom: -4px;
display: block;
height: 21px;
left: 50%;
padding: 2px 8px 0;
position: absolute;
}
#quick-cart-pay #quick-cart-pay-total-count {
display: none;
}
.quick-cart-product {
margin-bottom: 6px;
}
.quick-cart-product > div,
#quick-cart-pay {
box-shadow: rgba(0, 0, 0, 0.23) 0 6px 13px 0;
}
.quick-cart-animated-product > div {
box-shadow: transparent 0 6px 13px 0;
}
.quick-cart-product {
position: relative;
}
.quick-cart-product > div {
transition: all 1s ease-in-out 0s;
overflow: hidden;
position: relative;
}
.quick-cart-product > div .s1,
.quick-cart-product > div .s2 {
font-family: "robotobold", sans-serif;
font-size: 100%;
line-height: 107.69231%;
background-color: rgba(22, 22, 26, 0.5);
bottom: 0;
color: #fff;
cursor: default;
display: none;
height: 100%;
left: 0;
padding-top: 23px;
position: absolute;
text-align: center;
top: 0;
width: 100%;
}
.quick-cart-product > div del {
display: none;
}
#quick-cart .quick-cart-product > div,
.quick-cart-product.run > div {
border-radius: 50%;
height: 60px !important;
width: 60px !important;
}
#quick-cart .quick-cart-product > div .s1,
.quick-cart-product.run > div .s1 {
display: block;
}
#quick-cart .quick-cart-product > div img,
.quick-cart-product.run > div img {
width: 100%;
}
#quick-cart .quick-cart-product > div:hover span.s1,
.quick-cart-product.run > div:hover span.s1 {
display: none;
}
#quick-cart .quick-cart-product > div:hover span.s2,
.quick-cart-product.run > div:hover span.s2 {
display: block;
}
.quick-cart-product.run > div {
border-radius: 50%;
height: 58px !important;
width: 58px !important;
}
#quick-cart .quick-cart-product > div .s1,
#quick-cart .quick-cart-product > div .s2 {
border-radius: 50%;
}
.quick-cart-product.animated {
left: 0;
position: absolute;
top: 0;
z-index: 2000;
}
.quick-cart-product.animated img {
border-radius: 1px;
display: block;
position: relative;
}
.quick-cart-product .remove,
.quick-cart-product .removeall:before,
.quick-cart-product .count {
border-radius: 10px;
font-family: "robotobold", sans-serif;
font-size: 76.92308%;
line-height: 110%;
background-color: #16161a;
color: #fff;
display: block;
height: 20px;
overflow: hidden;
padding-top: 4px;
position: absolute;
right: 0;
top: 0;
text-align: center;
width: 20px;
z-index: 10;
}
.quick-cart-product .removeall {
width: 20px;
height: 20px;
content: "Delete all";
}
.quick-cart-product .removeall:before {
content: "Delete all";
}
.quick-cart-product .removeall:before {
transition: all 0.3s ease-in-out;
cursor: pointer;
display: none;
left: -62px;
padding: 4px 7px 0;
right: auto;
width: auto;
height: 16px;
}
.quick-cart-product .removeall:hover {
background-color: #086fcf;
}
.quick-cart-product.show-remove-all:hover .removeall:before {
display: block;
}
.quick-cart-product .remove {
background: #16161a url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjhweCIgaGVpZ2h0PSI4cHgiIHZpZXdCb3g9IjAgMCA4IDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPGcgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEyMTYuMDAwMDAwLCAtMTg5MS4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTE0OC4wMDAwMDAsIDE4ODUuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2Mi4wMDAwMDAsIDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTQyNjgzOTcsNiBMNiw3LjE0MjY4Mzk3IEw4Ljg1NzExNCw5Ljk5OTc5Nzk3IEw2LDEyLjg1NzMxNiBMNy4xNDI2ODM5NywxNCBMOS45OTk3OTc5NywxMS4xNDI4ODYgTDEyLjg1NzMxNiwxNCBMMTQsMTIuODU3MzE2IEwxMS4xNDI0ODE5LDkuOTk5Nzk3OTcgTDE0LDcuMTQyNjgzOTcgTDEyLjg1NzMxNiw2IEw5Ljk5OTc5Nzk3LDguODU3MTE0IEw3LjE0MjY4Mzk3LDYgTDcuMTQyNjgzOTcsNiBaIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") no-repeat center center;
cursor: pointer;
display: none;
left: 0;
right: auto;
}
.quick-cart-product .remove:hover {
background-color: #086fcf;
}
.quick-cart-product:hover .remove {
display: block;
}
.quick-cart-product.remove-product {
-webkit-animation: quick_cart_pay_hide 200ms ease-in-out forwards;
animation: quick_cart_pay_hide 200ms ease-in-out forwards;
}
.cubic-btn {
width: 10px;
height: 10px;
position: absolute;
}
.quick-cart-product-wrap {
position: relative;
}
.img.animate {
transition: all 0ms ease-out 0s;
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
opacity: 0;
}
.img {
transition: all 600ms ease-out 0s;
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
border-radius: 1px;
background: transparent no-repeat center center;
background-size: cover;
border: 1px solid #e2e2e3;
display: block;
height: 0;
opacity: 1;
}
header ._cont,
.collection .settings,
.collection-list a .variants,
.product-detail .price-shipping,
.product-detail .btn-and-quantity-wrap,
.product-detail .btn-and-quantity,
.spinner,
.tabs .tab-labels,
.detail-socials,
.detail-socials .social-sharing,
.homepage .main-services ol,
.homepage .main-text .links,
.socials ul,
.cart .cart-products .product,
.cart .cart-products .p-count-price,
.cart .inputs,
footer .top,
footer .bottom,
footer .bottom .left nav ul,
.swatches,
.swatch {
display: block;
}
header ._cont:after,
.collection .settings:after,
.collection-list a .variants:after,
.product-detail .price-shipping:after,
.product-detail .btn-and-quantity-wrap:after,
.product-detail .btn-and-quantity:after,
.spinner:after,
.tabs .tab-labels:after,
.detail-socials:after,
.detail-socials .social-sharing:after,
.homepage .main-services ol:after,
.homepage .main-text .links:after,
.socials ul:after,
.cart .cart-products .product:after,
.cart .cart-products .p-count-price:after,
.cart .inputs:after,
footer .top:after,
footer .bottom:after,
footer .bottom .left nav ul:after,
.swatches:after,
.swatch:after {
clear: both;
content: "";
display: block;
visibility: hidden;
height: 0;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol,
ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,
th,
td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q,
blockquote {
quotes: none;
}
q:before,
q:after,
blockquote:before,
blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 0 none;
}
body {
background-color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
}
img.float-left {
float: left;
margin: 0 20px 10px 0;
}
img.float-right {
float: right;
margin: 0 0 10px 20px;
}
a {
color: inherit;
text-decoration: inherit;
cursor: inherit;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
a:active,
a:focus {
outline: none;
}
em {
font-style: oblique;
}
u {
text-decoration: underline;
}
del {
text-decoration: line-through;
}
sup,
sub {
font-size: smaller;
line-height: normal;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
button {
cursor: pointer;
}
input,
textarea {
outline: 0 none;
}
textarea {
resize: none;
}
div.grid_info {
background-color: #fff;
bottom: 0;
color: #16161a;
display: block;
left: 0;
padding: 15px;
position: fixed;
top: auto !important;
z-index: 99999;
}
body {
font-family: "montserratlight", sans-serif;
background-color: #fff;
color: #16161a;
font-size: 81.25%;
line-height: 184.61538%;
overflow-x: hidden;
position: relative;
}
._cont {
margin: 0 auto;
width: 1110px;
}
._cont2 {
margin: 0 auto;
width: 700px;
}
header nav > ul > li > a:before,
header nav > ul > li > a:after,
.sorter .sorter-value:before,
.sorter .sorter-value:after {
background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEwcHgiIGhlaWdodD0iNHB4IiB2aWV3Qm94PSIwIDAgMTAgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQ3LjAwMDAwMCwgLTU2NS4wMDAwMDApIiBzdHJva2U9IiMxNjE2MWEiPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAuMDAwMDAwLCAzNDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5LjAwMDAwMCwgMjE4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMzksNyBMNDMsMTEgTDQ3LDciIGlkPSJQYXRoLTY3LUNvcHkiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") no-repeat center center;
}
header nav > ul > li > a:before,
.sorter .sorter-value:before {
background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEwcHgiIGhlaWdodD0iNHB4IiB2aWV3Qm94PSIwIDAgMTAgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQ3LjAwMDAwMCwgLTU2NS4wMDAwMDApIiBzdHJva2U9IiMwODZmY2YiPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAuMDAwMDAwLCAzNDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5LjAwMDAwMCwgMjE4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMzksNyBMNDMsMTEgTDQ3LDciIGlkPSJQYXRoLTY3LUNvcHkiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") no-repeat center center;
}
header nav > ul > li ul a:after {
background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IlZyc3R2YV8xIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyINCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI3cHgiIGhlaWdodD0iOHB4Ig0KCSB2aWV3Qm94PSIzIC0yIDcgOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAzIC0yIDcgOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQ3LjAwMDAwMCwgLTU2NS4wMDAwMDApIj4NCgkJPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAwLjAwMDAwMCwgMzQwLjAwMDAwMCkiPg0KCQkJPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOS4wMDAwMDAsIDIxOC4wMDAwMDApIj4NCgkJCQk8Zz4NCgkJCQkJPHBhdGggaWQ9IlBhdGgtNjctQ29weSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBkPSJNNDEsMTNsNC00bC00LTQiLz4NCgkJCQk8L2c+DQoJCQk8L2c+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==") no-repeat center center;
}
header {
font-size: 100%;
line-height: 130.76923%;
position: relative;
z-index: 1000;
}
header .header {
-moz-box-shadow: rgba(17, 17, 18, 0.04) 0 2px 4px, rgba(19, 20, 20, 0.06) 0 1px 1px;
-webkit-box-shadow: rgba(17, 17, 18, 0.04) 0 2px 4px, rgba(19, 20, 20, 0.06) 0 1px 1px;
box-shadow: rgba(17, 17, 18, 0.04) 0 2px 4px, rgba(19, 20, 20, 0.06) 0 1px 1px;
height: 74px;
}
header .logo {
font-family: "montserratbold", sans-serif;
font-size: 107.69231%;
line-height: 128.57143%;
display: block;
float: left;
margin-top: 30px;
letter-spacing: 4px;
position: relative;
text-transform: uppercase;
z-index: 100;
}
header nav {
font-family: "montserratregular", sans-serif;
left: 0;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 31px;
width: 100%;
z-index: 1;
}
header nav > ul > li {
display: inline-block;
margin-right: 19px;
}
header nav > ul > li:last-child {
margin-right: 0;
}
header nav > ul > li:last-child.categories-open ul:after {
left: 55%;
}
header nav > ul > li > a {
padding: 0 14px 20px 0;
position: relative;
}
header nav > ul > li > a:before,
header nav > ul > li > a:after {
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
content: "";
height: 10px;
margin-top: -15px;
opacity: 1;
position: absolute;
right: 0;
top: 50%;
width: 10px;
}
header nav > ul > li > a:before {
opacity: 0;
}
header nav > ul > li > a:hover {
color: #086fcf;
}
header nav > ul > li > a:hover:before {
opacity: 1;
}
header nav > ul > li > a:hover:after {
opacity: 0;
}
header nav > ul > li ul {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 50px;
-webkit-column-gap: 50px;
column-gap: 50px;
font-family: "montserratlight", sans-serif;
font-size: 107.69231%;
line-height: 121.42857%;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: rgba(13, 13, 26, 0.93);
display: none;
left: 50%;
margin-left: -331px;
padding: 13px 26px 20px;
position: absolute;
text-align: left;
text-transform: none;
top: 28px;
width: 662px;
z-index: 1000;
}
header nav > ul > li ul:after {
background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iN3B4IiB2aWV3Qm94PSIwIDAgMTIgNyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTE3NS4wMDAwMDAsIC0xMzAzLjAwMDAwMCkiIGZpbGw9IiMwQzBDMTkiIG9wYWNpdHk9IjAuOTM5OTk5OTk4Ij4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuMDAwMDAwLCAxMjQ2LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTExNzgsNjMuNDg1MjgxNCBMMTE4My42NTY4NSw1Ny44Mjg0MjcxIEwxMTg5LjMxMzcxLDYzLjQ4NTI4MTQgTDExNzgsNjMuNDg1MjgxNCBaIiBpZD0iU2lwa2EtbWVudSI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=") no-repeat left top;
content: "";
display: none;
height: 7px;
left: 44%;
left: 43.5%;
position: absolute;
top: -6px;
width: 14px;
}
header nav > ul > li ul li {
border-bottom: 1px solid #2e2e38;
}
header nav > ul > li ul a {
color: #fff;
display: block;
opacity: 1;
padding: 10px 20px 11px 0;
position: relative;
}
header nav > ul > li ul a:after {
content: "";
display: block;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 7px;
}
header nav > ul > li ul a:hover {
opacity: 0.65;
}
header nav > ul > li.categories-open > a:after,
header nav > ul > li.categories-open > a:before {
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
header nav > ul > li.categories-open > a:hover:after,
header nav > ul > li.categories-open > a:hover:before {
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
header nav > ul > li.categories-open ul {
display: block;
}
header nav > ul > li.categories-open ul:after {
display: block;
}
header form {
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-moz-border-radius: 19px;
-webkit-border-radius: 19px;
border-radius: 19px;
border: 1px solid #fff;
float: right;
margin-top: 19px;
overflow: hidden;
position: relative;
z-index: 100;
}
header form .find-input {
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
font-family: "montserratlight", sans-serif;
font-size: 100%;
line-height: 130.76923%;
color: #16161a;
border: 0 none;
margin-right: 0;
overflow: hidden;
padding: 10px 0;
width: 0;
}
header form button {
background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0cHgiIGhlaWdodD0iMTE0cHgiIHZpZXdCb3g9IjAgMCAxNCAxMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPGcgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQ5NC4wMDAwMDAsIC0xMjk3LjAwMDAwMCkiIGZpbGw9IiMxNjE2MTkiPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMy4wMDAwMDAsIDEyNDYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNTA1Ljc1MDA0NCw1MSBDNTAyLjg1MDczMSw1MSA1MDAuNSw1My4zNTA2NDM3IDUwMC41LDU2LjI0OTk1NjMgQzUwMC41LDU3LjQ2Mjk2ODggNTAwLjkxNTMxOSw1OC41NzY3NTYzIDUwMS42MDY2MTIsNTkuNDY1NDA2MyBMNDk3LjE5MjMyNSw2My44Nzk3Mzc1IEM0OTcuMDY0MTM4LDY0LjAwNzkyNSA0OTcsNjQuMTc1MzU2MiA0OTcsNjQuMzQzNzA2MyBDNDk3LDY0LjUxMTY2MjUgNDk3LjA2NDEzOCw2NC42Nzk1MzEzIDQ5Ny4xOTIzMjUsNjQuODA3NzE4OCBDNDk3LjMyMDQ2OSw2NC45MzU5MDYyIDQ5Ny40ODgzODEsNjUgNDk3LjY1NjI5NCw2NSBDNDk3LjgyNDE2Miw2NSA0OTcuOTkyMDc1LDY0LjkzNTkwNjIgNDk4LjEyMDI2Myw2NC44MDc3MTg4IEw1MDIuNTM0NTUsNjAuMzkzNDMxMiBDNTAzLjQyMzI0NCw2MS4wODQ3MjUgNTA0LjUzNzAzMSw2MS40OTk5NTYzIDUwNS43NTAwNDQsNjEuNDk5OTU2MyBDNTA4LjY0OTMxMiw2MS40OTk5NTYzIDUxMS4wMDAwNDQsNTkuMTQ5MjY4NyA1MTEuMDAwMDQ0LDU2LjI0OTk1NjMgQzUxMS4wMDAwNDQsNTMuMzUwNjQzNyA1MDguNjQ5MzEyLDUxIDUwNS43NTAwNDQsNTEgTDUwNS43NTAwNDQsNTEgWiBNNTA1Ljc1MDA0NCw2MC4xODc1IEM1MDMuNTc4NzMxLDYwLjE4NzUgNTAxLjgxMjU0NCw1OC40MjEyMjUgNTAxLjgxMjU0NCw1Ni4yNDk5NTYzIEM1MDEuODEyNTQ0LDU0LjA3ODY4NzUgNTAzLjU3ODczMSw1Mi4zMTI0NTYzIDUwNS43NTAwNDQsNTIuMzEyNDU2MyBDNTA3LjkyMTI2OSw1Mi4zMTI0NTYzIDUwOS42ODc1LDU0LjA3ODY4NzUgNTA5LjY4NzUsNTYuMjQ5OTU2MyBDNTA5LjY4NzUsNTguNDIxMjI1IDUwNy45MjEyNjksNjAuMTg3NSA1MDUuNzUwMDQ0LDYwLjE4NzUgTDUwNS43NTAwNDQsNjAuMTg3NSBaIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDEwMCkiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00OTQuMDAwMDAwLCAtMTI5Ny4wMDAwMDApIiBmaWxsPSIjMDg2ZmNmIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuMDAwMDAwLCAxMjQ2LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTUwNS43NTAwNDQsNTEgQzUwMi44NTA3MzEsNTEgNTAwLjUsNTMuMzUwNjQzNyA1MDAuNSw1Ni4yNDk5NTYzIEM1MDAuNSw1Ny40NjI5Njg4IDUwMC45MTUzMTksNTguNTc2NzU2MyA1MDEuNjA2NjEyLDU5LjQ2NTQwNjMgTDQ5Ny4xOTIzMjUsNjMuODc5NzM3NSBDNDk3LjA2NDEzOCw2NC4wMDc5MjUgNDk3LDY0LjE3NTM1NjIgNDk3LDY0LjM0MzcwNjMgQzQ5Nyw2NC41MTE2NjI1IDQ5Ny4wNjQxMzgsNjQuNjc5NTMxMyA0OTcuMTkyMzI1LDY0LjgwNzcxODggQzQ5Ny4zMjA0NjksNjQuOTM1OTA2MiA0OTcuNDg4MzgxLDY1IDQ5Ny42NTYyOTQsNjUgQzQ5Ny44MjQxNjIsNjUgNDk3Ljk5MjA3NSw2NC45MzU5MDYyIDQ5OC4xMjAyNjMsNjQuODA3NzE4OCBMNTAyLjUzNDU1LDYwLjM5MzQzMTIgQzUwMy40MjMyNDQsNjEuMDg0NzI1IDUwNC41MzcwMzEsNjEuNDk5OTU2MyA1MDUuNzUwMDQ0LDYxLjQ5OTk1NjMgQzUwOC42NDkzMTIsNjEuNDk5OTU2MyA1MTEuMDAwMDQ0LDU5LjE0OTI2ODcgNTExLjAwMDA0NCw1Ni4yNDk5NTYzIEM1MTEuMDAwMDQ0LDUzLjM1MDY0MzcgNTA4LjY0OTMxMiw1MSA1MDUuNzUwMDQ0LDUxIEw1MDUuNzUwMDQ0LDUxIFogTTUwNS43NTAwNDQsNjAuMTg3NSBDNTAzLjU3ODczMSw2MC4xODc1IDUwMS44MTI1NDQsNTguNDIxMjI1IDUwMS44MTI1NDQsNTYuMjQ5OTU2MyBDNTAxLjgxMjU0NCw1NC4wNzg2ODc1IDUwMy41Nzg3MzEsNTIuMzEyNDU2MyA1MDUuNzUwMDQ0LDUyLjMxMjQ1NjMgQzUwNy45MjEyNjksNTIuMzEyNDU2MyA1MDkuNjg3NSw1NC4wNzg2ODc1IDUwOS42ODc1LDU2LjI0OTk1NjMgQzUwOS42ODc1LDU4LjQyMTIyNSA1MDcuOTIxMjY5LDYwLjE4NzUgNTA1Ljc1MDA0NCw2MC4xODc1IEw1MDUuNzUwMDQ0LDYwLjE4NzUgWiI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=") no-repeat left top;
border: 0 none;
height: 14px;
margin-right: 15px;
position: relative;
overflow: hidden;
top: 1px;
text-indent: -1000px;
width: 14px;
}
header form button:hover {
background-position: left bottom;
}
header form.open {
border-color: #d2d4d6;
}
header form.open input {
padding: 10px 15px;
width: 157px;
}
header #customer_login_link {
display: inline-block;
float: right;
margin: 30px 26px 0 0;
position: relative;
z-index: 100;
}
header #customer_login_link:hover {
color: #086fcf;
}
header #nav-icon {
display: none;
}
.breadcrumb {
margin-top: 15px;
}
.breadcrumb li {
display: inline-block;
}
.breadcrumb a {
color: #b5b6bd;
display: inline-block;
margin-right: 5px;
padding-right: 14px;
position: relative;
}
.breadcrumb a:hover {
color: #086fcf;
}
.breadcrumb a:after {
color: #b5b6bd;
content: ">";
position: absolute;
right: 0;
}
.text {
margin: 0 auto;
padding: 90px 0 165px;
width: 700px;
}
.text h1 {
font-family: "montserratbold", sans-serif;
font-size: 369.23077%;
line-height: 125%;
margin-bottom: 60px;
}
.text h2 {
font-family: "montserratregular", sans-serif;
font-size: 184.61538%;
line-height: 133.33333%;
margin: 55px 0 17px;
}
.text p {
font-size: 138.46154%;
line-height: 177.77778%;
margin: 17px 0 28px;
}
.text strong {
font-family: "montserratbold", sans-serif;
}
.text em {
font-style: italic;
}
.text *:last-child {
margin-bottom: 0;
}
.text ul {
font-size: 115.38462%;
line-height: 173.33333%;
margin: 17px 0 28px 40px;
}
.text ul li {
list-style-type: disc;
padding: 7px 0 7px 7px;
}
.text ol {
font-size: 115.38462%;
line-height: 173.33333%;
margin: 17px 0 28px 40px;
}
.text ol li {
list-style-type: decimal;
padding: 7px 0 7px 7px;
}
.collection {
padding-top: 15px;
}
.collection.search {
padding-top: 0;
}
.collection h1 {
font-family: "montserratbold", sans-serif;
font-size: 369.23077%;
line-height: 116.66667%;
color: #086fcf;
padding-bottom: 13px;
text-align: center;
}
.collection .description {
font-size: 107.69231%;
line-height: 171.42857%;
margin: 0 auto;
max-width: 700px;
padding-bottom: 13px;
text-align: center;
}
.collection .head {
-moz-box-shadow: rgba(17, 17, 18, 0.04) 0 2px 4px, rgba(19, 20, 20, 0.06) 0 1px 1px;
-webkit-box-shadow: rgba(17, 17, 18, 0.04) 0 2px 4px, rgba(19, 20, 20, 0.06) 0 1px 1px;
box-shadow: rgba(17, 17, 18, 0.04) 0 2px 4px, rgba(19, 20, 20, 0.06) 0 1px 1px;
padding-bottom: 30px;
position: relative;
z-index: 100;
}
.collection .products {
background-color: #f7f7fa;
padding: 28px 0 110px;
}
.collection .settings {
font-size: 107.69231%;
line-height: 121.42857%;
color: #b5b6bd;
position: relative;
}
.collection .settings .sort {
float: right;
}
.collection .settings .sort .sorter {
margin-left: 5px;
}
.collection .settings .count {
float: left;
}
.collection .no-products {
font-size: 115.38462%;
line-height: 120%;
font-family: "montserratregular", sans-serif;
padding-top: 70px;
text-align: center;
}
.more-products {
padding-top: 40px;
text-align: center;
}
.more-products span {
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
font-size: 107.69231%;
line-height: 121.42857%;
font-family: "montserratbold", sans-serif;
-moz-border-radius: 26px;
-webkit-border-radius: 26px;
border-radius: 26px;
-moz-box-shadow: rgba(17, 17, 18, 0.1) 0 2px 4px, rgba(19, 20, 20, 0.07) 0 1px 1px;
-webkit-box-shadow: rgba(17, 17, 18, 0.1) 0 2px 4px, rgba(19, 20, 20, 0.07) 0 1px 1px;
box-shadow: rgba(17, 17, 18, 0.1) 0 2px 4px, rgba(19, 20, 20, 0.07) 0 1px 1px;
background-color: #086fcf;
color: #fff;
cursor: pointer;
display: inline-block;
padding: 16px 26px;
}
.more-products span:hover {
background-color: #0084ff;
}
.more-products.hidden {
display: none;
}
.sorter {
display: inline-block;
position: relative;
}
.sorter:after {
-moz-transition: opacity 0.3s ease-in-out 0s;
-o-transition: opacity 0.3s ease-in-out 0s;
-webkit-transition: opacity 0.3s ease-in-out;
-webkit-transition-delay: 0s;
transition: opacity 0.3s ease-in-out 0s;
background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iN3B4IiB2aWV3Qm94PSIwIDAgMTIgNyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTE3NS4wMDAwMDAsIC0xMzAzLjAwMDAwMCkiIGZpbGw9IiMwQzBDMTkiIG9wYWNpdHk9IjAuOTM5OTk5OTk4Ij4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuMDAwMDAwLCAxMjQ2LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTExNzgsNjMuNDg1MjgxNCBMMTE4My42NTY4NSw1Ny44Mjg0MjcxIEwxMTg5LjMxMzcxLDYzLjQ4NTI4MTQgTDExNzgsNjMuNDg1MjgxNCBaIiBpZD0iU2lwa2EtbWVudSI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=") no-repeat left top;
content: "";
display: block;
height: 7px;
opacity: 0;
position: absolute;
right: 38px;
top: 20px;
width: 12px;
}
.sorter .sorter-value {
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-position: right 8px;
color: #16161a;
cursor: pointer;
display: inline-block;
padding-right: 14px;
position: relative;
}
.sorter .sorter-value:before,
.sorter .sorter-value:after {
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0