html css3 纸张,CSS3 设计巧妙的纸张褶起动效

CSS

语言：

CSSSCSS

确定

body {

margin: 0;

padding: 0;

background: #efefef;

}

.box {

position: relative;

margin: 40px auto;

width: 400px;

height: 350px;

background: #ffa500;

border-radius: 2px;

}

.box::before,

.box::after {

content: '';

position: absolute;

bottom: 10px;

width: 40%;

height: 10px;

box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);

z-index: -1;

-webkit-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.box::before {

left: 15px;

-webkit-transform: skew(-5deg) rotate(-5deg);

-ms-transform: skew(-5deg) rotate(-5deg);

transform: skew(-5deg) rotate(-5deg);

}

.box::after {

right: 15px;

-webkit-transform: skew(5deg) rotate(5deg);

-ms-transform: skew(5deg) rotate(5deg);

transform: skew(5deg) rotate(5deg);

}

.box:hover::before,

.box:hover::after {

box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);

}

.box:hover::before {

left: 5px;

}

.box:hover::after {

right: 5px;

}