cloak – Thingography.com
https://thingography.com
More than a Photo Gallery
Thu, 13 Feb 2025 20:56:37 +0000
en-US
hourly
1
-
Romulan Warbird Cloaking CSS Animation
https://thingography.com/css-romulan-warbird/
Sun, 18 Mar 2018 17:16:28 +0000
http://thingography.com/?p=2107
.ani-box {width: 100%; height:600px; overflow: hidden; background-image: url("http://thingography.com/my-things/wp-content/uploads/css-img/romulan-warbird/stars.png");}
.spacebox {
margin: 0 auto;
position: relative;
width: 100%;
height: 600px;
}
#ent {
width:100%;
height: 100%;
top: 100px;
left: 0;
position: absolute;
z-index: 2;
}
#plan {
top: 100px;
left: 0;
width:100%;
height: 100%;
position: absolute;
}
.ship {
width: 300px;
height: 112px;
position: relative;
animation: ship 16s linear infinite;
margin-top: -200px;
margin-bottom: 0;
}
.planet {
margin-top: -100px;
width: 301px;
height: 301px;
position: relative;
animation: planet 16s linear infinite;
animation-direction: alternate;
}
@keyframes ship {
0% {transform:scale(1,1); left:100%; opacity:1;}
100% {transform:scale(4.0); left:-10%; opacity:0;}
}
@keyframes planet {
0% {transform:scale(1.0); left: 50%;}
100% {transform:scale(0.5); left: 50%;}
}
]]>
