css+svg实现扇形步骤提示条效果代码-html代码-BFW代码库

css+svg实现扇形步骤提示条效果代码

代码语言：html

代码描述：css+svg实现扇形步骤提示条效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.2.8.3.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300'>
  
<style>
@namespace svg url(http://www.w3.org/2000/svg);
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  max-height: 100%;
  margin-left: 300px;
}

body {
  display: flex;
  padding: 1.5rem;
  margin: 0;
  font-family: "Open Sans", arial, sans-serif;
  font-size: 1em;
  line-height: 1.5em;
}

svg {
  overflow: hidden;
  width: 100%;
  max-height: 100%;
}

#cie-exam-cycle {
  /*[id^="seg-"] {
      transform-origin: 50% 50%;
      transform: scale(1);
  }*/
}
#cie-exam-cycle .segment {
  fill: #0081c6;
  stroke: #ffffff;
  stroke-width: 2;
}
#cie-exam-cycle #seg-1 .segment {
  fill: #0081c6;
}
#cie-exam-cycle #seg-2 .segment {
  fill: #4694d0;
}
#cie-exam-cycle #seg-3 .segment {
  fill: #88b2df;
}
#cie-exam-cycle #seg-4 .segment {
  fill: #adc8e9;
}
#cie-exam-cycle #seg-5 .segment {
  fill: #c7d8ef;
}
#cie-exam-cycle #seg-6 .segment {
  fill: #eef2fa;
}
#cie-exam-cycle a,
#cie-exam-cycle .segment,
#cie-exam-cycle .circle,
#cie-exam-cycle .step-description,
#cie-exam-cycle .step-detail {
  transition: all 250ms ease-in-out;
}
#cie-exam-cycle a {
  transform-origin: 50% 50%;
  transform: scale(1);
}
#cie-exam-cycle a:hover .segment, #cie-exam-cycle a:focus .segment {
  fill: #c60036 !important;
  filter: url(#dropshadow);
}
#cie-exam-cycle a:hover .circle, #cie-exam-cycle a:focus .circle {
  fill: rgba(0, 0, 0, 0.3);
}
#cie-exam-cycle a:hover .step-description,
#cie-exam-cycle a:hover .step-detail, #cie-exam-cycle a:focus .step-description,
#cie-exam-cycle a:focus .step-detail {
  fill: #fff;
}
#cie-exam-cycle .circle {
  fill: #fff;
  font-size: 4rem;
  baseline-shift: -14%;
}
#cie-exam-cycle .number {
  font-size: 2rem;
}
#cie-exam-cycle .step-description {
  font-weight: 600;
}
#cie-exam-cycle .step-detail {
  font-size: 0.8rem;
}
#cie-exam-cycle .active .segment {
  fill: #c60036 !important;
}
#cie-exam-cycle .active .circle {
  fill: rgba(0, 0, 0, 0.3);
}
#cie-exam-cycle .active .step-description {
  fill: #fff;
}

.center-h-v {
  .........完整代码请登录后点击上方下载按钮下载查看