查看“Widget:用户测试邀请信”的源代码

<body>
<div id="wrap">
		<h2>SEND A MESSAGE</h2>
		<br><br><br>
		<div id="form-wrap">
			<form>
				<p>HELLO JOE,</p>
				<label for="email">Your Message:</label>
				<textarea name="message" id="message" value="Your Message"></textarea>
				
				<p>BEST,</p>
				<label for="name">Name:</label>
				<input type="text" name="name" value="" id="name" />
				
				<label for="email">Email:</label>
				<input type="text" name="email" value="" id="email" />
				
				<input type="submit" name="submit" value="NOW, I SEND THANKS!" />
			</form>
		</div>
	</div>
</body>
<style>
#wrap p{
	font-family: tahoma;
	font-size: 24px;
	color: #757575;
}
#wrap{
	width: 530px;
	margin: 20px auto 0;
	height: 1000px;
}
#wrap h2{
	margin-bottom: 20px;
	text-align: center;
	font-size: 35px;
	font-family: tahoma;
	color: black;
}
#form-wrap{
	height: 447px;
	position: relative;
	top: 0px;
	transition: all 1s ease-in-out .3s;
}
#form-wrap:before{
	content: "";
	position: absolute;
	bottom: 128px;
	left: 0px;
	background: url('https://www.hmoegirl.com/images/a/a9/Before.png');
	width: 530px;
	height: 317px;
}
#form-wrap:after{
	content: "";
	position: absolute;
	bottom: 0px;
	left: 0;
	background: url('https://www.hmoegirl.com/images/c/c6/After.png');
	width: 530px;
	height: 259px;
}
#form-wrap.hide:after,
#form-wrap.hide:before{
	display: none;
}
#form-wrap:hover{
	height: 777px;
	top: -200px;
}
#wrap form{
	background: url('https://www.hmoegirl.com/images/c/cf/Letter_bg.png');
	position: relative;
	top: 200px;
	height: 200px;
	width: 400px;
	margin: 0px auto;
	padding: 20px;
	border: 1px solid white;
	border-right: 3px;
	transition: all 1s ease-in-out .3s;
}
#form-wrap:hover form{
	height: 530px;
}
#wrap lable{
	margin: 11px 20px 0 0;
	font-size: 15px;
	color: gray;
	text-transform: uppercase;
}
#wrap input[type=text], textarea{
	font: 14px normal uppercase, arial, serif;
	color: dimgray;
	background: none;
	width: 380px;
	height: 37px;
	padding: 0px 10px;
	margin: 0 0 10px 0;
	border: 1px solid #BDBDBD;
	border-radius: 5px;
}
#wrap textarea{
	height: 80px;
	padding-top: 14px;
}
#form-wrap input[type=submit]{
	position: relative;
	font-family: tahoma;
	font-size: 24px;
	color: gray;
	width: 300px;
	text-align: center;
	opacity: 0;
	cursor: pointer;
	border-radius: 3px;
	transition: opacity 0.7s ease-in-out 0s;
}
#form-wrap:hover input[type=submit]{
	z-index: 1;
	opacity: 1;
	transition: opacity 0.5s ease-in-out 1.3s;
}

</style>