fort.js实现表单输入进度效果代码
代码语言:html
所属分类:进度条
代码描述:fort.js实现表单输入进度效果代码,当你输入表单的元素,上面进度条显示填写的表单进度条。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <!--suppress ALL --> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans:300); * { margin: 0; padding: 0; box-sizing: border-box; } body { text-align: center; background: #fff; color: #7b8993; font: 300 87.5%/1.5em 'Open Sans', sans-serif; } .form-wrapper { padding-top: 10%; border-radius: 2px; margin: 50px auto; position: relative; width: 375px; } form { padding: 30px 20px 0; } .form-item { margin-bottom: 10px; width: 100%; } .form-item input { border: 1px solid #ccc; border-radius: 2px; color: #000; font-family: 'Open Sans', sans-serif; font-size: 1em; height: 50px; padding: 0 16px; transition: background 0.3s ease-in-out; width: 100%; } .form-item input:focus { outline: none; border-color: #9ecaed; box-shadow: 0 0 10px #9ecaed; } .button-panel { margin: 20px 0 0; width: 100%; padding-bottom: 10px; } .button-panel .button { -webkit-appearance: none; background: #48639C; border: none; border-radius: 2px; color: #fff; cursor: pointer; height: 50px; font-family: 'Open Sans', sans-serif; font-size: 1.2em; letter-spacing: 0.05em; text-align: center; text-transform: uppercase; transition: background 0.3s ease-in-out; width: 100%; } .button:hover { background: #304f9a; } @media only screen and (max-width: 320px) { .form-wrapper { padding-top: 10%; border-radius: 2px; margin: 50px auto; position: relative; width: 320px; } } .view { text-align: center; text-decoration: none; color: #7b8993; padding-top: 10px; } .ref { text-align: center; text-decoration: underline; color: #7b8993; padding-top: 8px; font-size: 16px; } .ref:hover { text-align: center; color: #009dff; text-decoration: underline; -webkit-animation: hue 60s infinite linear; padding-top: 8px; font-size: 16px; } ul li { display: inline-block; list-style-type: none; text-align: center; } .main-title { color: #000; text-align: center; padding-bottom: 10px; } .lil { display: inline-block; } nav li a { color: #369; padding-right: 1em; } </style> </head> <body> <div class="form-wrapper"> <h1 class="main-title">Fort.js</h1> <form class="fort"> <div class="form-item"> <input type="text" placeholder="First Name" id=&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0