css书本效果,纯CSS实现的书本折边特效

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;

}