EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

body {
  background: #222;
}

#r,#b,#b{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin: -200px 0 0 -200px;
}

#r{
            -webkit-animation:7s red linear infinite;
            -moz-animation:7s red linear infinite;
            background-image: -moz-radial-gradient(50% 50%, circle contain, rgba(222, 75, 218, .75), rgba(222, 75, 218, 0) 100%);
            background-image: -webkit-radial-gradient(50% 50%, circle contain, rgba(222, 75, 218, .75), rgba(222, 75, 218, 0) 100%);         
        }
        #b{
            -webkit-animation:blue 6s linear infinite;
            -moz-animation:blue 6s linear infinite;
            background-image: -webkit-radial-gradient(50% 50%, circle contain, rgba(86, 173, 223, .75), rgba(86, 173, 223, 0) 100%);
            background-image: -moz-radial-gradient(50% 50%, circle contain, rgba(86, 173, 223, .75), rgba(86, 173, 223, 0) 100%);           
        }
        #g{
            -webkit-animation:green 8s linear infinite;
            -moz-animation:green 8s linear infinite;
            background-image: -webkit-radial-gradient(50% 50%, circle contain, rgba(210, 222, 12, .75), rgba(210, 222, 12, 0) 100%);
            background-image: -moz-radial-gradient(50% 50%, circle contain, rgba(210, 222, 12, .75), rgba(210, 222, 12, 0) 100%);          
        }

@-webkit-keyframes red{
            0% {-webkit-transform: rotate(0deg) translate(-40px) rotate(0deg) scale(1,1);}
            50% {-webkit-transform: rotate(-180deg) translate(-40px) rotate(-180deg) scale(1,1.33);}
            100% {-webkit-transform: rotate(-360deg) translate(-40px) rotate(-360deg) scale(1,1);}
        }
        @-moz-keyframes red{
            0% {-moz-transform: rotate(0deg) translate(-40px) rotate(0deg) scale(1,1);}
            50% {-moz-transform: rotate(-180deg) translate(-40px) rotate(-180deg) scale(1,1.33);}
            100% {-moz-transform: rotate(-360deg) translate(-40px) rotate(-360deg) scale(1,1);}
        }
        @-webkit-keyframes green{
            0% {-webkit-transform: rotate(0deg) translate(30px) rotate(0deg) scale(1,1);opacity:1}
            66% {-webkit-transform: rotate(180deg) translate(30px) rotate(-180deg) scale(1,1.33);opacity:.33}
            100% {-webkit-transform: rotate(360deg) translate(30px) rotate(-360deg) scale(1,1);opacity:1}
        }
        @-moz-keyframes green{
            0% {-moz-transform: rotate(0deg) translate(30px) rotate(0deg) scale(1,1);opacity:1;}
            66% {-moz-transform: rotate(180deg) translate(30px) rotate(-180deg) scale(1,1.33);opacity:.33;}
            100% {-moz-transform: rotate(360deg) translate(30px) rotate(-360deg) scale(1,1);opacity:1;}
        }
        @-webkit-keyframes blue{
            0% {-webkit-transform: rotate(0deg) translate(30px) rotate(0deg) scale(1,1);}
            33% {-webkit-transform: rotate(180deg) translate(30px) rotate(-180deg) scale(1.66,1);}
            100% {-webkit-transform: rotate(360deg) translate(30px) rotate(-360deg) scale(1,1);}
        }
        @-moz-keyframes blue{
            0% {-moz-transform: rotate(0deg) translate(30px) rotate(0deg) scale(1,1);}
            33% {-moz-transform: rotate(180deg) translate(30px) rotate(-180deg) scale(1.66,1);}
            100% {-moz-transform: rotate(360deg) translate(30px) rotate(-360deg) scale(1,1);}
        }

HTML

Recommendation

Join Effecthub.com