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; overflow: hidden; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } #timeline .timeline-item .timeline-icon i { position: relative; top: 8px; left: 8px; color: #00a849; font-size: 24px; } #timeline .timeline-item .timeline-content { width: 45%; padding: 10px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } #timeline .timeline-item .timeline-content.right { left: 50px; position: relative; } #timeline .timeline-item.exam-success .timeline-content { color: #e63760; font-weight: bold; } #timeline .timelin.........完整代码请登录后点击上方下载按钮下载查看
网友评论0