html5请柬制作原理,HTML5请柬（或信封、卡片、纸张）展开动画-优快云博客

这篇博客介绍了如何使用HTML5和CSS3创建一个立体翻页效果的电子请柬。通过设置CSS3的旋转、透视等属性，实现请柬从关闭到打开的平滑动画，背景使用渐变色增加视觉效果。同时，内容中包含关键样式代码段，展示了如何布局和设计各个部分，如左右页面的翻转效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

语言：

CSSSCSS

确定

* {

margin: 0;

padding: 0;

}

html,

body {

width: 100%;

height: 100%;

overflow: hidden;

background: rgba(17, 126, 104, 1);

background: -moz-radial-gradient(center, ellipse cover, rgba(17, 126, 104, 1) 0%, rgba(17, 126, 104, 1) 25%, rgba(1, 81, 54, 1) 100%);

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(17, 126, 104, 1)), color-stop(25%, rgba(17, 126, 104, 1)), color-stop(100%, rgba(1, 81, 54, 1)));

background: -webkit-radial-gradient(center, ellipse cover, rgba(17, 126, 104, 1) 0%, rgba(17, 126, 104, 1) 25%, rgba(1, 81, 54, 1) 100%);

background: -o-radial-gradient(center, ellipse cover, rgba(17, 126, 104, 1) 0%, rgba(17, 126, 104, 1) 25%, rgba(1, 81, 54, 1) 100%);

background: -ms-radial-gradient(center, ellipse cover, rgba(17, 126, 104, 1) 0%, rgba(17, 126, 104, 1) 25%, rgba(1, 81, 54, 1) 100%);

background: radial-gradient(ellipse at center, rgba(17, 126, 104, 1) 0%, rgba(17, 126, 104, 1) 25%, rgba(1, 81, 54, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#117e68', endColorstr='#015136', GradientType=1);

}

.wrapper {

box-sizing: border-box;

width: 100%;

height: 100%;

-webkit-perspective: 2000px;

padding: 5%;

perspective: 2000px;

}

.left,

.middle,

.right {

float: left;

position: relative;

height: 100%;

background-color: #fff;

width: 33%;

}

.left {

transform-origin: 100% 50%;

transform: rotateY(180deg);

transition: .7s ease-in-out;

z-index: 20;

}

.left.open {

transform-origin: 100% 50%;

transform: rotateY(0deg);

transition: .7s ease-in-out;

}

.right {

transform-origin: 0% 50%;

transform: rotateY(-180deg);

transition: .7s ease-in-out;

}

.right.open {

transform-origin: 0% 50%;

transform: rotateY(0deg);

transition: .7s ease-in-out;

}

.front,

.back {

height: 100%;

width: 100%;

position: absolute;

top: 0;

}

.front {

transform: rotateY(180deg);

background-color: #fff;

z-index: 5;

}

.back {

background-color: #fff;

z-index: 4;

backface-visibility: hidden;

-webkit-backface-visibility: hidden;

}

.back.open {

z-index: 10;

}

.openB {

background-color: transparent;

border: 2px solid rgba(0, 0, 0, 0.5);

padding: 5px;

position: absolute;

min-width: 120px;

max-width: 150px;

z-index: 50;

bottom: 30px;

font-weight: 400;

font-size: 1em;

opacity: .7;

transition: .2s ease-in-out;

cursor: pointer;

}

.openB:hover {

background-color: rgba(0, 0, 0, 1);

color: white;

transition: .2s ease-in-out;

}

.closeB {

position: absolute;

border: none;

background-color: rgba(0, 0, 0, 0.6);

color: white;

z-index: 50;

width: 50px;

font-size: 1.5em;

cursor: pointer;

height: 50px;

top: 0;

right: 0;

transition: .2s ease-in-out;

}

.closeB:hover {

background-color: rgba(0, 0, 0, 0.2);

transition: .2s ease-in-out;

}

.preview {

max-height: 100px;

overflow: hidden;

text-overflow: ellipsis;

content: "";

position: relative;

display: block;

}

.preview:before {

content: '';

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

background: linear-gradient(transparent, white);

}

.sectionWrap {

height: 100%;

width: 100%;

padding: 40px;

box-sizing: border-box;

overflow: hidden;

}

h1 {

font-family: 'Playfair Display', serif;

font-size: 3em;

line-height: 1;

color: #34495e;

}

p {

font-family: 'Josefin Sans', sans-serif;

font-size: 1.2em;

max-height: 100px;

text-overflow: clip;

}

hr {

border: 3px solid #34495e;

width: 30px;

margin: 12px 0 8px 1px;

text-align: left;

}

footer {

position: fixed;

bottom: 0;

width: 100%;

height: 50px;

left: 0;

box-sizing: border-box;

padding-right: 30px;

}

footer img {

height: 50px;

filter: invert(100%);

float: left;

}

footer p {

margin-top: 13px;

}

footer a {

color: #fff;

text-decoration: none;

display: inline-block;

width: 250px;

float: right;

opacity: 1;

transition: .2s ease-in-out;

}

footer a:hover {

opacity: .6;

transition: .2s ease-in-out;

}