css+js实现炫酷银行卡申请表单填表效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+js实现炫酷银行卡申请表单填表效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <style>
        html,body {
        padding:0;
        margin:0;
        font-family:'lucida grande','lucida sans unicode',lucida,helvetica,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif;
        font-size:16px;
        color:#000000;
}
body {
        background-repeat:no-repeat;
        background-size:cover;
        background-attachment:fixed;
}
@keyframes animtran {
        from {
        transform:rotateZ(0deg);
}
to {
        transform:rotateZ(360deg);
}
}@keyframes animtrans {
        from {
        transform:rotateZ(360deg);
}
to {
        transform:rotateZ(0deg);
}
}@-webkit-keyframes animtran {
        from {
        transform:rotateZ(0deg);
}
to {
        transform:rotateZ(360deg);
}
}@-webkit-keyframes animtrans {
        from {
        transform:rotateZ(360deg);
}
to {
        transform:rotateZ(0deg);
}
}#advert {
        width:300px;
        height:300px;
        margin:10% auto;
        position:relative;
}
#advert .bg1 {
        width:260px;
        height:260px;
        position:absolute;
        top:20px;
        left:20px;
        z-index:10;
}
#advert .bg1 div {
        width:260px;
        height:260px;
        border:#ccc 1px solid;
        border-radius:15em;
        position:relative;
        animation:animtran 16s linear infinite;
        -webkit-animation:animtran 16s linear infinite;
}
#advert .bg1 img {
        width:50px;
        position:absolute;
        animation:animtrans 16s linear infinite;
        -webkit-animation:animtrans 16s linear infinite;
}
#advert .bg1 .icon01 {
        bottom:25px;
        left:7px;
}
#advert .bg1 .icon02 {
        top:80px;
        left:-24px;
}
#advert .bg1 .icon03 {
        top:-7px;
        left:44px;
}
#advert .bg1 .icon04 {
        top:-7px;
        right:44px;
}
#advert .bg1 .icon05 {
        top:80px;
        right:-24px;
}
#advert .bg1 .icon06 {
        bottom:25px;
        right:7px;
}
#advert .bg1 .icon07 {
        bottom:-25px;
        left:105px;
}
#advert .bg2 {
        width:180px;
        height:180px;
        position:absolute;
        top:60px;
        left:60px;
        z-index:9;
}
#advert .bg2 div {
        width:180px;
        height:180px;
        border:#e376bd 1px solid;
        border-radius:15em;
        position:relative;
        animation:animtrans 12s linear infinite;
        -webkit-animation:animtrans 12s linear infinite;
}
#advert .bg2 span {
        display:inline-block;
        background-color:#FFFFFF;
        overflow:hidden;
        border-radius:15em;
        position:absolute;
        animation:animtran 6s linear infinite;
        -webkit-animation:animtran 6s linear infinite;
}
#advert .bg2 img {
        padding:10px;
        display:block;
}
#advert .bg2 .icon08 {
        top:10px;
        left:13px;
}
#advert .bg2 .icon09 {
        bottom:0;
        left:7px;
}
#advert .bg2 .icon10 {
        bottom:40px;
        right:-15px;
}
#advert .bg3 {
        width:100px;
        height:100px;
        position:absolute;
        top:100px;
        left:100px;
        z-index:8;
}
#advert .bg3 div {
        width:100px;
        height:100px;
        border:#e077bf 1px dotted;
        border-radius:15em;
        position:relative;
        animation:animtran 8s linear infinite;
        -webkit-animation:animtran 8s linear infinite;
}
#advert .bg3 span {
        display:inline-block;
        background-color:#FFFFFF;
        overflow:hidden;
        border-radius:15em;
        position:absolute;
        animation:animtrans 4s linear infinite;
        -webkit-animation:animtrans 4s linear infinite;
}
#advert .bg3 img {
        padding:10px;
        display:block;
}
#advert .bg3 .icon11 {
        top:-14px;
        right:0px;
}
#advert .bg3 .icon12 {
        bottom:-13px;
        right:10px;
}
#advert .content {
        width:130px;
        height:50px;
        background:linear-gradient(to right,#fa71ad,#c77dd1);
        position:absolute;
        z-index:11;
        left:85px;
        top:125px;
        border-radius:5px;
        text-align:center;
        line-height:50px;
        color:#fff;
        font-size:20px;
        box-shadow:#f6f6f6 8px 8px 8px 4px;
        cursor:pointer;
}
@keyframes ani-one {
        from {
        left:260px;
}
to {
        left:16px;
}
}@keyframes ani-two {
        from {
        left:260px;
}
to {
        left:70px;
}
}@keyframes ani-three {
        from {
        top:0;
        left:0;
}
to {
        top:8px;
        left:8px;
}
}@keyframes ani-four {
        0% {
        width:130px;
        height:50px;
        left:85px;
        top:125px;
        box-shadow:#f6f6f6 8px 8px 8px 4px;
        border:#eee 0px solid;
        margin-left:0;
}
100% {
        width:259px;
        height:333px;
        left:50%;
        top:0px;
        box-shadow:#FFFFFF 0 0 0 0;
        border:#eee 1px solid;
        margin-left:-130px;
}
}@keyframes ani-five {
        from {
        opacity:1;
}
to {
        opacity:0;
}
}@keyframes ani-six {
        from {
        left:260px;
}
to {
        left:0;
}
}@-webkit-keyframes ani-one {
        from {
        left:260px;
}
to {
        left:16px;
}
}@-webkit-keyframes ani-two {
        from {
        left:260px;
}
to {
        left:70px;
}
}@-webkit-keyframes ani-three {
        from {
        top:0;
        left:0;
}
to {
        top:8px;
        left:8px;
}
}@-webkit-keyframes ani-four {
        0% {
        width:130px;
        height:50px;
        left:85px;
        top:125px;
        box-shadow:#f6f6f6 8px 8px 8px 4px;
        border:#eee 0px solid;
        margin-left:0;
}
100% {
        width:259px;
        height:333px;
        left:50%;
        top:0px;
        box-shadow:#FFFFFF 0 0 0 0;
        border:#eee 1px solid;
        margin-left:-130px;
}
}.........完整代码请登录后点击上方下载按钮下载查看