.ani-box {width: 100%; height: 100%; overflow: hidden;
background-color: #000;
}
.replay {
font-size: 1.0em;
color: #FFF;
}
.replay:hover {
color: #0026FF;
}
.spherebox {
margin: 0em auto;
position: relative;
width: 100%;
height: 100%;
}
.sphere, .sphere1, .sphere2, .sphere3, .sphere4, .sphere5, .sphere6, .sphere7, .sphere8 {
position: absolute;
width: 5em;
height: 5em;
border-radius: 50%;
left:50%;
top: 40%;
margin-left: -2.5em;
margin-top: -2.5em;
}
.sphere {
z-index: 10;
background: linear-gradient(to right, rgba(247,138,4,1) 0%,rgba(29,163,0,1) 100%);
animation:appear 5s;
}
/* ============ 4 Centering spheres================ */
.sphere1 {
box-shadow: -3em -3em 6em 3em #3F8CFF;
background-color: #FF3399;
z-index: 3;
opacity: 0.8;
animation: sphere1 3s ease-out;
}
.sphere2 {
box-shadow: 3em -3em 6em 3em #FFFF00;
background-color: #00FFFF;
animation: sphere2 4s ease-out;
}
.sphere3 {
box-shadow: 3em 3em 6em 3em #FF3300;
background-color: #0000CC;
animation: sphere3 3s ease-out;
}
.sphere4 {
box-shadow: -3em 3em 6em 3em #009933;
color: #009933;
background-color: #FF3300;
animation: sphere4 5s ease-out;
}
/* ============ 4 non centering spheres================ */
.sphere5 {
left: -500px;
top: -900px;
box-shadow: -3em -3em 6em 3em #66FF33;
background-color: #FF9933;
animation: sphere5 5s linear;
}
.sphere6 {
left: 2000px;
top: 500px;
box-shadow: 3em 0em 6em 3em #FF9900;
background-color: #009933;
animation: sphere6 5s linear;
}
.sphere7 {
left: -600px;
top: -1000px;
box-shadow: -3em -3em 6em 3em #FFFF00;
background-color: #990099;
animation: sphere7 5s linear;
}
.sphere8 {
left: 800px;
top: 1500px;
box-shadow: 0em 3em 6em 3em #0033CC;
background-color: #FFFF00;
animation: sphere8 5s linear;
}
/* ============ 2 Ending Upward Small Spheres================ */
.spherea {
left: 70%;
top: -100%;
box-shadow: 0 3em 6em 3em #0033CC;
background-color: #FFFFFF;
width: 6em;
height: 6em;
border-radius: 50%;
position: absolute;
animation: spherea 5s linear;
}
.sphereb {
left: 30%;
top: -100%;
box-shadow: 0 3em 6em 3em #0033CC;
background-color: #FFFFFF;
width: 6em;
height: 6em;
border-radius: 50%;
position: absolute;
animation: sphereb 5s linear;
}
.name {
text-align: center;
z-index: 100;
width: 100%;
margin:-150px auto 0;
position: relative;
box-shadow: 0 0 70px #FFFFFF inset;
animation: appear 5s;
}
#h1, #h2 {
text-align: center;
color: #FFF;
letter-spacing: 0.07em;
font-weight: bold;
}
#h1 {
font-size: 3em;
font-size: 4vh;
text-shadow: -3px -4px 5px #000000;
line-height: 6vh;
}
#h2 {
font-size: 1.6em;
font-size: 3vh;
text-shadow: 2px 4px 8px #000000;
line-height: 4vh;
}
/* ==== SPHERE 1 =====*/
@keyframes sphere1 {
0% {left:-500%; top:-500%; opacity: 1.0;}
100% {left: 50%; top: 40%; opacity: 0.7;}
}
/* ==== SPHERE 2 =====*/
@keyframes sphere2 {
0% {left:500%; top:-500%;}
100% {left: 50%; top: 40%;}
}
/* ==== SPHERE 3 =====*/
@keyframes sphere3 {
0% {left:500%; top:500%;}
100% {left: 50%; top: 40%;}
}
/* ==== SPHERE 4 =====*/
@keyframes sphere4 {
0% {left:-500%; top:500%;}
100% {left: 50%; top: 40%;}
}
/* ==== SPHERE 5 =====*/
@keyframes sphere5 {
0% {left:-500px; top:-700px;}
100% {left:2200px; top: 250px;}
}
/* ==== SPHERE 6 =====*/
@keyframes sphere6 {
0% {left: 2000px; top:500px;}
100% {left:-1600px; top:0px;}
}
/* ==== SPHERE 7 =====*/
@keyframes sphere7 {
0% {left:-600px; top:-800px;}
100% {left: 500px; top:2500px;}
}
/* ==== SPHERE 8 =====*/
@keyframes sphere8 {
0% {left:800px; top:1500px;}
100% {left:600px; top:-800px;}
}
/* ==== APPEAR =====*/
@keyframes appear{
0% {opacity: 0;}
80% {opacity: 0;}
100% {opacity: 1;}
}
/* ==== Fast Moving SPHERE A =====*/
@keyframes spherea {
0% {left:30%; top:1200px;}
90% {left:30%; top:1200px;}
100%{left:70%; top:-100px;}
}
/* ==== Fast Moving SPHERE A =====*/
@keyframes sphereb {
0% {left:70%; top:1200px;}
80% {left:70%; top:1200px;}
100%{left:30%; top:-100px;}
}
Thingography.com
Where Colors Connect
A little introduction CSS animation with flying spheres (orbs).
]]>