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