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-delay: 0.9s; transition-delay: 0.9s; } #window .page { position: absolute; top: 20px; left: 0; right: 0; bottom: 0; overflow: hidden; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); background: #444; background-image: -moz-linear-gradient(bottom, #444444, #333333); background-image: -webkit-linear-gradient(bottom, #444444, #333333); background-image: linear-gradient(to top, #444444, #333333); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; padding: 60px; } #window .page-back { text-align: center; -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } #window .page-back .page-content { opacity: 0; } #window .page-back .avatar { height: 150px; width: 150px; border: 5px solid #FFF; margin: 30px auto 40px auto; display: block; opacity: 0; -moz-transform: scale(0.1); -ms-transform: scale(0.1); -webkit-transform: scale(0.1); transform: scale(0.1); -moz-border-radius: 1000px; -webkit-border-radius: 1000px; border-radius: 1000px; } #window .page-back .welcome { font-size: 22px; margin-bottom: 40px; } #window .page-back .welcome, #window .page-back .perspective { opacity: 0; -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); } #window .input-row { margin: 0 0 30px; } #window .input-row:last-of-type { margin-bottom: 0; } #window .perspective { -moz-perspective: 1000px; -webkit-perspective: 1000px; perspective: 1000px; } #window .label { font-family: sans-serif; text-transform: uppercase; font-size: 12px; margin: 0 0 10px 0; color: #FFF; display: block; cursor: pointer; } #window .input { padding: 0 15px; height: 40px; line-height: 40px; outline: none; border: 0; background: #FFF; display: block; width: 100%; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } #window .input:focus, #window .input.fyll-focus { -moz-box-shadow: 0 0 0 3px #d85c89; -webkit-box-shadow: 0 0 0 3px #d85c89; box-shadow: 0 0 0 3px #d85c89; } #window .button { height: 50px; line-height: 50px; padding: 0 20px; margin: 0; text-align: center; color: #FFF; border: 0; display: block; width: 100%; outline: none; cursor: pointer; overflow: hidden; font-size: 17px; background: #D85C89; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background-image: -moz-linear-gradient(bottom, #d85c89, #e7779f); background-image: -webkit-linear-gradient(bottom, #d85c89, #e7779f); background-image: linear-gradient(to top, #d85c89, #e7779f); -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4), 0 0 4px rgba(0, 0, 0, 0.5); -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4), 0 0 4px rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4), 0 0 4px rgba(0, 0, 0, 0.5); -moz-transition-duration: 0.1s; -o-transition-duration: 0.1s; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-transform-origin: bottom 50%; -ms-transform-origin: bottom 50%; -webkit-transform-origin: bottom 50%; transform-origin: bottom 50%; -moz-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #window .button i { margin-right: 10px; } #window .button:active, #window .button.fyll-focus { background: #D85C89; background-image: -moz-linear-gradient(bottom, #d85c89, #d85c89); background-image: -webkit-linear-gradient(bottom, #d85c89, #d85c89); background-image: linear-gradient(to top, #d85c89, #d85c89); -moz-transform: rotateX(20deg); -ms-transform: rotateX(20deg); -webkit-transform: rotateX(20deg); transform: rotateX(20deg); } #window .button.inline { width: auto; display: inline-block; } #window .button.load-btn .default, #window .button.load-btn .load-state { -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } #window .button.load-btn .load-state { position: absolute; top: -50px; left: 0; right: 0; height: 100%; text-align: center; line-height: 50px; pointer-events: none; } #window .button.load-btn .load-state .ball { height: 10px; width: 10px; margin-right: 10px; background: #FFF; display: inline-block; -moz-border-radius: 1000px; -webkit-border-radius: 1000px; border-radius: 1000px; -webkit-animation: ballBounce 0.3s alternate infinite; -moz-animation: ballBounce 0.3s alternate infinite; animation: ballBounce 0.3s alternate infinite; -webkit-animation-timing-function: cubic-bezier(0.2, 0.4, 0.3, 1); -moz-animation-timing-function: cubic-bezier(0.2, 0.4, 0.3, 1); animation-timing-function: cubic-bezier(0.2, 0.4, 0.3, 1); -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #window .button.load-btn .load-state .ball:nth-child(2n) { -webkit-animation-delay: 0.05s; -moz-animation-delay: 0.05s; animation-delay: 0.05s; } #window .button.load-btn .load-state .ball:nth-child(3n) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s; } #window .button.load-btn .load-state .ball:last-child { margin-right: 0; } #window .button.load-btn.done .ball { opacity: 0; } #window .button.load-btn.loading .default { -moz-transform: translateY(50px); -ms-transform: translateY(50px); -webki.........完整代码请登录后点击上方下载按钮下载查看
网友评论0