star trek – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:02:23 +0000 en-US hourly 1 CSS Star Trek Battle Animation https://thingography.com/css-star-trek/ https://thingography.com/css-star-trek/#respond Sun, 18 Mar 2018 17:17:56 +0000 http://thingography.com/?p=2095 .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%; }
Rom

ent

This Star Trek animation is best view on a large screen. With a little imagination and too many episodes of Star Trek…
]]> https://thingography.com/css-star-trek/feed/ 0 Romulan Warbird Cloaking CSS Animation https://thingography.com/css-romulan-warbird/ https://thingography.com/css-romulan-warbird/#respond 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%;} }
Romulan
Romulan

]]> https://thingography.com/css-romulan-warbird/feed/ 0