spiral – Thingography.com https://thingography.com More than a Photo Gallery Tue, 19 Feb 2019 00:44:09 +0000 en-US hourly 1 The Time Tunnel CSS Animation https://thingography.com/css-time-tunnel/ https://thingography.com/css-time-tunnel/#respond Sun, 18 Mar 2018 20:16:07 +0000 http://thingography.com/?p=2236 .ani-box {width: 100%; height: auto; overflow: hidden; background-color: #000020; animation: bgcc 60s infinite; } .tunnel-box { margin: 0 auto; width: 100%; max-width: 1000px; height: auto; position: relative; padding: 1em 0; } .tunnel { width: 60%; height: auto; margin: 0 auto; text-align: center; } .tunnel img { transform-origin: 50% 50%; animation: tunnel 60s infinite; width: 100%; height: auto; } @keyframes tunnel { 0% {transform: rotate(0deg);} 50% {transform: rotate(14400deg);} 100% {transform: rotate(0deg);} } @keyframes bgcc { 0% {background:#FFF;} 50% {background:#CCC;} 100% {background:#FFF;} }
tunnel

This was one of my first animations while learning CSS – A Television show from the 1960’s – The Time Tunnel.
]]> https://thingography.com/css-time-tunnel/feed/ 0 Spinning Spirals Animation – 28 Different Spirals https://thingography.com/css-spiral-2/ https://thingography.com/css-spiral-2/#respond Sun, 18 Mar 2018 16:19:53 +0000 http://thingography.com/?p=2143 .ani-box {width: 100%; height:auto; background-color: #000;} /* Slideshow box */ #sss-box { width: 100%; height: auto; max-width: 1000px; position: relative; margin: auto; background-color: #000; } .mySlides {display: none; text-align: center; width: 80%; height: auto; margin: 0 auto; } .first {display: block;} .mySlides img { width: 90%; height: auto; position: relative; border-radius: 50%; } /* Next & previous buttons */ .prevnex .prev, .prevnex .next { cursor: pointer; position: absolute; width: auto; padding: 0.2em 0.4em; color: #FFF; font-weight: bold; font-size: 30px; font-size: 5vh; transition: 0.6s ease; border-radius: 3px; bottom: 0; border: solid 1px #999; text-decoration: none !important; } /* Position the "next button" to the right */ .prevnex .next { right: 0; border-radius: 3px; } /* On hover, add a black background color with a little bit see-through */ .prevnex .prev:hover, .prevnex .next:hover { background-color: rgba(255,0,0,0.8); } /* Number text (1/3 etc) */ .xofy { color: #f2f2f2; font-size: 16px; padding: 8px 12px; position: absolute; bottom: 0; right: 60px; margin-left: -24px; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prevnex .prev, .prevnex .next, .xofy {font-size: 12px} .xofy { right: 35px;} }
1 / 28

2 / 28

3 / 28

4 / 28

5 / 28

6 / 28

7 / 28

8 / 28

9 / 28

10 / 28

11 / 28

12 / 28

14 / 28

14 / 28

15 / 28

16 / 28

17 / 28

18 / 28

19 / 28

20 / 28

21 / 28

22 / 28

23 / 28

24 / 28

25 / 28

26 / 28

27 / 28

28 / 28


Spin Speed

Opacity

This animation page is NOT CSS only, it contains multiple java scripts. The java scripts were needed to make the animation controls in the lower left corner of the page. The controls allow for Spin Speed, Opacity, ‘Flip’ and a ‘Next/Prev’ image option. The ‘Flip’ option turns the image over 180 degrees.

The spirals reminds us of a fun psychedelic memory of the 1960’s and 70’s. It is best viewed in your browsers full screen mode (use the ‘F11″ key). In addition, all spirals in this series were created using Paint.NET.

]]> https://thingography.com/css-spiral-2/feed/ 0 CSS Swirl Animation https://thingography.com/css-twirl/ https://thingography.com/css-twirl/#respond Wed, 14 Mar 2018 21:00:22 +0000 http://thingography.com/?p=2060 .ani-box {width: 100%; height: 700px; overflow: hidden; background-image: url('http://thingography.com/my-things/wp-content/uploads/css-img/twirl/computer-generated-design-123.jpg'); background-position: center center; background-color: #000000; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } #prop { position: relative; top: 50%; left: 50%; margin-top: -197px; margin-left: -197px; } .ball { width: 394px; height: 394px; position: absolute; top: 50%; left: 50%; margin-top: -197px; margin-left: -197px; animation: twirl 50s ease-in-out infinite; } @keyframes twirl { 0% {transform:rotateZ( 0deg) scale(0);} 50% {transform:rotateZ(20000deg) scale(5);} 100% {transform:rotateZ( 0deg) scale(0);} }
twirl

]]> https://thingography.com/css-twirl/feed/ 0 Spiral Pure CSS Animation https://thingography.com/css-spiral/ https://thingography.com/css-spiral/#respond Sun, 18 Feb 2018 21:59:05 +0000 http://thingography.com/my-things/?p=139 .ani-box {height: auto !important; padding: 0 !important;} .box { margin-top: -10%; position: relative; width: 100%; padding-top: 100%; /* 1:1 Aspect Ratio */ animation: spin 3s infinite linear; box-sizing: content-box; } .layer0, .layer1, .layer2, .layer3, .layer4, .layer5, .layer6 { position: absolute; bottom: 0; right: 0; top: 50%; left: 50%; border-radius: 50%; overflow: hidden; background: radial-gradient(ellipse at center, #fcfcfc 0%,#fcfcfc 0%,#0a0a0a 9%,#ffffff 16%,#0a0a0a 25%,#f2f2f2 33%,#070707 40%,#ffffff 47%,#2d2d2d 56%,#f9f9f9 63%,#2d2d2d 70%,#f9f9f9 79%,#2d2d2d 87%,#f9f9f9 96%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ffffff',GradientType=1 ); } .layer0 { width: 60%; height: 60%; margin-top: -30%; margin-left: -29%; } .layer1 { width: 48%; height: 48%; margin-top: -23%; margin-left: -24%; } .layer2 { width: 42%; height: 42%; margin-top: -21%; margin-left: -22%; } .layer3 { width: 36%; height: 36%; margin-top: -17%; margin-left: -18%; } .layer4 { width: 28%; height: 28%; margin-top: -14%; margin-left: -13%; } .layer5 { width: 20%; height: 20%; margin-top: -11%; margin-left: -10%; } .layer6 { width: 14%; height: 14%; margin-top: -7%; margin-left: -6%; } @keyframes spin { 0% { transform: rotateZ( 0deg);} 100% { transform: rotateZ(360deg);} }

If you like this Spiral optical illusion animation, check out more Spirals on the Spiral web page.

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