进度条 多行 css,一款纯CSS制作的多步骤进度条

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);

@-webkit-keyframes part {

0%, 100% {

box-shadow: 0 0 0 0 #fff, 0 0 0 0 #66bd6c, 0 0 0 0 #66bd6c;

}

50% {

box-shadow: 0 0 0 2px #ffffff, 0 0 3px 2px #66bd6c, 0 0 9px 0 #66bd6c;

}

}

@-moz-keyframes part {

0%, 100% {

box-shadow: 0 0 0 0 #fff, 0 0 0 0 #66bd6c, 0 0 0 0 #66bd6c;

}

50% {

box-shadow: 0 0 0 2px #ffffff, 0 0 3px 2px #66bd6c, 0 0 9px 0 #66bd6c;

}

}

@keyframes part {

0%, 100% {

box-shadow: 0 0 0 0 #fff, 0 0 0 0 #66bd6c, 0 0 0 0 #66bd6c;

}

50% {

box-shadow: 0 0 0 2px #ffffff, 0 0 3px 2px #66bd6c, 0 0 9px 0 #66bd6c;

}

}

body {

background-color: #CBE9E4;

height: 100vh;

overflow: hidden;

font-family: "Roboto", sans-serif;

}

.timeline {

height: 100vh;

}

.w-table {

display: table;

width: 100%;

height: 100%;

}

.w-table-cell {

display: table-cell;

vertical-align: middle;

}

.timeline_title {

color: #525252;

text-align: center;

font-weight: 100;

letter-spacing: 1px;

font-size: 45px;

}

.timeline_card {

position: relative;

width: 320px;

height: 200px;

background-color: #fff;

margin: 30px auto;

padding: 20px;

overflow: hidden;

box-shadow: 0 9px 20px 0px rgba(133, 144, 166, 0.1);

}

.timeline_label {

cursor: pointer;

position: relative;

width: 28%;

float: left;

text-align: right;

color: #909090;

font-weight: 100;

text-transform: uppercase;

padding-right: 5.33333%;

letter-spacing: 1px;

}

.timeline_label:before {

content: "";

position: absolute;

z-index: 1;

right: 0;

top: 20px;

width: 8px;

height: 8px;

border-radius: 50%;

background-color: #fff;

border: 2px #66bd6c solid;

}

.timeline_info {

position: absolute;

right: 0;

left: 0;

top: 45px;

bottom: 0;

text-align: center;

font-size: 40px;

color: #eee;

opacity: 0;

font-weight: 100;

letter-spacing: 1px;

-moz-transition: all 0.3s;

-o-transition: all 0.3s;

-webkit-transition: all 0.3s;

transition: all 0.3s;

-moz-transform: translateY(100%);

-ms-transform: translateY(100%);

-webkit-transform: translateY(100%);

transform: translateY(100%);

}

.timeline_line {

position: absolute;

right: 0;

left: 0;

top: 45px;

border-bottom: 2px #eee solid;

}

.timeline_line:before {

content: "";

position: absolute;

width: 0;

height: 2px;

background-color: #66bd6c;

-moz-transition: all 0.3s;

-o-transition: all 0.3s;

-webkit-transition: all 0.3s;

transition: all 0.3s;

}

.timeline_input[type=radio] {

display: none;

}

.timeline_input[type=radio]:checked + .timeline_label {

color: #525252;

}

.timeline_input[type=radio]:checked + .timeline_label:before {

background-color: #66bd6c;

-moz-animation: part 1.6s infinite ease-in-out;

-webkit-animation: part 1.6s infinite ease-in-out;

animation: part 1.6s infinite ease-in-out;

}

.timeline_input[type=radio]:checked + .timeline_label + .timeline_info {

-moz-transform: translateY(30%);

-ms-transform: translateY(30%);

-webkit-transform: translateY(30%);

transform: translateY(30%);

opacity: 1;

}

.timeline_input[type=radio]:checked:nth-of-type(1) + .timeline_label + .timeline_info + .timeline_input + .timeline_label + .timeline_info + .timeline_input + .timeline_label + .timeline_info + .timeline_line:before {

width: 33%;

}

.timeline_input[type=radio]:checked:nth-of-type(2) + .timeline_label + .timeline_info + .timeline_input + .timeline_label + .timeline_info + .timeline_line:before {

width: 63%;

}

.timeline_input[type=radio]:checked:nth-of-type(3) + .timeline_label + .timeline_info + .timeline_line:before {

width: 100%;

}

.rabbit {

width: 50px;

height: 50px;

position: absolute;

bottom: 20px;

right: 20px;

z-index: 3;

fill: #fff;

}