jquery+fyll实现一个表单自动填充提交效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery+fyll实现一个表单自动填充提交效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8" />
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
<style>
html, body {
height: 100%;
}
body {
background: url(//repo.bfw.wiki/bfwrepo/image/607aa1b0d81d0.png) no-repeat 0px 0px;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-attachment: fixed;
/* background-image: -moz-radial-gradient(ellipse closest-side, #ffffff, #d4e2af);
background-image: -webkit-radial-gradient(ellipse closest-side, #ffffff, #d4e2af);
background-image: radial-gradient(ellipse closest-side, #ffffff, #d4e2af); */
-moz-perspective: 1000px;
-webkit-perspective: 1000px;
perspective: 1000px;
font-family: 'Open Sans';
font-weight: 300;
}
*, *::after, *::before {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#window {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: 350px;
width: 450px;
color: #FFF;
-webkit-animation: 1.5s window ease-in-out backwards;
-moz-animation: 1.5s window ease-in-out backwards;
animation: 1.5s window ease-in-out backwards;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition-property: height, width;
-o-transition-property: height, width;
-webkit-transition-property: height, width;
transition-property: height width;
}
#window, #window .page, #window .page-content {
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-webkit-transition-duration: 1s;
transition-duration: 1s;
}
#window.flip {
height: 460px;
width: 350px;
}
#window.flip .page-front {
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
#window.flip .page-back {
-moz-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
}
#window.flip .page-back .page-content {
opacity: 1;
}
#window.flip .page-back .avatar, #window.flip .page-back .welcome, #window.flip .page-back .perspective {
opacity: 1;
-moz-transform: none;
-ms-transform: none;
-webkit-transform: none;
transform: none;
-moz-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
}
#window.flip .page-back .avatar {
-moz-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
}
#window.flip .page-back .welcome {
-moz-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
}
#window.flip .page-back .perspective {
-moz-transition-delay: 0.9s;
-o-transition-delay: 0.9s;
-webkit-transition-de.........完整代码请登录后点击上方下载按钮下载查看
网友评论0