bootstrap竖形步骤条进度条效果代码
代码语言:html
所属分类:进度条
代码描述:bootstrap竖形步骤条进度条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
body {
background: #202230;
}
#timeline .timeline-item:after, #timeline .timeline-item:before {
content: "";
display: block;
width: 100%;
clear: both;
}
*, *:before, *:after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#timeline {
width: 100%;
margin: 30px auto;
position: relative;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#timeline:before {
content: "";
height: 90%;
border-right: dashed 1px #5f6689;
top: 0;
position: absolute;
left: 20px;
}
#timeline .timeline-item {
margin-bottom: 50px;
position: relative;
}
#timeline .timeline-item .timeline-icon {
background: #1b1d27;
width: 40px;
height: 40px;
position: absolute;
top: 0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0