html电子名片,HTML5 精美的双面电子名片

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

transition: 0.5s ease-in-out;

}

html,

body {

background-color: #220200;

height: 100%;

overflow: hidden;

font-family: helvetica neue, helvetica, arial, sans-serif;

}

html h1,

body h1 {

font-size: 25px;

font-weight: 200;

color: white;

line-height: 30px;

margin-bottom: 10px;

}

html h2,

body h2 {

font-size: 15px;

color: #6b0500;

}

#wrapper {

opacity: 0;

display: table;

height: 100%;

width: 100%;

}

#wrapper.loaded {

opacity: 1;

transition: 2.5s ease-in-out;

}

#wrapper #content {

display: table-cell;

vertical-align: middle;

}

#card {

height: 400px;

width: 300px;

margin: 0 auto;

position: relative;

z-index: 1;

perspective: 600px;

}

#card #front,

#card #back {

border-radius: 10px;

height: 100%;

width: 100%;

position: absolute;

left: 0;

top: 0;

transform-style: preserve-3d;

backface-visibility: hidden;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

}

#card #front {

transform: rotateY(0deg);

overflow: hidden;

z-index: 1;

}

#card #front #arrow {

position: absolute;

height: 50px;

line-height: 50px;

font-size: 30px;

z-index: 10;

bottom: 0;

right: 0;

color: rgba(255, 255, 255, 0.5);

}

#card #front #top-pic {

height: 50%;

width: 100%;

background-image: url(https://unsplash.imgix.net/45/ZLSw0SXxThSrkXRIiCdT_DSC_0345.jpg?q=75&w=1080&h=1080&fit=max&fm=jpg&auto=format&s=857f07b76abac23a7fb7161cc7b12a46);

background-size: cover;

}

#card #front #avatar {

width: 114px;

height: 114px;

top: 50%;

left: 50%;

margin: -77px 0 0 -57px;

border-radius: 100%;

box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 4px 5px rgba(107, 5, 0, 0.6), 0 0 50px 50px rgba(255, 255, 255, 0.25);

background-image: url(http://0.gravatar.com/avatar/fa4df8540bab3cb38f7dfa60c6e0522c?size=2000);

background-size: contain;

position: absolute;

z-index: 1;

}

#card #front #info-box {

height: 50%;

width: 100%;

position: absolute;

display: table;

left: 0;

bottom: 0;

background: rgba(200, 38, 29, 0.7);

padding: 50px;

}

#card #front #social-bar {

height: 50px;

width: 100%;

position: absolute;

bottom: 0;

left: 0;

line-height: 50px;

font-size: 18px;

text-align: center;

}

#card #front #social-bar a {

display: inline-block;

color: #951009;

text-decoration: none;

padding: 5px;

line-height: 18px;

border-radius: 5px;

}

#card #front #social-bar a:hover {

color: #450300;

background: rgba(255, 255, 255, 0.3);

transition: 0.25s ease-in-out;

}

#card #back {

transform: rotateY(180deg);

background-color: rgba(255, 255, 255, 0.6);

display: table;

z-index: 2;

font-size: 13px;

line-height: 20px;

padding: 50px;

}

#card #back .back-info {

text-align: justify;

text-justify: inter-word;

}

#card #back #social-bar {

height: 50px;

width: 100%;

position: absolute;

bottom: 0;

left: 0;

line-height: 50px;

font-size: 18px;

text-align: center;

}

#card #back #social-bar a {

display: inline-block;

line-height: 18px;

color: #951009;

text-decoration: none;

padding: 5px;

border-radius: 5px;

}

#card #back #social-bar a:hover {

color: #450300;

background: rgba(223, 74, 66, 0.5);

transition: 0.25s ease-in-out;

}

#card .info {

display: table-cell;

height: 100%;

vertical-align: middle;

text-align: center;

}

#card.flip #front {

transform: rotateY(180deg);

}

#card.flip #back {

transform: rotateY(360deg);

}

#background {

position: fixed;

background-color: black;

top: 0;

left: 0;

height: 100%;

width: 100%;

}

#background #background-image {

height: calc(100% + 60px);

width: calc(100% + 60px);

position: absolute;

top: -30px;

left: -30px;

-webkit-filter: blur(10px);

background-image: url(https://unsplash.imgix.net/45/ZLSw0SXxThSrkXRIiCdT_DSC_0345.jpg?q=75&w=1080&h=1080&fit=max&fm=jpg&auto=format&s=857f07b76abac23a7fb7161cc7b12a46);

background-size: cover;

}