Home > Web Front-end > HTML Tutorial > CSS3 transition feature creates envelope effect contact form_html/css_WEB-ITnose

CSS3 transition feature creates envelope effect contact form_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:54:25
Original
1211 people have browsed it

Recently I have shared with you many CSS3 effects, all of which are achieved by making full use of CSS3. With the new features of CSS3, our possibilities to create good interactions and effects are greatly increased. In this article, I would like to share with you a contact form with an envelope effect achieved using the CSS3 transition feature.

Effect demonstration Plug-in download

CSS3 code:

	#form_wrap { overflow:hidden; height:446px; position:relative; top:0px;		-webkit-transition: all 1s ease-in-out .3s;		-moz-transition: all 1s ease-in-out .3s;		-o-transition: all 1s ease-in-out .3s;		transition: all 1s ease-in-out .3s;}		#form_wrap:before {content:"";		position:absolute;		bottom:128px;left:0px;		background:url('images/before.png');		width:530px;height: 316px;}		#form_wrap:after {content:"";position:absolute;		bottom:0px;left:0;		background:url('images/after.png');		width:530px;height: 260px; }	#form_wrap.hide:after, #form_wrap.hide:before {display:none; }	#form_wrap:hover {height:776px;top:-200px;}	form {background:#f7f2ec url('images/letter_bg.png'); 		position:relative;top:200px;overflow:hidden;		height:200px;width:400px;margin:0px auto;padding:20px; 		border: 1px solid #fff;		border-radius: 3px; 		-moz-border-radius: 3px; -webkit-border-radius: 3px;		box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;		-moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff;		-webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;		-webkit-transition: all 1s ease-in-out .3s;		-moz-transition: all 1s ease-in-out .3s;		-o-transition: all 1s ease-in-out .3s;		transition: all 1s ease-in-out .3s;}		#form_wrap:hover form {height:530px;}		label {			margin: 11px 20px 0 0; 			font-size: 16px; color: #b3aba1;			text-transform: uppercase; 			text-shadow: 0px 1px 0px #fff;		}		input[type=text], textarea {			font: 14px normal normal uppercase helvetica, arial, serif;			color: #7c7873;background:none;			width: 380px; height: 36px; padding: 0px 10px; margin: 0 0 10px 0;			border:1px solid #f8f5f1;			-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;			-moz-box-shadow: inset 0px 0px 1px #726959;			-webkit-box-shadow:  inset 0px 0px 1px #b3a895; 			box-shadow:  inset 0px 0px 1px #b3a895;		}			textarea { height: 80px; padding-top:14px;}		textarea:focus, input[type=text]:focus {background:rgba(255,255,255,.35);}		#form_wrap input[type=submit] {			position:relative;font-family: 'YanoneKaffeesatzRegular'; 			font-size:24px; color: #7c7873;text-shadow:0 1px 0 #fff;			width:100%; text-align:center;opacity:0;			background:none;			cursor: pointer;			-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; 			-webkit-transition: opacity .6s ease-in-out 0s;			-moz-transition: opacity .6s ease-in-out 0s;			-o-transition: opacity .6s ease-in-out 0s;			transition: opacity .6s ease-in-out 0s;		}		#form_wrap:hover input[type=submit] {z-index:1;opacity:1;			-webkit-transition: opacity .5s ease-in-out 1.3s;			-moz-transition: opacity .5s ease-in-out 1.3s;			-o-transition: opacity .5s ease-in-out 1.3s;			transition: opacity .5s ease-in-out 1.3s;}			#form_wrap:hover input:hover[type=submit] {color:#435c70;}
Copy after login

 

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template