CSS
语言:
CSSSCSS
确定
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
font-family: 'Josefin Sans', sans-serif;
background: -webkit-linear-gradient(bottom, #457fca, #5691c8);
background: linear-gradient(to top, #457fca, #5691c8);
font-size: 16px;
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;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.wrap {
width: 25em;
height: 35em;
position: relative;
overflow: hidden;
margin-bottom: 1em;
background: -webkit-linear-gradient(top, #fff 25%, #2a8d96 25%, #6b5555 100%);
background: linear-gradient(to bottom, #fff 25%, #2a8d96 25%, #6b5555 100%);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.wrap.animate .water {
-webkit-animation: unmurkify 4s forwards ease-out 1s;
animation: unmurkify 4s forwards ease-out 1s;
}
.wrap.animate .letter {
-webkit-animation: move-letter 3s ease-out forwards;
animation: move-letter 3s ease-out forwards;
}
.wrap.animate .meta-wrap,
.wrap.animate .spine {
-webkit-animation: bookify 2s forwards 4s;
animation: bookify 2s forwards 4s;
}
.sky {
background: #f0f1f5;
position: relative;
height: 25%;
top: 0;
left: 0;
width: 100%;
z-index: 5;
}
.water {
height: 75%;
width: 100%;
bottom: 0;
left: 0;
background: -webkit-linear-gradient(top, #2a8d96, #6b5555);
background: linear-gradient(to bottom, #2a8d96, #6b5555);
position: relative;
z-index: 15;
opacity: 1;
}
.letter {
z-index: 3;
position: absolute;
top: 19%;
font-size: 7em;
font-weight: bold;
text-align: center;
color: #333;
}
.j {
left: 12%;
}
.a {
left: 27%;
z-index: 10;
}
.w {
left: 46%;
}
.s {
left: 75%;
}
.meta-wrap {
position: absolute;
z-index: 20;
bottom: 0;
left: 0;
width: 100%;
text-transform: uppercase;
color: #eee;
font-size: 0.6em;
padding: 0 2em 2em;
opacity: 0;
}
.meta-wrap hr {
height: 1px;
color: #ddd;
background: #ddd;
font-size: 0;
border: 0;
}
.meta-content {
padding-top: 1em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.publisher {
text-align: right;
}
.spine {
position: absolute;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(left, transparent 0.3em, rgba(0, 0, 0, 0.1) 0.6em, rgba(0, 0, 0, 0.05) 0.9em, rgba(255, 255, 255, 0.1) 1em, rgba(255, 255, 255, 0.05) 1em, transparent 1.1em);
background: linear-gradient(to right, transparent 0.3em, rgba(0, 0, 0, 0.1) 0.6em, rgba(0, 0, 0, 0.05) 0.9em, rgba(255, 255, 255, 0.1) 1em, rgba(255, 255, 255, 0.05) 1em, transparent 1.1em);
z-index: 30;
top: 0;
left: 0;
background-size: 100px 1em;
background-repeat: repeat-y;
opacity: 0;
}
@-webkit-keyframes move-letter {
0% {
-webkit-transform: translateX(1em) translateY(0.1em);
transform: translateX(1em) translateY(0.1em);
}
100% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
}
@keyframes move-letter {
0% {
-webkit-transform: translateX(1em) translateY(0.1em);
transform: translateX(1em) translateY(0.1em);
}
100% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
}
@-webkit-keyframes unmurkify {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
opacity: 0.7;
}
}
@keyframes unmurkify {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
opacity: 0.7;
}
}
@-webkit-keyframes bookify {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes bookify {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
button {
border: none;
background: #333;
color: #ddd;
border-radius: 20px;
height: 30px;
padding: 0 15px;
letter-spacing: 1px;
font-size: 14px;
z-index: 40;
cursor: pointer;
}