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

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

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