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