android 锥形进度条,CSS3 锥形发光进度条

CSS

语言：

CSSSCSS

确定

.progress-bar {

height: 3px;

width: 100%;

position: relative;

z-index: 10;

background-color: #55708d;

}

.progress-bar .progress {

position: relative;

height: 100%;

background-color: #cfd6dd;

transition: width 0.5s ease-out;

border-radius: 0px 2px 2px 0px;

}

.progress-bar .glow {

width: 60px;

max-width: 100%;

height: 100%;

float: right;

}

.progress-bar .glow::before,

.progress-bar .glow::after {

content: '';

display: block;

position: relative;

border-radius: 0px 2px 2px 0px;

}

.progress-bar .glow::before {

background: transparent;

height: 100%;

box-shadow: 0px 0px 10px #cfd6dd, 0px 0px 10px #04bfff;

z-index: -5;

}

.progress-bar .glow::after {

background: linear-gradient(to right, #3d5980 0%, transparent 100%);

height: calc(100% + 10px + 10px);

width: calc(100% + 10px);

top: -10px;

left: -10px;

z-index: -3;

}

.label {

font-family: Poppins;

color: #cfd6dd;

text-shadow: 0px 0px 2px #cfd6dd;

font-size: 24px;

}

.fill-1 {

animation: fill-1 0.5s ease-out 0s;

animation-fill-mode: forwards;

width: 0%;

}

.fill-2 {

animation: fill-2 0.5s ease-out 0.5s;

animation-fill-mode: forwards;

width: 0%;

}

.fill-3 {

animation: fill-3 0.5s ease-out 1s;

animation-fill-mode: forwards;

width: 0%;

}

@keyframes fill-1 {

0% {

width: 0%;

}

100% {

width: 70%;

}

}

@keyframes fill-2 {

0% {

width: 0%;

}

100% {

width: 40%;

}

}

@keyframes fill-3 {

0% {

width: 0%;

}

100% {

width: 90%;

}

}

.label.one {

animation: label 0.5s ease-out 0s;

animation-fill-mode: forwards;

opacity: 0;

}

.label.two {

animation: label 0.5s ease-out 0.5s;

animation-fill-mode: forwards;

opacity: 0;

}

.label.three {

animation: label 0.5s ease-out 1.0s;

animation-fill-mode: forwards;

opacity: 0;

}

@keyframes label {

0% {

opacity: 0;

transform: translateY(10px);

}

100% {

opacity: 0.9;

transform: translateY(0);

}

}

html,

body {

width: 100%;

height: 100%;

margin: 0;

background-color: #3d5980;

box-sizing: border-box;

}

body {

padding: 60px 20px;

}

body .wrapper {

max-width: 600px;

margin: 0 auto;

}

body .wrapper .container {

padding: 20px;

}

body .wrapper .container > * {

margin-bottom: 10px;

}