drain – Thingography.com https://thingography.com More than a Photo Gallery Mon, 18 Feb 2019 17:07:22 +0000 en-US hourly 1 Drain Pure CSS Animation https://thingography.com/css-drain/ https://thingography.com/css-drain/#respond Sun, 18 Feb 2018 20:02:43 +0000 http://thingography.com/my-things/?p=87 .ani-box {height: 475px; position relative; overflow: hidden;} #drain { width: 400px; height: 400px; margin: -1em auto 0px auto; position: relative; border-radius: 50%; padding-bottom: 0px; box-sizing: content-box; } @media screen and (max-width: 720px) { #drain {transform: scale(0.7); top: -50px;} .ani-box {height: 400px;} } @media screen and (max-width: 420px) { #drain {transform: scale(0.4); top: -100px; left: -10%;} .ani-box {height: 300px;} } #drain { box-shadow: 0 0 0px 5px #555, 0 0 100px 20px #0000FF inset; background: #000000; background: -moz-radial-gradient(center, ellipse cover, #000000 0%, #1e5799 18%, #1e5799 42%, #2988d7 99%, #2989d8 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#000000), color-stop(18%,#1e5799), color-stop(42%,#1e5799), color-stop(99%,#2988d7), color-stop(100%,#2989d8)); background: -webkit-radial-gradient(center, ellipse cover, #000000 0%,#1e5799 18%,#1e5799 42%,#2988d7 99%,#2989d8 100%); background: -o-radial-gradient(center, ellipse cover, #000000 0%,#1e5799 18%,#1e5799 42%,#2988d7 99%,#2989d8 100%); background: -ms-radial-gradient(center, ellipse cover, #000000 0%,#1e5799 18%,#1e5799 42%,#2988d7 99%,#2989d8 100%); background: radial-gradient(ellipse at center, #000000 0%,#1e5799 18%,#1e5799 42%,#2988d7 99%,#2989d8 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#2989d8',GradientType=1 ); } .circum, .circum2, .circum3, .circum4, .circum5 { width: 125px; height: 125px; position: absolute; border-radius: 50%; margin-top: -63px; margin-left: -63px; top: 50%; left: 50%; animation: circum 25s cubic-bezier(0.8, 0.0, 1.0, 0.8) infinite; } .circum2 { animation-delay: 5s; } .circum3 { animation-delay: 10s; } .circum4 { animation-delay: 15s; } .circum5 { animation-delay: 20s; } .ball-red, .ball-blue, .ball-yellow, .ball-green, .ball-purple { border: 5px solid #000000; width: 45px; height: 45px; border-radius: 50%; position: absolute; margin-left: -25px; margin-top: -25px; left: 50%; top: 50%; opacity:0; animation: ball-roll 25s linear infinite; } .ball-red { background-color: #FF0000; } .ball-blue { background-color: #00FFFF; animation-delay: 5s; } .ball-yellow { background-color: #FFFF00; animation-delay: 10s; } .ball-green{ background-color: #009900; animation-delay: 15s; } .ball-purple{ background-color: #FF00FF; animation-delay: 20s; } @keyframes circum { 0% {transform: rotateZ( 0deg);} 100% {transform: rotateZ(5760deg);} } @keyframes ball-roll { 0% {opacity:1; margin-top:400px;} 50% {opacity:1; margin-top:200px;} 90% {opacity:1; transform: scale(1.0);} 100%{opacity:.3; transform: scale(0.1);} }

Multi-colored balls spinning down a drain. Other ideas for this type of animation could be a Roulette wheel, gumball machine, or basketball spinning on the rim, to name a few.

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