母亲节因为疫情不能陪伴在妈妈身边，我用css给妈妈做了一个贺卡。

本文链接：https://blog.csdn.net/m0_62069409/article/details/124640247

博主分享了如何利用有限的前端知识，从GitHub获取源码并修改，为母亲制作了一张特别的母亲节贺卡。尽管主要专注于后端学习，但这个小项目展示了前端技术的应用。祝所有母亲节日快乐。

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

<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<title>Mother's Day Card</title>


<style class="INLINE_PEN_STYLESHEET_ID">
    body, div, h1, h2, form, fieldset, input, textarea, footer, p {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
}

body { 
  
	-webkit-perspective:800px;
	background: #ccc url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/144467/bg_out2.png');
	color: #7c7873;
-webkit-animation: bugfix infinite 1s; 
}

@-webkit-keyframes bugfix { 
  from {padding:0;} 
  to {padding:0;} 
}

p {
	font-family: 'Arvo', serif;
	font-size: 20px;
	text-shadow: 0 1px 0 #fff;
	color: #C3447A;
	opacity: 0;
}

#wrap{
	width: 530px;
	height: 1000px;
	margin: 20px auto 0;
}

h1{
	font-family: 'Palatino', sans-serif;
	font-size: 48px;
	margin: 50px 0;
	text-align: center;
	color: #D65076;
	text-shadow: 0 3px 0 #fff;
}

#letter_wrap {
	overlay:hidden;
	height: 446px;
	position:relative;
	top: 0px;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

#back {
	position:absolute;
	bottom:128px;
	left:0px;
	background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/144467/before1.png');
	width:530px;
	height:132px;
}

#flap{
	position:absolute;
	bottom: 65px;
	left: 0px;
	width: 530px;
	height: 390px;
	-webkit-transform-style:preserve-3d;
	z-index: 5;
	-webkit-transition: all 1.5s 1s linear;
}

#flap>div{
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	display:block;
	position:absolute;
	width: 100%;
	height: 100%;
}

#open_flap {
	top:195px;
	background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/144467/flap.png') no-repeat;
	-webkit-transform: rotateY(-180deg);
}

#closed_flap {
	top:0%;
	background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/144467/flap_closed.png') no-repeat 0 195px;
}


#front {
	position:absolute;
	bottom:0px;
	left:0px;
	background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/144467/after.png');
	width:530px;
	height:260px;
}

.checkbox{
	position: absolute;
	opacity: 0;
	top:0;
	left:0;
	width:70%;
	height: 70%;
	z-index: 100;
}

#checkbox:checked + #letter_wrap {
	height:776px;
	top:-200px;
	-webkit-transition: all 1s ease-in-out 2s;
	-moz-transition: all 1s ease-in-out 2s;
	-o-transition: all 1s ease-in-out 2s;
	transition: all 1s ease-in-out 2s;
}

#letter {
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	background: #ffc url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/144467/letter_bg.png');
	position: relative;
	top:200px;
	overlay: hidden;
	height: 190px;
	width: 400px;
	margin: 0 auto;
	padding: 20px;
	border:1px solid #fff;
	border-radius: 3px;
	-webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
	-moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff;
	box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
}

#checkbox:checked + #letter_wrap>#flap{
	-webkit-transition: all 2s linear;
	transform: rotateX(180deg);
	-webkit-transform: rotateX(180deg);
	z-index: -1;
}

#checkbox:checked +#letter_wrap>#letter{
	height:520px;
	-webkit-transition: all 1s ease-in-out 2s;
	-moz-transition: all 1s ease-in-out 2s;
	-o-transition: all 1s ease-in-out 2s;
	transition: all 1s ease-in-out 2s;
}


#checkbox:checked +#letter_wrap>#letter>p{
	opacity: 1;
	-webkit-transition: opacity 1s ease-in-out 2s;
	-moz-transition: opacity 1s ease-in-out 2s;
	-o-transition: opacity 1s ease-in-out 2s;
	transition: opacity 1s ease-in-out 2s;
}
  </style>

</head>
<body>
<div id="wrap">
<h1>Happy Mothers Day!</h1>
<input type="checkbox" id="checkbox" class="checkbox">
<div id="letter_wrap">
<label for="checkbox" class="handle" onclick></label>
<div id="back"></div>
<div id="flap">
<div id="closed_flap"></div>
<div id="open_flap"></div>
</div>
<div id="letter">
<p>Name, aka Mom</p>
</br>
<p>XXX</p>
</br>
<p  style="font-size:16px; color:green;" >P.S. </p>
</br>
<p>Sincerely:</p>
<p></p>
</br>
<p>Name & Name</p>
</br>
</br>
<p></p>
<p></p>
<p style="font-size:12px;">Extreme Small Postscript lol</p>
</div>
<div id="front"></div>
</div>

</div>


</body>
</html>

结束语：