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

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

代码语言：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 {
	curs.........完整代码请登录后点击上方下载按钮下载查看