css的增长动画,css3扩散动画（原创）

html,body {

background:#000;

}

@keyframes ring_bound {

from {

left:40px;

top:40px;

width:10px;

height:10px;

}

to {

left:0px;

top:0px;

width:100px;

height:100px;

}

}@keyframes beautiful_bound {

from {

left:20px;

top:20px;

width:10px;

height:10px;

}

to {

left:0px;

top:0px;

width:50px;

height:50px;

}

}.shineCircle {

width:40px;

height:20px;

border:1px solid rgba(18,220,232,.25);

border-radius:50%;

background:radial-gradient(rgba(1,49,96,0.3) 20%,rgba(1,49,96,1) 100%);

position:absolute;

left:30px;

top:70px;

/*// transition:1s;

*/

animation:ring_bound5 2s linear infinite;

}

/*.shineCircle2 {

*/

/* width:80px;

*/

/* height:40px;

*/

/* border:1px solid rgba(18,220,232,.25);

*/

/* border-radius:50%;

*/

/* background:radial-gradient(rgba(1,49,96,0.1) 30%,rgba(1,49,96,1) 100%);

*/

/* position:absolute;

*/

/* left:10px;

*/

/* top:50px;

*/

/* animation:ring_bound2 2s linear infinite;

*/

/*

}

*/

@keyframes ring_bound5 {

0% {

left:25px;

top:70px;

width:50px;

height:20px;

}

100% {

left:20px;

top:65px;

width:60px;

height:30px;

}

}@keyframes ring_bound2 {

0% {

left:15px;

top:63px;

width:70px;

height:32px;

}

100% {

left:10px;

top:60px;

width:80px;

height:40px;

}

}@keyframes ring_bound3 {

0% {

left:10px;

top:60px;

width:80px;

height:40px;

}

100% {

left:0px;

top:50px;

width:100px;

height:60px;

}

}.gis-live {

width:200px;

height:200px;

position:relative;

border:1px #000 solid;

}

.shineCircle2 {

width:60px;

height:30px;

border:1px solid rgba(18,220,232,.25);

border-radius:50%;

background:radial-gradient(rgba(1,49,96,0.1) 30%,rgba(1,49,96,1) 100%);

position:absolute;

left:10px;

top:40px;

transition:1s;

animation:ring_bound2 2s linear infinite;

}

.shineCircle3 {

width:80px;

height:40px;

border:1px solid rgba(18,220,232,.25);

border-radius:50%;

/*background:radial-gradient(rgba(1,49,96,0.1) 30%,rgba(1,49,96,1) 100%);

*/

position:absolute;

left:10px;

top:40px;

transition:1s;

animation:ring_bound3 2s linear infinite;

}

.icon01 {

height:37px;

width:53px;

background:url("images/icon01.png") no-repeat center;

position:absolute;

top:53px;

left:35px;

z-index:20;

}

.icon02 {

height:60px;

width:86px;

background:url("images/iconBig.png") no-repeat center;

position:absolute;

top:10px;

left:102px;

z-index:20;

}

/**第二个图**/

.circle-02-con {

width:300px;

height:200px;

border:0px #ccc solid;

position:relative;

}

.circle01 {

position:absolute;

z-index:3;

border-radius:50%;

left:10px;

top:60px;

width:100px;

height:50px;

background:radial-gradient(rgba(1,49,96,0.1) 30%,rgba(1,49,96,1) 100%);

animation:circle01 2s linear infinite;

}

.circle02 {

position:absolute;

z-index:2;

border-radius:50%;

left:10px;

top:60px;

width:100px;

height:50px;

background:radial-gradient(rgba(1,49,96,0.1) 30%,rgba(1,49,96,1) 100%);

animation:circle02 2s linear infinite;

}

.circle03 {

position:absolute;

z-index:1;

border:1px solid rgba(18,220,232,.25);

border-radius:50%;

left:10px;

top:60px;

width:100px;

height:50px;

/*box-shadow:10px 10px 10px rgba(1,49,96,1) inset;

*/ background:radial-gradient(rgba(1,49,96,0.1) 50%,rgba(1,49,96,1) 100%);

animation:circle03 2s linear infinite;

}

@keyframes circle01 {

0% {

left:100px;

top:60px;

width:100px;

height:25px;

}

100% {

left:80px;

top:50px;

width:120px;

height:30px;

}

}@keyframes circle02 {

0% {

left:80px;

top:60px;

width:140px;

height:30px;

}

100% {

left:50px;

top:50px;

width:180px;

height:38px;

}

}@keyframes circle03 {

0% {

left:70px;

top:60px;

width:160px;

height:30px;

}

100% {

left:30px;

top:50px;

width:220px;

height:42px;

}

}