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: "montserratre.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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