html怎么写小信封图标,HTML5 CSS3 一叠绵软的信封纸张

CSS

语言：

CSSSCSS

确定

html {

font-size: 20px;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

body {

height: 100vh;

width: 100vw;

background: #c27070;

font-family: "Merriweather", serif;

color: white;

font-size: 2rem;

}

.paper {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate3d(-50%, -50%, 0);

transform: translate3d(-50%, -50%, 0);

width: 5rem;

height: 10rem;

}

.paper .left,

.paper .right,

.paper .mid {

position: absolute;

width: 5rem;

height: 10rem;

background: #f4f1f1;

-webkit-transform: perspective(200rem) rotateX(60deg);

transform: perspective(200rem) rotateX(60deg);

-webkit-transition: -webkit-transform 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

transition: -webkit-transform 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

transition: transform 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

transition: transform 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

.paper .left {

left: -4.5rem;

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

transform-origin: 100% 50%;

}

.paper .right {

left: 4.5rem;

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

transform-origin: 0% 50%;

}

.paper .mid {

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

transform-origin: 50% 50%;

z-index: 2;

}

.paper .sheet {

-webkit-transition: -webkit-transform 1000ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

transition: -webkit-transform 1000ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

transition: transform 1000ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

transition: transform 1000ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 1000ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

.paper .sheet:nth-child(1) {

-webkit-transform: translateY(2rem);

transform: translateY(2rem);

}

.paper .sheet:nth-child(1) .left,

.paper .sheet:nth-child(1) .right,

.paper .sheet:nth-child(1) .mid {

background: #ddd5d5;

-webkit-transition-delay: 100ms;

transition-delay: 100ms;

}

.paper .sheet:nth-child(2) {

-webkit-transform: translateY(1.5rem);

transform: translateY(1.5rem);

}

.paper .sheet:nth-child(2) .left,

.paper .sheet:nth-child(2) .right,

.paper .sheet:nth-child(2) .mid {

background: #e8e3e3;

-webkit-transition-delay: 50ms;

transition-delay: 50ms;

}

.paper .sheet:nth-child(3) {

-webkit-transform: translateY(1rem);

transform: translateY(1rem);

}

.paper.half .left {

-webkit-transform: perspective(100rem) rotateX(60deg) rotateY(5deg) translateZ(-1rem);

transform: perspective(100rem) rotateX(60deg) rotateY(5deg) translateZ(-1rem);

}

.paper.half .right {

-webkit-transform: perspective(100rem) rotateX(60deg) rotateY(-5deg) translateZ(-1rem);

transform: perspective(100rem) rotateX(60deg) rotateY(-5deg) translateZ(-1rem);

}

.paper.half .mid {

-webkit-transform: perspective(100rem) rotateX(60deg) rotateY(0deg) translateZ(-0.97rem);

transform: perspective(100rem) rotateX(60deg) rotateY(0deg) translateZ(-0.97rem);

}

.paper.down .left,

.paper.down .right,

.paper.down .mid {

-webkit-transform: perspective(100rem) rotateX(60deg) rotateY(0deg) translateZ(-1rem);

transform: perspective(100rem) rotateX(60deg) rotateY(0deg) translateZ(-1rem);

}

.paper.down .sheet:nth-child(1) {

-webkit-transform: translateY(2rem);

transform: translateY(2rem);

}

.paper.down .sheet:nth-child(2) {

-webkit-transform: translateY(1.5rem);

transform: translateY(1.5rem);

}

.paper.down .sheet:nth-child(3) {

-webkit-transform: translateY(1rem);

transform: translateY(1rem);

}

.paper.down:active .sheet:nth-child(1) {

-webkit-transform: translateY(2rem) rotateX(0deg);

transform: translateY(2rem) rotateX(0deg);

}

.paper.down:active .sheet:nth-child(2) {

-webkit-transform: translateY(1.75rem) rotateX(-5deg);

transform: translateY(1.75rem) rotateX(-5deg);

}

.paper.down:active .sheet:nth-child(3) {

-webkit-transform: translateY(1.5rem) rotateX(-10deg);

transform: translateY(1.5rem) rotateX(-10deg);

}

.paper .stamp {

position: absolute;

top: 0.5rem;

left: 0.5rem;

width: 1.5rem;

height: 2rem;

background: #d5b3e6;

box-shadow: inset 0 0 0 0.2rem #bd94d1;

}

.paper .address {

position: absolute;

top: 50%;

left: 50%;

width: 200%;

text-align: center;

font-size: 0.6rem;

color: #b3bfe6;

-webkit-transform: translate3d(-50%, -50%, 0);

transform: translate3d(-50%, -50%, 0);

}

.sig {

position: fixed;

bottom: 8px;

right: 8px;

text-decoration: none;

font-size: 12px;

font-weight: 100;

font-family: sans-serif;

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

letter-spacing: 2px;

}