{"id":2031,"date":"2018-03-14T01:08:05","date_gmt":"2018-03-14T01:08:05","guid":{"rendered":"http:\/\/thingography.com\/?p=2031"},"modified":"2025-02-13T20:57:40","modified_gmt":"2025-02-13T20:57:40","slug":"css-sphere","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-sphere\/","title":{"rendered":"Pure CSS Floating Sphere Intro"},"content":{"rendered":"<style>\n.ani-box {width: 100%; height: 100%; overflow: hidden;\nbackground-color: #000;\t\t\t\t\n}\n.replay {\n\tfont-size: 1.0em;\n\tcolor: #FFF;\n}\n.replay:hover {\n\tcolor: #0026FF;\n}\n.spherebox {\n\tmargin: 0em auto;\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n.sphere, .sphere1, .sphere2, .sphere3, .sphere4, .sphere5, .sphere6, .sphere7, .sphere8 {\n\tposition: absolute;\n\twidth: 5em;\n\theight: 5em;\n\tborder-radius: 50%;\n\tleft:50%; \n\ttop: 40%;\n\tmargin-left: -2.5em;\n\tmargin-top: -2.5em;\n}\n.sphere {\n\tz-index: 10;\n\tbackground: linear-gradient(to right, rgba(247,138,4,1) 0%,rgba(29,163,0,1) 100%);\n\tanimation:appear 5s;\n}\n\/*  ============ 4 Centering spheres================  *\/\n.sphere1  {\n\tbox-shadow: -3em -3em 6em 3em #3F8CFF;\n\tbackground-color: #FF3399;\n\tz-index: 3;\n\topacity: 0.8;\n\tanimation: sphere1 3s ease-out;\n}\n.sphere2 {\n\tbox-shadow: 3em -3em 6em 3em #FFFF00;\n\tbackground-color: #00FFFF;\n\tanimation: sphere2 4s ease-out;\n}\n.sphere3 {\n\tbox-shadow: 3em 3em 6em 3em #FF3300;\n\tbackground-color: #0000CC;\n\tanimation: sphere3 3s ease-out;\n}\n.sphere4  {\n\tbox-shadow: -3em 3em 6em 3em #009933;\n\tcolor: #009933;\n\tbackground-color: #FF3300;\n\tanimation: sphere4 5s ease-out;\n}\n\/*  ============ 4 non centering spheres================  *\/\n.sphere5 {\n\tleft: -500px;\n\ttop: -900px;\n\tbox-shadow: -3em -3em 6em 3em #66FF33;\n\tbackground-color: #FF9933;\n\tanimation: sphere5 5s linear;\n}\n.sphere6 {\n\tleft: 2000px;\n\ttop: 500px;\n\tbox-shadow: 3em 0em 6em 3em #FF9900;\n\tbackground-color: #009933;\n\tanimation: sphere6 5s linear;\n}\n.sphere7 {\n\tleft: -600px;\n\ttop: -1000px;\n\tbox-shadow: -3em -3em 6em 3em #FFFF00;\n\tbackground-color: #990099;\n\tanimation: sphere7 5s linear;\n}\n.sphere8 {\n\tleft: 800px;\n\ttop: 1500px;\n\tbox-shadow: 0em 3em 6em 3em #0033CC;\n\tbackground-color: #FFFF00;\n\tanimation: sphere8 5s linear;\n}\n\/*  ============ 2 Ending Upward Small Spheres================  *\/\n.spherea {\n\tleft: 70%;\n\ttop: -100%;\n\tbox-shadow: 0 3em 6em 3em #0033CC;\n\tbackground-color: #FFFFFF;\n\twidth: 6em;\n\theight: 6em;\n\tborder-radius: 50%;\n\tposition: absolute;\n\tanimation: spherea 5s linear;\n}\n.sphereb {\n\tleft: 30%;\n\ttop: -100%;\n\tbox-shadow: 0 3em 6em 3em #0033CC;\n\tbackground-color: #FFFFFF;\n\twidth: 6em;\n\theight: 6em;\n\tborder-radius: 50%;\n\tposition: absolute;\n\tanimation: sphereb 5s linear;\n}\n.name {\n\ttext-align: center;\n\tz-index: 100;\n\twidth: 100%;\n\tmargin:-150px auto 0;\n\tposition: relative;\n\tbox-shadow: 0 0 70px #FFFFFF inset;\n\tanimation: appear 5s;\n}\n#h1, #h2 {\n\ttext-align: center;\n\tcolor: #FFF;\n\tletter-spacing: 0.07em;\n\tfont-weight: bold;\n}\n#h1 {\n\tfont-size: 3em;\n\tfont-size: 4vh;\n\ttext-shadow: -3px -4px 5px #000000;\n\tline-height: 6vh;\n}\n#h2 {\n\tfont-size: 1.6em;\n\tfont-size: 3vh;\n\ttext-shadow: 2px 4px 8px #000000;\n\tline-height: 4vh;\n}\n\/* ==== SPHERE 1 =====*\/\n@keyframes sphere1 {\n\t0%   {left:-500%; top:-500%; opacity: 1.0;}\n\t100% {left:  50%; top:  40%; opacity: 0.7;}\n}\n\/* ==== SPHERE 2 =====*\/\n@keyframes sphere2 {\n\t0%   {left:500%; top:-500%;}\n\t100% {left: 50%; top:  40%;}\n}\n\/* ==== SPHERE 3 =====*\/\n@keyframes sphere3 {\n\t0%   {left:500%; top:500%;}\n\t100% {left:  50%; top:  40%;}\n}\n\/* ==== SPHERE 4 =====*\/\n@keyframes sphere4 {\n\t0%   {left:-500%; top:500%;}\n\t100% {left:  50%; top: 40%;}\n}\n\/* ==== SPHERE 5 =====*\/\n@keyframes sphere5 {\n\t0%   {left:-500px; top:-700px;}\n\t100% {left:2200px; top: 250px;}\n}\n\/* ==== SPHERE 6 =====*\/\n@keyframes sphere6 {\n\t0%   {left: 2000px; top:500px;}\n\t100% {left:-1600px; top:0px;}\n}\n\/* ==== SPHERE 7 =====*\/\n@keyframes sphere7 {\n\t0%   {left:-600px; top:-800px;}\n\t100% {left: 500px; top:2500px;}\n}\n\/* ==== SPHERE 8 =====*\/\n@keyframes sphere8 {\n\t0%   {left:800px; top:1500px;}\n\t100% {left:600px; top:-800px;}\n}\n\/* ==== APPEAR  =====*\/\n@keyframes appear{\n\t0%   {opacity: 0;}\n\t80%  {opacity: 0;}\n\t100% {opacity: 1;}\n}\n\/* ==== Fast Moving SPHERE A =====*\/\n@keyframes spherea {\n\t0%  {left:30%; top:1200px;}\n\t90% {left:30%; top:1200px;}\n\t100%{left:70%; top:-100px;}\n}\n\/* ==== Fast Moving SPHERE A =====*\/\n@keyframes sphereb {\n\t0%  {left:70%; top:1200px;}\n\t80% {left:70%; top:1200px;}\n\t100%{left:30%; top:-100px;}\n}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"spherebox\">\n<div class=\"sphere\"><\/div>\n<div class=\"sphere1\"> <\/div>\n<div class=\"sphere2\"> <\/div>\n<div class=\"sphere3\"> <\/div>\n<div class=\"sphere4\"> <\/div>\n<div class=\"sphere5\"> <\/div>\n<div class=\"sphere6\"> <\/div>\n<div class=\"sphere7\"> <\/div>\n<div class=\"sphere8\"> <\/div>\n<\/p><\/div>\n<div class=\"name\">\n<div id=\"h1\"> Thingography.com <\/div>\n<div id=\"h2\">Where Colors Connect<\/div>\n<\/p><\/div>\n<div class=\"spherea\"><\/div>\n<div class=\"sphereb\"><\/div>\n<\/div>\n<p> <!-- Close  Ani  --><\/p>\n<div class=\"below-ani\">A little introduction CSS animation with flying spheres (orbs). <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Thingography.com Where Colors Connect A little introduction CSS animation with flying spheres (orbs).<\/p>\n","protected":false},"author":2,"featured_media":2606,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,199,198],"class_list":["post-2031","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-css","tag-css-animation","tag-orbs","tag-sphere"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2031","targetHints":{"allow":["GET"]}}],"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=2031"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2031\/revisions"}],"predecessor-version":[{"id":2632,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2031\/revisions\/2632"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2606"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=2031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=2031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=2031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}