js实现一个带进度条的问卷调查答题页面效果代码
代码语言:html
所属分类:布局界面
代码描述:js实现一个带进度条的问卷调查答题页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
background-color: #131319;
font-family: monospace;
margin: 0;
}
.form-c {
height: 500px;
width: 400px;
padding: 15px;
border-radius: 12px;
background-color: #1c1c23;
position: relative;
}
.progressBar {
height: 40px;
width: calc(100% - 60px);
padding: 10px;
background-color: #131319;
border-radius: 6px;
position: absolute;
bottom: 15px;
right: 50%;
transform: translate(50%, 0%);
display: flex;
flex-direction: row;
align-items: center;
overflow: hidden;
}
.bar {
height: 11px;
width: 100%;
background: #e6fff4;
border-radius: 100px;
}
.bar-w {
transition: all 0.6s ease-in-out;
height: 10.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0