CSS
语言：
CSSSCSS
确定
@import url(/css?family=Playfair+Display:400,700);
body {
background-color: #EA4C89;
font-family: "Playfair Display", serif;
}
body .container {
position: relative;
height: 400px;
width: 550px;
margin: 100px auto 0;
background-color: #336666;
}
body .container:after {
content: "";
position: absolute;
top: 232px;
left: 82px;
width: 900px;
height: 670px;
background-color: rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(55deg);
transform: rotate(55deg);
z-index: -1;
}
body .container .letter {
position: absolute;
top: 0px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 490px;
height: 400px;
background-color: #fff;
-webkit-transition: top 0.4s ease-in;
transition: top 0.4s ease-in;
}
body .container .letter img {
display: block;
width: 150px;
margin: 0 auto;
}
body .container .letter h2 {
margin: 0 0 20px;
text-align: center;
text-transform: uppercase;
font-weight: 400;
}
body .container .letter .rec {
display: block;
height: 18px;
margin: 10px 10px;
background-color: #eee;
}
body .container .letter .rec:first-child {
width: 400px;
}
body .container .letter .rec:nth-child(2) {
width: 230px;
}
body .container .letter .rec:last-child {
width: 210px;
}
body .container .open {
top: -60px;
}
body .container .side {
position: absolute;
top: 0;
width: 0;
height: 0;
border-style: solid;
z-index: 10;
}
body .container .side-left {
left: 0;
border-width: 200px 0 200px 275px;
border-color: transparent transparent transparent #C2EBEB;
}
body .container .side-right {
right: 0;
border-width: 200px 275px 200px 0;
border-color: transparent #C2EBEB transparent transparent;
}
body .container .side-bottom {
top: 160px;
border-width: 0 275px 240px 275px;
border-color: transparent transparent #66CCCC transparent;
}
如果觉得《html实现信封效果 CSS3 带简单动画效果的信封》对你有帮助，请点赞、收藏，并留下你的观点哦！
