css3d动画案例,CSS3动画animation小案例-各种进度条效果

CSS

语言：

CSSSCSS

确定

body {background: #161616;}

* {margin: 0; padding: 0; outline: none;}

.container {width: 960px; margin: 0 auto; overflow: hidden;}

/* PROGRESS BAR */

#progress {

list-style:none;

width:125px;

margin:0 auto;

padding-top:50px;

padding-bottom:50px;

}

#progress li {

float:left;

position:relative;

width:15px;

height:15px;

border:1px solid #fff;

border-radius:50px;

margin-left:10px;

border-left:1px solid #111;

border-top:1px solid #111;

border-right:1px solid #333;

border-bottom:1px solid #333;

background:#000;

}

#progress li:first-child { margin-left:0; }

.running .ball {

background-color:#2187e7;

background-image: linear-gradient(90deg, #2187e7 25%, #a0eaff);

width:15px;

height:15px;

border-radius:50px;

transform:scale(0);

animation:loading 1s linear forwards;

}

.running .pulse {

width:15px;

height:15px;

border-radius:30px;

border: 1px solid #00c6ff;

box-shadow: 0 0 5px #00c6ff;

position:absolute;

top:-1px;

left:-1px;

transform:scale(0);

animation:pulse 1s ease-out;

}

#layer1 { animation-delay:0.5s; }

#layer2 { animation-delay:1s; }

#layer3 { animation-delay:1.5s; }

#layer4 { animation-delay:2s; }

#layer5 { animation-delay:2.5s; }

#layer7 { animation-delay:1.5s; }

#layer8 { animation-delay:2s; }

#layer9 { animation-delay:2.5s; }

#layer10 { animation-delay:3s; }

#layer11 { animation-delay:3.5s; }

@keyframes loading {

0%{transform:scale(0,0);}

100%{transform:scale(1,1);}

}

@keyframes pulse {

0% {transform: scale(0);opacity: 0;}

10% {transform: scale(1);opacity: 0.5;}

50% {transform: scale(1.75);opacity: 0;}

100% {transform: scale(0);opacity: 0;}

}

/* Full Width Progress Bar */

#content {

width:100%;

height:5px;

margin:50px auto;

background:#000;

}

.fullwidth .expand {

width:100%;

height:1px;

margin:2px 0;

background:#2187e7;

position:absolute;

box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7);

animation:fullexpand 10s ease-out;

}

@keyframes fullexpand {

0% { width:0px;}

100%{ width:100%;}

}

/* Loader Bar */

#loadbar {

list-style:none;

width:140px;

margin:0 auto;

}

#loadbar li {

float:left;

position:relative;

width:11px;

height:26px;

margin-left:1px;

border-left:1px solid #111;

border-top:1px solid #111;

border-right:1px solid #333;

border-bottom:1px solid #333;

background:#000;

}

#loadbar li:first-child { margin-left:0; }

.ins .bar {

background-color:#2187e7;

background-image: linear-gradient(45deg, #2187e7 25%, #a0eaff);

width:11px;

height:26px;

opacity:0;

animation:fill .5s linear forwards;

}

#layerFill1 { animation-delay:0.5s; }

#layerFill2 { animation-delay:1s; }

#layerFill3 { animation-delay:1.5s; }

#layerFill4 { animation-delay:2s; }

#layerFill5 { animation-delay:2.5s; }

#layerFill6 { animation-delay:3s; }

#layerFill7 { animation-delay:3.5s; }

#layerFill8 { animation-delay:4s; }

#layerFill9 { animation-delay:4.5s; }

#layerFill10 { animation-delay:5s; }

@keyframes fill {

0%{ opacity:0; }

100%{ opacity:1; }

}