CSS

语言：

CSSSCSS

确定

/*------------------*

* Global variables *

*------------------*/

/*------------*

* CSS Styles *

*------------*/

*,

*:before,

*:after {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

background: -webkit-linear-gradient(315deg, #404040, #333);

background: linear-gradient(135deg, #404040, #333);

background-color: #333;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

min-height: 100vh;

padding: 24px;

}

body::-webkit-scrollbar {

display: none;

}

a {

color: inherit;

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

.card {

color: #d4cd96;

font-family: 'Fira Sans', sans-serif;

height: 100%;

left: 0;

position: absolute;

top: 0;

-webkit-transform-origin: 100% 50%;

transform-origin: 100% 50%;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

width: 100%;

-webkit-tap-highlight-color: transparent;

-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.49, 0.23, 0.58, 0.49);

transition: -webkit-transform 0.6s cubic-bezier(0.49, 0.23, 0.58, 0.49);

transition: transform 0.6s cubic-bezier(0.49, 0.23, 0.58, 0.49);

transition: transform 0.6s cubic-bezier(0.49, 0.23, 0.58, 0.49), -webkit-transform 0.6s cubic-bezier(0.49, 0.23, 0.58, 0.49);

}

.card.flipped {

-webkit-transform: translateX(-100%) rotateY(-180deg);

transform: translateX(-100%) rotateY(-180deg);

}

.card-front,

.card-back {

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

background: -webkit-repeating-linear-gradient(315deg, rgba(0, 0, 0, 0.3), transparent 1px, rgba(0, 0, 0, 0.3) 2px);

background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.3), transparent 1px, rgba(0, 0, 0, 0.3) 2px);

background-size: 3px 3px;

background-color: #302f34;

border-radius: 1px;

box-shadow: 0px -6px 8px 0px rgba(0, 0, 0, 0.1), 0px 6px 8px 0px rgba(0, 0, 0, 0.1), 6px 0px 8px 0px rgba(0, 0, 0, 0.1), -6px 0px 8px 0px rgba(0, 0, 0, 0.1);

cursor: pointer;

height: 100%;

left: 0;

padding: 5%;

position: absolute;

top: 0;

width: 100%;

}

.card-back {

-webkit-transform: rotateY(180deg);

transform: rotateY(180deg);

}

.card-back .layer {

background: -webkit-repeating-linear-gradient(315deg, rgba(76, 71, 31, 0.3), transparent 1px, rgba(76, 71, 31, 0.3) 2px);

background: repeating-linear-gradient(135deg, rgba(76, 71, 31, 0.3), transparent 1px, rgba(76, 71, 31, 0.3) 2px);

background-size: 3px 3px;

background-color: #d4cd96;

color: #302f34;

height: 100%;

position: relative;

width: 100%;

}

.card-back .layer:after {

background: -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0.2), transparent);

background: linear-gradient(135deg, rgba(0, 0, 0, 0.2), transparent);

content: '';

display: block;

height: 100%;

left: 0;

position: absolute;

top: 0;

width: 100%;

}

.card-back .layer .top,

.card-back .layer .bottom {

left: 8%;

position: absolute;

z-index: 1;

}

.card-back .layer .top {

top: 12%;

}

.card-back .layer .bottom {

bottom: 12%;

}

.card-back .layer h2,

.card-back .layer h3,

.card-back .layer h4 {

font-weight: 400;

margin: 2px 0;

}

.card-back .layer h2 {

font-size: 18px;

font-weight: 500;

text-transform: uppercase;

}

.card-back .layer h3 {

font-size: 16px;

}

.card-back .layer h4 {

font-size: 16px;

font-style: italic;

}

.card-front .layer {

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

height: 100%;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

position: relative;

width: 100%;

}

.card-front .layer h1 {

font-size: 32px;

font-weight: 400;

letter-spacing: -2px;

margin: 0 auto;

padding: 6px 18px 4px;

text-align: center;

}

.card-front .layer .corner {

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

border-right: 2px solid #d4cd96;

border-top: 2px solid #d4cd96;

height: 12px;

position: absolute;

width: 12px;

}

.card-front .layer .corner:nth-of-type(1) {

right: 0;

top: 0;

}

.card-front .layer .corner:nth-of-type(2) {

left: 0;

top: 0;

-webkit-transform: rotateZ(-90deg);

transform: rotateZ(-90deg);

}

.card-front .layer .corner:nth-of-type(3) {

bottom: 0;

left: 0;

-webkit-transform: rotateZ(180deg);

transform: rotateZ(180deg);

}

.card-front .layer .corner:nth-of-type(4) {

bottom: 0;

right: 0;

-webkit-transform: rotateZ(90deg);

transform: rotateZ(90deg);

}

.card-wrapper {

height: 271.76471px;

max-width: 420px;

-webkit-perspective: 600px;

perspective: 600px;

position: relative;

width: 100%;

-webkit-transition: -webkit-transform 1s;

transition: -webkit-transform 1s;

transition: transform 1s;

transition: transform 1s, -webkit-transform 1s;

}