{"id":2095,"date":"2018-03-18T17:17:56","date_gmt":"2018-03-18T17:17:56","guid":{"rendered":"http:\/\/thingography.com\/?p=2095"},"modified":"2018-11-06T14:02:23","modified_gmt":"2018-11-06T14:02:23","slug":"css-star-trek","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-star-trek\/","title":{"rendered":"CSS Star Trek Battle Animation"},"content":{"rendered":"<style>\n.ani-box {width: 100%; height:500px; background-image: url(\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/star-trek\/stars.png\");}\n.spacebox {\n\ttop: 160px;\n\tmargin: 0 auto;\n\tposition: relative;\n\twidth: 100%;\n\theight: 180px;\n}\n#rom {\nmargin-top: 40px;\t\ntop: 13px;\n\tleft: 5%;\n\tposition: absolute;\n\tz-index: 2;\n\twidth:150px;\n\theight:110px;\n}\n#ent {\n\ttop: 50px;\n\tright: 5%;\n\tposition: absolute;\n\tz-index: 2;\n\twidth:150px; \n\theight:108px;\n}\n\/* ==== Romulan Disrupter ===== *\/\n.bolt {\n\tleft: 50%;\n\ttop: 100px;\n\twidth: 5px;\n\theight: 5px;\n\tborder: 2px solid #FF0000;\n\tbox-shadow: 0px 0px 8px #FF0000;\n\tborder-radius: 50px;\n\tposition: absolute;\n\tbackground-color: #FFF;\n\tanimation: bolt 10s linear infinite;\n}\n@keyframes bolt {\n0%   {background:transparent; left:10%; opacity:0.0;}\n50%  {background:transparent; left:10%; opacity:0.0;}\n70%  {background:#fff;                  opacity:1.0; height:20px;}\n75%  {background:#fff;        \t\t\topacity:1.0; height:20px;}\n99%  {background:#fff;        \t\t\topacity:1.0; height:20px;}\n100% {background:none;        left:90%; opacity:0.0; height:40px; top: 85px;}\n}\n\/* ==== Enterprise Phasers ===== *\/\n.phaser  {\n\twidth: 3px;\n\theight:2px; \n\ttop: 100px;\n\tright: 10%;\n\tposition: absolute;\n\tbox-shadow: 0 0 8px #FF0000;\n\tanimation: phaser 10s linear infinite;\n\tanimation-delay: 2s;\n}\n@keyframes phaser {\n\t0%   {background:red;    right:15%; width: 0%;}\n\t90%  {background:red;    right:15%; width: 0%;}\n\t99%  {background:red;    right:15%; width:72%;}\n\t100% {background:#FF9900;right:70%; width: 0%;}\n}\n\/* ===== Enterprise Shake & Shield ===== *\/\n.shake {\n\tborder-radius:200px;\n\tanimation: shake 10s infinite;\n}\n@keyframes shake {\n\t 0% {transform: rotate( 0deg); box-shadow:  0px  0px  0px  0px #FF6600;}\n\t93% {transform: rotate( 0deg); box-shadow:  0px  0px  0px  0px #FF6600;}\n\t94% {transform: rotate( 2deg); box-shadow:  0px  0px  0px  0px #FF6600;}\n\t96% {transform: rotate(-3deg); box-shadow:-30px -5px 8px  4px #FF6600;}\n\t97% {transform: rotate( 3deg); box-shadow:-30px -5px 8px 6px #FF6600;}\n\t98% {transform: rotate(-3deg); box-shadow:-30px -5px 8px 6px #FF6600;}\n\t100%{transform: rotate( 0deg); box-shadow:-30px -5px 6px 6px #FF6600;}\n}\n\/* ===== Romulan Shake & Shield ===== *\/\n.blowup {\n\tpadding: 12px 40px 50px 40px;\n\tborder-radius:40%; \n\tanimation: blowup 10s infinite;\n\tanimation-delay: 2.2s;\n}\n@keyframes blowup {\n\t 0%   {transform: rotate( 0deg); box-shadow: 0px 0px  0px  0px #009900;}\n\t90%   {transform: rotate( 0deg); box-shadow: 0px 0px  0px  0px #009900;}\n\t95%   {transform: rotate( 0deg); box-shadow: 0px 0px  0px  0px #009900;}\n\t96%   {transform: rotate(-3deg); box-shadow:30px 5px 8px  4px #009900;}\n\t97%   {transform: rotate( 3deg); box-shadow:30px 5px 8px  6px #009900;}\n\t98%   {transform: rotate(-3deg); box-shadow:30px 5px 8px  6px #009900;}\n\t100%  {transform: rotate( 0deg); box-shadow: 0px 0px 0px  0px #009900;}\n}\n@media only screen and (max-width: 480px) {\n    .spacebox {\n        transform: scale(0.5);\n        width: 150%;\nleft: -30%;\n}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"spacebox\">\n\t\t<img decoding=\"async\" class=\"blowup\"id=\"rom\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/star-trek\/rom.png\" alt=\"Rom\" \/><\/p>\n<div class=\"bolt\"><\/div>\n<div class=\"phaser\"><\/div>\n<p>\t\t<img class=\"shake\" id=\"ent\"src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/star-trek\/ent.png\" alt=\"ent\" \/>\n\t<\/div>\n<\/div>\n<p> <!-- Close  Ani  --><\/p>\n<div class=\"below-ani\">This Star Trek animation is best view on a large screen. With a little imagination and too many episodes of Star Trek&#8230;<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This Star Trek animation is best view on a large screen. With a little imagination and too many episodes of Star Trek&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2608,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,208,4,5,207],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2095"}],"collection":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/comments?post=2095"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2095\/revisions"}],"predecessor-version":[{"id":2627,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2095\/revisions\/2627"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2608"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=2095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=2095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=2095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}