sphere – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:12:05 +0000 en-US hourly 1 Pure CSS Floating Sphere Intro https://thingography.com/css-sphere/ https://thingography.com/css-sphere/#respond Wed, 14 Mar 2018 01:08:05 +0000 http://thingography.com/?p=2031 .ani-box {width: 100%; height: 100%; overflow: hidden; background-color: #000; } .replay { font-size: 1.0em; color: #FFF; } .replay:hover { color: #0026FF; } .spherebox { margin: 0em auto; position: relative; width: 100%; height: 100%; } .sphere, .sphere1, .sphere2, .sphere3, .sphere4, .sphere5, .sphere6, .sphere7, .sphere8 { position: absolute; width: 5em; height: 5em; border-radius: 50%; left:50%; top: 40%; margin-left: -2.5em; margin-top: -2.5em; } .sphere { z-index: 10; background: linear-gradient(to right, rgba(247,138,4,1) 0%,rgba(29,163,0,1) 100%); animation:appear 5s; } /* ============ 4 Centering spheres================ */ .sphere1 { box-shadow: -3em -3em 6em 3em #3F8CFF; background-color: #FF3399; z-index: 3; opacity: 0.8; animation: sphere1 3s ease-out; } .sphere2 { box-shadow: 3em -3em 6em 3em #FFFF00; background-color: #00FFFF; animation: sphere2 4s ease-out; } .sphere3 { box-shadow: 3em 3em 6em 3em #FF3300; background-color: #0000CC; animation: sphere3 3s ease-out; } .sphere4 { box-shadow: -3em 3em 6em 3em #009933; color: #009933; background-color: #FF3300; animation: sphere4 5s ease-out; } /* ============ 4 non centering spheres================ */ .sphere5 { left: -500px; top: -900px; box-shadow: -3em -3em 6em 3em #66FF33; background-color: #FF9933; animation: sphere5 5s linear; } .sphere6 { left: 2000px; top: 500px; box-shadow: 3em 0em 6em 3em #FF9900; background-color: #009933; animation: sphere6 5s linear; } .sphere7 { left: -600px; top: -1000px; box-shadow: -3em -3em 6em 3em #FFFF00; background-color: #990099; animation: sphere7 5s linear; } .sphere8 { left: 800px; top: 1500px; box-shadow: 0em 3em 6em 3em #0033CC; background-color: #FFFF00; animation: sphere8 5s linear; } /* ============ 2 Ending Upward Small Spheres================ */ .spherea { left: 70%; top: -100%; box-shadow: 0 3em 6em 3em #0033CC; background-color: #FFFFFF; width: 6em; height: 6em; border-radius: 50%; position: absolute; animation: spherea 5s linear; } .sphereb { left: 30%; top: -100%; box-shadow: 0 3em 6em 3em #0033CC; background-color: #FFFFFF; width: 6em; height: 6em; border-radius: 50%; position: absolute; animation: sphereb 5s linear; } .name { text-align: center; z-index: 100; width: 100%; margin:-150px auto 0; position: relative; box-shadow: 0 0 70px #FFFFFF inset; animation: appear 5s; } #h1, #h2 { text-align: center; color: #FFF; letter-spacing: 0.07em; font-weight: bold; } #h1 { font-size: 3em; font-size: 4vh; text-shadow: -3px -4px 5px #000000; line-height: 6vh; } #h2 { font-size: 1.6em; font-size: 3vh; text-shadow: 2px 4px 8px #000000; line-height: 4vh; } /* ==== SPHERE 1 =====*/ @keyframes sphere1 { 0% {left:-500%; top:-500%; opacity: 1.0;} 100% {left: 50%; top: 40%; opacity: 0.7;} } /* ==== SPHERE 2 =====*/ @keyframes sphere2 { 0% {left:500%; top:-500%;} 100% {left: 50%; top: 40%;} } /* ==== SPHERE 3 =====*/ @keyframes sphere3 { 0% {left:500%; top:500%;} 100% {left: 50%; top: 40%;} } /* ==== SPHERE 4 =====*/ @keyframes sphere4 { 0% {left:-500%; top:500%;} 100% {left: 50%; top: 40%;} } /* ==== SPHERE 5 =====*/ @keyframes sphere5 { 0% {left:-500px; top:-700px;} 100% {left:2200px; top: 250px;} } /* ==== SPHERE 6 =====*/ @keyframes sphere6 { 0% {left: 2000px; top:500px;} 100% {left:-1600px; top:0px;} } /* ==== SPHERE 7 =====*/ @keyframes sphere7 { 0% {left:-600px; top:-800px;} 100% {left: 500px; top:2500px;} } /* ==== SPHERE 8 =====*/ @keyframes sphere8 { 0% {left:800px; top:1500px;} 100% {left:600px; top:-800px;} } /* ==== APPEAR =====*/ @keyframes appear{ 0% {opacity: 0;} 80% {opacity: 0;} 100% {opacity: 1;} } /* ==== Fast Moving SPHERE A =====*/ @keyframes spherea { 0% {left:30%; top:1200px;} 90% {left:30%; top:1200px;} 100%{left:70%; top:-100px;} } /* ==== Fast Moving SPHERE A =====*/ @keyframes sphereb { 0% {left:70%; top:1200px;} 80% {left:70%; top:1200px;} 100%{left:30%; top:-100px;} }

Thingography.com
Where Colors Connect

A little introduction CSS animation with flying spheres (orbs).
]]> https://thingography.com/css-sphere/feed/ 0