.ani-box {width: 100%; height:500px; background-image: url("http://thingography.com/my-things/wp-content/uploads/css-img/star-trek/stars.png");}
.spacebox {
top: 160px;
margin: 0 auto;
position: relative;
width: 100%;
height: 180px;
}
#rom {
margin-top: 40px;
top: 13px;
left: 5%;
position: absolute;
z-index: 2;
width:150px;
height:110px;
}
#ent {
top: 50px;
right: 5%;
position: absolute;
z-index: 2;
width:150px;
height:108px;
}
/* ==== Romulan Disrupter ===== */
.bolt {
left: 50%;
top: 100px;
width: 5px;
height: 5px;
border: 2px solid #FF0000;
box-shadow: 0px 0px 8px #FF0000;
border-radius: 50px;
position: absolute;
background-color: #FFF;
animation: bolt 10s linear infinite;
}
@keyframes bolt {
0% {background:transparent; left:10%; opacity:0.0;}
50% {background:transparent; left:10%; opacity:0.0;}
70% {background:#fff; opacity:1.0; height:20px;}
75% {background:#fff; opacity:1.0; height:20px;}
99% {background:#fff; opacity:1.0; height:20px;}
100% {background:none; left:90%; opacity:0.0; height:40px; top: 85px;}
}
/* ==== Enterprise Phasers ===== */
.phaser {
width: 3px;
height:2px;
top: 100px;
right: 10%;
position: absolute;
box-shadow: 0 0 8px #FF0000;
animation: phaser 10s linear infinite;
animation-delay: 2s;
}
@keyframes phaser {
0% {background:red; right:15%; width: 0%;}
90% {background:red; right:15%; width: 0%;}
99% {background:red; right:15%; width:72%;}
100% {background:#FF9900;right:70%; width: 0%;}
}
/* ===== Enterprise Shake & Shield ===== */
.shake {
border-radius:200px;
animation: shake 10s infinite;
}
@keyframes shake {
0% {transform: rotate( 0deg); box-shadow: 0px 0px 0px 0px #FF6600;}
93% {transform: rotate( 0deg); box-shadow: 0px 0px 0px 0px #FF6600;}
94% {transform: rotate( 2deg); box-shadow: 0px 0px 0px 0px #FF6600;}
96% {transform: rotate(-3deg); box-shadow:-30px -5px 8px 4px #FF6600;}
97% {transform: rotate( 3deg); box-shadow:-30px -5px 8px 6px #FF6600;}
98% {transform: rotate(-3deg); box-shadow:-30px -5px 8px 6px #FF6600;}
100%{transform: rotate( 0deg); box-shadow:-30px -5px 6px 6px #FF6600;}
}
/* ===== Romulan Shake & Shield ===== */
.blowup {
padding: 12px 40px 50px 40px;
border-radius:40%;
animation: blowup 10s infinite;
animation-delay: 2.2s;
}
@keyframes blowup {
0% {transform: rotate( 0deg); box-shadow: 0px 0px 0px 0px #009900;}
90% {transform: rotate( 0deg); box-shadow: 0px 0px 0px 0px #009900;}
95% {transform: rotate( 0deg); box-shadow: 0px 0px 0px 0px #009900;}
96% {transform: rotate(-3deg); box-shadow:30px 5px 8px 4px #009900;}
97% {transform: rotate( 3deg); box-shadow:30px 5px 8px 6px #009900;}
98% {transform: rotate(-3deg); box-shadow:30px 5px 8px 6px #009900;}
100% {transform: rotate( 0deg); box-shadow: 0px 0px 0px 0px #009900;}
}
@media only screen and (max-width: 480px) {
.spacebox {
transform: scale(0.5);
width: 150%;
left: -30%;
}
This Star Trek animation is best view on a large screen. With a little imagination and too many episodes of Star Trek…
]]>
