js实现一个分步骤一步一步注册登录表单效果代码
代码语言:html
所属分类:表单美化
代码描述:js实现一个分步骤一步一步注册登录表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
<style>
body {
background: #33cc33;
font-family: sans-serif;
}
body fieldset {
box-shadow: 0 8px 10px #29a329;
}
body.error {
background: #f04000;
}
body.error fieldset {
box-shadow: 0 8px 10px #bd3200;
}
h1, h2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
}
h1 {
top: 24px;
color: white;
font-size: 12px;
}
h2 {
top: 44px;
color: white;
font-size: 10px;
opacity: 0.7;
}
ul.items {
position: absolute;
width: 30px;
height: auto;
top: 50%;
left: -60px;
transform: translateY(-50%);
}
ul.items li {
width: 8px;
height: 8px;
margin: 10px 0;
background: white;
border-radius: 50%;
opacity: 0.4;
cursor: pointer;
}
ul.items li.active {
opacity: 1;
}
form {
position: absolute;
width: 300px;
height: 60px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
form fieldset {
position: absolute;
width: 300px;
height: 60px;
background: white;
border-radius: 3px;
opacity: 0;
transform: scale(0.2);
transi.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0