css线加点的进度,CSS实现的带进度显示的选择按钮

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Dosis:400,800);

body {

background-color: #e9e9e9;

}

main {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

width: 100%;

text-align: center;

}

input {

display: none;

}

label {

display: block;

position: relative;

width: 250px;

margin: 0 auto;

padding: 12px 36px;

border-radius: 60px;

font-family: 'Dosis', sans-serif;

font-size: 22px;

color: white;

background-color: #3299BB;

z-index: 1;

outline: none;

cursor: pointer;

-webkit-transform: translateZ(0);

transform: translateZ(0);

-webkit-transition: background-color 0.2s ease-out, -webkit-transform 0.2s;

transition: background-color 0.2s ease-out, -webkit-transform 0.2s;

transition: transform 0.2s, background-color 0.2s ease-out;

transition: transform 0.2s, background-color 0.2s ease-out, -webkit-transform 0.2s;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

@media (max-width: 400px) {

label {

width: 200px;

padding: 12px 24px;

font-size: 16px;

}

}

label:before,

label:after {

content: "";

position: absolute;

top: calc(100% + 12px);

right: 0;

left: 0;

margin: auto;

width: 0;

height: 12px;

z-index: -1;

border-radius: 60px;

-webkit-transform: translateZ(0);

transform: translateZ(0);

}

label:before {

background-color: #78c2db;

}

label:after {

left: 12px;

right: auto;

opacity: 0;

background-color: #277893;

-webkit-transition: opacity 0s 0.3s;

transition: opacity 0s 0.3s;

}

label span:last-child {

display: none;

}

input:checked + label {

background-color: #277893;

-webkit-animation: btn-complete 0.2s 2.2s ease-out forwards;

animation: btn-complete 0.2s 2.2s ease-out forwards;

}

input:checked + label:before {

-webkit-animation: bounce-in 0.2s ease-out forwards, bounce-out 0.2s 2s ease-out forwards, check-in 0.2s 2.3s ease-out forwards;

animation: bounce-in 0.2s ease-out forwards, bounce-out 0.2s 2s ease-out forwards, check-in 0.2s 2.3s ease-out forwards;

}

input:checked + label:after {

opacity: 1;

z-index: 3;

-webkit-animation: fill-up 1.49s 0.31s linear forwards, bounce-out 0.2s 2s ease-out forwards;

animation: fill-up 1.49s 0.31s linear forwards, bounce-out 0.2s 2s ease-out forwards;

}

input:checked + label span:first-child {

display: none;

}

input:checked + label span:last-child {

display: inline;

}

@-webkit-keyframes bounce-in {

50% {

width: 100%;

}

100% {

width: calc(100% - 12px * 2);

}

}

@keyframes bounce-in {

50% {

width: 100%;

}

100% {

width: calc(100% - 12px * 2);

}

}

@-webkit-keyframes bounce-out {

0% {

left: 0;

right: 0;

width: calc(100% - 12px * 2);

}

50% {

width: 100%;

}

100% {

left: 0;

right: 0;

width: 0;

}

}

@keyframes bounce-out {

0% {

left: 0;

right: 0;

width: calc(100% - 12px * 2);

}

50% {

width: 100%;

}

100% {

left: 0;

right: 0;

width: 0;

}

}

@-webkit-keyframes fill-up {

20% {

width: 40%;

}

65% {

width: 50%;

}

90% {

width: 60%;

}

100% {

width: calc(100% - 12px * 2);

}

}

@keyframes fill-up {

20% {

width: 40%;

}

65% {

width: 50%;

}

90% {

width: 60%;

}

100% {

width: calc(100% - 12px * 2);

}

}

@-webkit-keyframes btn-complete {

100% {

color: #FF3333;

background-color: #FF3333;

}

}

@keyframes btn-complete {

100% {

color: #FF3333;

background-color: #FF3333;

}

}

@-webkit-keyframes check-in {

0% {

top: -22px;

bottom: 0;

width: 12px;

height: 24px;

margin: auto;

background-color: transparent;

border-radius: 0;

box-shadow: white 6px 6px 0 2px;

z-index: 2;

opacity: 0;

-webkit-transform: scale(0.1) rotate(45deg);

transform: scale(0.1) rotate(45deg);

}

50% {

-webkit-transform: scale(2) rotate(45deg);

transform: scale(2) rotate(45deg);

}

100% {

top: -22px;

bottom: 0;

width: 12px;

height: 24px;

margin: auto;

background-color: transparent;

border-radius: 0;

box-shadow: white 6px 6px 0 2px;

z-index: 2;

opacity: 1;

-webkit-transform: scale(1) rotate(45deg);

transform: scale(1) rotate(45deg);

}

}

@keyframes check-in {

0% {

top: -22px;

bottom: 0;

width: 12px;

height: 24px;

margin: auto;

background-color: transparent;

border-radius: 0;

box-shadow: white 6px 6px 0 2px;

z-index: 2;

opacity: 0;

-webkit-transform: scale(0.1) rotate(45deg);

transform: scale(0.1) rotate(45deg);

}

50% {

-webkit-transform: scale(2) rotate(45deg);

transform: scale(2) rotate(45deg);

}

100% {

top: -22px;

bottom: 0;

width: 12px;

height: 24px;

margin: auto;

background-color: transparent;

border-radius: 0;

box-shadow: white 6px 6px 0 2px;

z-index: 2;

opacity: 1;

-webkit-transform: scale(1) rotate(45deg);

transform: scale(1) rotate(45deg);

}

}