css+js实现悬浮按钮点击弹出联系表单效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+js实现悬浮按钮点击弹出联系表单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body {
	font-family:Roboto,sans-serif;
	width:100%;
	font-size:16px;
	margin:0;
	padding:0;
	background:#FAFAFA
}
h1,h2 {
	font-weight:700;
	color:#FFF;
	font-weight:700;
	font-size:4em;
	margin:0;
	padding:0 20px
}
.form-overlay {
	width:0;
	height:100%;
	top:0;
	left:0;
	position:fixed;
	opacity:0;
	background:#000;
	transition:background 1s,opacity .4s,width 0s .4s
}
.show-form-overlay .form-overlay {
	width:100%;
	opacity:.7;
	z-index:999;
	transition:background 1s,opacity .4s,width 0s
}
.show-form-overlay.form-submitted .form-overlay {
	background:#119DA4;
	transition:background .6s
}
#form-container {
	cursor:pointer;
	color:#FFF;
	z-index:1000;
	position:absolute;
	margin:0 auto;
	left:0;
	right:0;
	bottom:5vh;
	background-color:#f72f4e;
	overflow:hidden;
	border-radius:50%;
	width:60px;
	max-width:60px;
	height:60px;
	text-align:center;
	box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);
	transition:all .2s .45s,height .2s cubic-bezier(0.4,0,0.2,1) .25s,max-width .2s cubic-bezier(0.4,0,0.2,1) .35s,width .2s cubic-bezier(0.4,0,0.2,1) .35s
}
#form-container.expand {
	cursor:auto;
	box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.17);
	border-radius:0;
	width:70%;
	height:610px;
	max-width:610px;
	padding:0;
	transition:all .2s,max-width .2s cubic-bezier(0.4,0,0.2,1) .1s,height .3s ease .25s
}
#form-close {
	cursor:pointer
}
.icon::before {
	cursor:pointer;
	font-size:30px;
	line-height:60px;
	display:block;
	transition:all .7s cubic-bezier(0.4,0,0.2,1)
}
.icon:hover::before {
	-webkit-animation:wiggle .1s linear infinite;
	animation:wiggle .1s linear infinite
}
.fa-pencil::before {
	display:block
}
.fa-close::before {
	display:none
}
.expand.fa-pencil::before {
	display:none
}
.expand.fa-close::before {
	display:block;
	-webkit-animation:none;
	animation:none
}
#form-content {
	font-family:Roboto,sans-serif;
	transform:translateY(150%);
	width:100%;
	opacity:0;
	text-align:left;
	transition:transform .2s cubic-bezier(0.4,0,0.2,1),opacity .2s .2s
}
#form-content.expand {
	transform:translateY(0px);
	opacity:1;
	transition:transform .7s cubic-bezier(0.4,0,0.2,1) .3s,opacity 0s
}
#form-content form {
	color:#FFF;
	width:100%;
	height:100%;
	padding:0 20px 20px 20px;
	margin-bottom:10px;
	box-sizing:border-box;
	text-align:left
}
#form-head {
	font-size:100%;
	padding:0;
	margin:0 20px;
	color:#FFF;
	text-align:center;
	transition:all .8s .6s
}
#form-head h1,#form-head p {
	padding:0;
	margin:0
}
#form-head .pre {
	display:block
}
#form-head .post {
	display:none
}
.form-submitted#form-head {
	transform:translateY(250%)
}
.form-submitted#form-head .pre {
	display:none
}
.form-submitted#form-head .post {
	display:block
}
.input {
	background:rgba(0,0,0,0.2);
	display:block;
	height:50px;
	width:100%;
	margin:10px 0;
	padding:0 10px;
	border-width:0;
	box-sizing:border-box;
	border:0;
	outline:0;
	box-shadow:none;
	transform:translateX(0)
}
::-webkit-input-placeholder {
	color:rgba(255,255,255,0.8);
	font-size:90%
}
:-moz-placeholder {
	color:rgba(255,255,255,0.8);
	font-size:90%
}
::-moz-placeholder {
	color:rgba(255,255,255,0.8);
	font-size:90%
}
:-ms-input-placeholder {
	color:rgba(255,255,255,0.8);
	font-size:90%
}
::-ms-input-placeholder {
	color:rgba(255,255,255,0.8);
	font-size:90%
}
:-moz-placeholder-shown {
	color:rgba(255,255,255,0.8);
	font-size:90%
}
:-ms-input-placeholder {
	color:rgba(255,255,255,0.8);
	font-size:90%
}
:placeholder-shown {
	color:rgba(255,255,255,0.8);
	font-size:90%
}
input,select,textarea {
	color:#FFF
}
.input.message {
	resize:none;
	height:150px;
	padding:10px
}
.input.submit {
	background-color:#FFF;
	color:#f72f4e;
	font-size:120%;
	height:80px;
	box-shadow:0 5px rgba(0,0,0,0.5);
	transition:all .1s,transform 0s .6s
}
.input.submit:active {
	margin-top:15px;
	box-shadow:0 0 rgba(0,0,0,0.5)
}
.input.form-error {
	-webkit-animation:error .8s ease;
	animation:error .8s ease;
	background:rgba(0,0,0,0.7)
}
select option {
	background:#f72f4e;
	color:#FFF;
	border:0;
	box-shadow:none;
	outline:0
}
select option:disabled {
	font-style:italic;
	color:rgba(255,255,255,0.9);
	font-size:90%
}
.input {
	transition:transform 0s 1s
}
.form-submitted .input {
	transform:translateX(150%);
	opacity:0;
	transition:all .5s,transform .4s cubic-bezier(0.4,0,0.2,1) 0s
}
.form-submitted .input:nth-child(1) {
	transition-delay:.1s
}
.form-submitted .input:nth-child(2) {
	transition-delay:.2s
}
.form-submitted .input:nth-child(3) {
	transition-delay:.3s
}
.form-submitted .input:nth-child(4) {
	transition-delay:.4s
}
.form-submitted .input:nth-child(5) {
	transition-delay:.5s
}
input:-webkit-autofill {
	-webkit-box-shadow:0 0 0 1000px #FFF inset
}
@media(max-width:600px) {
	#form-container.expand {
	height:100%;
	width:100%;
	max-width:100%;
	overflow:initial;
	overflow-x:hidden;
	bottom:0
}
h1 {
	font-size:300%
}
.icon:hover::before {
	-webkit-animation:none;
	animation:none
}
.for.........完整代码请登录后点击上方下载按钮下载查看