fan – Thingography.com https://thingography.com More than a Photo Gallery Mon, 18 Feb 2019 23:05:49 +0000 en-US hourly 1 Fan Pure CSS Animation https://thingography.com/css-fan-round/ https://thingography.com/css-fan-round/#respond Sun, 18 Feb 2018 20:32:38 +0000 http://thingography.com/my-things/?p=103 .ani-box {height: 700px; position:relative; overflow: hidden; background: linear-gradient(to bottom, rgba(56,101,153,1) 0%,rgba(149,177,201,1) 37%,rgba(211,221,229,1) 77%); background-color: #39466b; background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPgoJPGRlZnM+CgkJPHBhdHRlcm4gaWQ9J3RpbGUnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnIHdpZHRoPSc3NScgaGVpZ2h0PSc3NScgdmlld0JveD0nMCAwIDUwIDUwJz4KCQkJPGxpbmUgeDE9JzEnIHkxPScwJyB4Mj0nNTEnIHkyPSc1MCcgc3Ryb2tlPScjODc5YWYwJyBzdHJva2Utd2lkdGg9JzcuNicvPgoJCQk8bGluZSB4MT0nNDknIHkxPScwJyB4Mj0nLTEnIHkyPSc1MCcgc3Ryb2tlPScjODc5YWYwJyBzdHJva2Utd2lkdGg9JzcuNicvPgoJCQk8bGluZSB4MT0nNTAnIHkxPScwJyB4Mj0nMCcgeTI9JzUwJyBzdHJva2U9JyMzMTM3NjMnIHN0cm9rZS13aWR0aD0nNy42Jy8+CgkJCTxsaW5lIHgxPScwJyB5MT0nMCcgeDI9JzUwJyB5Mj0nNTAnIHN0cm9rZT0nIzMxMzc2Mycgc3Ryb2tlLXdpZHRoPSc3LjYnLz4KCQk8L3BhdHRlcm4+CgkJPHJhZGlhbEdyYWRpZW50IGlkPSdsJyBjeD0nNTAlJyBjeT0nMjAwJScgZnk9JzAnIHI9JzIwMSUnPgoJCQk8c3RvcCBvZmZzZXQ9JzAlJyBzdHlsZT0nc3RvcC1jb2xvcjojZmZmOyBzdG9wLW9wYWNpdHk6LjE7JyAvPgoJCQk8c3RvcCBvZmZzZXQ9JzEwJScgc3R5bGU9J3N0b3AtY29sb3I6IzAwMDsgc3RvcC1vcGFjaXR5OjAuMTsnIC8+CgkJCTxzdG9wIG9mZnNldD0nMzAlJyBzdHlsZT0nc3RvcC1jb2xvcjojMDAwOyBzdG9wLW9wYWNpdHk6MC4zOycgLz4KCQkJPHN0b3Agb2Zmc2V0PSc5MCUnIHN0eWxlPSdzdG9wLWNvbG9yOiMwMDA7IHN0b3Atb3BhY2l0eTowLjU1OycgLz4KCQkJPHN0b3Agb2Zmc2V0PScxMDAlJyBzdHlsZT0nc3RvcC1jb2xvcjojMDAwOyBzdG9wLW9wYWNpdHk6LjYnIC8+CgkJPC9yYWRpYWxHcmFkaWVudD4KCTwvZGVmcz4KCTxyZWN0IGZpbGw9JyMzOTQ2NmInIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnLz4KCTxyZWN0IGZpbGw9J3VybCgjdGlsZSknIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnLz4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3VybCgjbCknLz4KPC9zdmc+'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .fan { width: 500px; height: 500px; margin: 0px auto 1em auto; position: relative; top: 30px; box-sizing: content-box; } #blades { width: 500px; height: 500px; left: 50%; top: 50%; border-radius: 50%; position: absolute; margin-top: -250px; margin-left: -250px; } .blades { animation: fan 100s linear infinite; } .high { animation: fan 40s linear infinite; } .blade1, .blade2, .blade3, .blade4, .blade5 { border: 1px solid #969696; display: block; width: 150px; height: 195px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; box-shadow: 0px 0px 5px 0px #000000; position: absolute; } .blade1 { top: 20px; left: 171px; background: rgb(252,128,134); background: -moz-radial-gradient(center, ellipse cover, rgba(252,128,134,1) 0%, rgba(255,0,0,1) 100%, rgba(249,104,82,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(252,128,134,1)), color-stop(100%,rgba(255,0,0,1)), color-stop(100%,rgba(249,104,82,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(252,128,134,1) 0%,rgba(255,0,0,1) 100%,rgba(249,104,82,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(252,128,134,1) 0%,rgba(255,0,0,1) 100%,rgba(249,104,82,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(252,128,134,1) 0%,rgba(255,0,0,1) 100%,rgba(249,104,82,1) 100%); background: radial-gradient(ellipse at center, rgba(252,128,134,1) 0%,rgba(255,0,0,1) 100%,rgba(249,104,82,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc8086', endColorstr='#f96852',GradientType=1 ); } .blade2 { transform: rotateZ(90deg); top: 156px; left: 308px; background: rgb(102,201,107); background: -moz-radial-gradient(center, ellipse cover, rgba(102,201,107,1) 0%, rgba(111,158,104,1) 0%, rgba(69,130,42,1) 100%, rgba(111,158,104,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(102,201,107,1)), color-stop(0%,rgba(111,158,104,1)), color-stop(100%,rgba(69,130,42,1)), color-stop(100%,rgba(111,158,104,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(102,201,107,1) 0%,rgba(111,158,104,1) 0%,rgba(69,130,42,1) 100%,rgba(111,158,104,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(102,201,107,1) 0%,rgba(111,158,104,1) 0%,rgba(69,130,42,1) 100%,rgba(111,158,104,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(102,201,107,1) 0%,rgba(111,158,104,1) 0%,rgba(69,130,42,1) 100%,rgba(111,158,104,1) 100%); background: radial-gradient(ellipse at center, rgba(102,201,107,1) 0%,rgba(111,158,104,1) 0%,rgba(69,130,42,1) 100%,rgba(111,158,104,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66c96b', endColorstr='#6f9e68',GradientType=1 ); } .blade3 { transform: rotateZ(180deg); top: 285px; left: 178px; background: rgb(208,228,247); background: -moz-radial-gradient(center, ellipse cover, rgba(208,228,247,1) 0%, rgba(238,247,158,1) 0%, rgba(240,252,12,1) 48%, rgba(238,247,163,1) 99%, rgba(238,247,163,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(208,228,247,1)), color-stop(0%,rgba(238,247,158,1)), color-stop(48%,rgba(240,252,12,1)), color-stop(99%,rgba(238,247,163,1)), color-stop(100%,rgba(238,247,163,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(208,228,247,1) 0%,rgba(238,247,158,1) 0%,rgba(240,252,12,1) 48%,rgba(238,247,163,1) 99%,rgba(238,247,163,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(208,228,247,1) 0%,rgba(238,247,158,1) 0%,rgba(240,252,12,1) 48%,rgba(238,247,163,1) 99%,rgba(238,247,163,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(208,228,247,1) 0%,rgba(238,247,158,1) 0%,rgba(240,252,12,1) 48%,rgba(238,247,163,1) 99%,rgba(238,247,163,1) 100%); background: radial-gradient(ellipse at center, rgba(208,228,247,1) 0%,rgba(238,247,158,1) 0%,rgba(240,252,12,1) 48%,rgba(238,247,163,1) 99%,rgba(238,247,163,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#eef7a3',GradientType=1 ); } .blade4 { transform: rotateZ(-90deg); top: 158px; left: 41px; background: rgb(208,228,247); background: -moz-radial-gradient(center, ellipse cover, rgba(208,228,247,1) 0%, rgba(115,177,231,1) 0%, rgba(10,119,213,1) 50%, rgba(83,159,225,1) 100%, rgba(135,188,234,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(208,228,247,1)), color-stop(0%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(100%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 0%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 100%,rgba(135,188,234,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 0%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 100%,rgba(135,188,234,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 0%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 100%,rgba(135,188,234,1) 100%); background: radial-gradient(ellipse at center, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 0%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 100%,rgba(135,188,234,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=1 ); } .center { width: 76px; height: 76px; top: 50%; left: 50%; position: absolute; margin-top: -40px; margin-left: -40px; border: 2px solid #000000; border-radius: 50%; background: rgb(245,246,246); background: -moz-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 8%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 92%, rgba(245,246,246,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(245,246,246,1)), color-stop(8%,rgba(219,220,226,1)), color-stop(49%,rgba(184,186,198,1)), color-stop(92%,rgba(221,223,227,1)), color-stop(100%,rgba(245,246,246,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 8%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 92%,rgba(245,246,246,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 8%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 92%,rgba(245,246,246,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 8%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 92%,rgba(245,246,246,1) 100%); background: radial-gradient(ellipse at center, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 8%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 92%,rgba(245,246,246,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=1 ); } @keyframes fan { 0% {transform: rotate(0deg) } 100% {transform: rotate(36000deg) } } .grid, .grid1, .grid2, .grid3, .grid4, .grid5 { border: 8px solid #919191; width: 484px; height: 484px; top: 50%; left: 50%; margin-top: -250px; margin-left:-250px; position: absolute; border-radius: 50%; box-sizing: content-box; } .grid1 {transform: scale(0.8);} .grid2 {transform: scale(0.6);} .grid3 {transform: scale(0.4);} .grid4 {transform: scale(0.2);} .grid5 {transform: scale(0.1);} /* ==== Grid Cross Bars ===== */ .upright1, .upright2, .upright3 { margin: 0px 0px 0px 239px; height: 218px; background-color: #919191; width: 5px; position: relative; box-sizing: content-box; } .upright2 { margin: -20px 0px 0px 125px; height: 220px; transform: rotateZ(-120deg); } .upright3 { margin: -220px 0px 0px 358px; height: 224px; transform: rotateZ(120deg); } /* ========= Switch ========= */ #control { margin: 3em auto 1.5em auto; width: 80%; position: relative; text-align: center; } button { padding: 4px 8px; margin: 0.5em; font-family: Stencil; color: #FFFFFF; background-color: #009900; border: 3px ridge #CCCCCC; text-align: center; font-size: 1.3em; line-height: 1.3em; display: inline-block; } @media screen and (max-width: 480px) { .fan { transform: scale(0.5); margin-left: -20%; transform-origin: top center; } } .low-text {color: #fff;} .high-text {color: #004F00;}

Check out 2 more CSS FANS: FAN and FAN-BOX

]]> https://thingography.com/css-fan-round/feed/ 0 Fan Box CSS Animation https://thingography.com/css-fan-box/ https://thingography.com/css-fan-box/#respond Sun, 18 Feb 2018 20:11:40 +0000 http://thingography.com/my-things/?p=100 .ani-box {height: 600px; overflow: hidden; } .fan-box { padding: 0px 20px 20px -8px; width: 505px; height: 505px; margin-top: 0; margin-right: auto; margin-left: auto; position: relative; box-sizing: content-box; } .blades-box { width: 500px; height: 500px; left: 50%; top: 50%; border-radius: 50%; position: absolute; margin-top: -250px; margin-left: -250px; box-sizing: content-box; } .blades-box { animation: spin 20s linear infinite; } .blade1b, .blade2b, .blade3b, .blade4b, .blade5b { width: 0px; height: 0px; border-radius: 45% 45% 0 0 / 80% 100% 0 0; border-left: 90px solid transparent; border-right: 90px solid transparent; position: absolute; box-shadow:0 0 0 1px #999; } .blade1b { top: 20px; left: 161px; border-top: 200px solid #FFFF00; /* "border-top" will change the blade Color */ } .blade2b { transform: rotateZ(72deg); top: 110px; left: 282px; border-top: 200px solid #0000FF; } .blade3b { transform: rotateZ(144deg); top: 254px; left: 239px; border-top: 200px solid #FF0000; } .blade4b { transform: rotateZ(-144deg); top: 255px; left: 77px; border-top: 200px solid #00FF00; } .blade5b { transform: rotateZ(-72deg); top: 106px; left: 39px; border-top: 200px solid #FF9900; } .centerb { width: 76px; height: 76px; top: 50%; left: 50%; position: absolute; margin-top: -40px; margin-left: -40px; border: 2px solid #000000; border-radius: 50%; background: rgb(245,246,246); background: -moz-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 8%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 92%, rgba(245,246,246,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(245,246,246,1)), color-stop(8%,rgba(219,220,226,1)), color-stop(49%,rgba(184,186,198,1)), color-stop(92%,rgba(221,223,227,1)), color-stop(100%,rgba(245,246,246,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 8%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 92%,rgba(245,246,246,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 8%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 92%,rgba(245,246,246,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 8%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 92%,rgba(245,246,246,1) 100%); background: radial-gradient(ellipse at center, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 8%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 92%,rgba(245,246,246,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=1 ); } @keyframes spin { 0% { transform: rotatez( 0deg);} 25% { transform: rotateZ(1440deg);} 50% { transform: rotateZ(7200deg);} 75% { transform: rotateZ(1440deg);} 100% { transform: rotateZ( 0deg);} } .gridb { border: 8px solid #D1D1D1; width: 484px; height: 484px; top: 50%; left: 50%; margin-top: -251px; margin-left:-249px; position: absolute; border-radius: 7%; box-sizing: content-box; } .bar1, .bar2, .bar3, .bar4, .bar5, .bar6, .bar7, .bar8, .bar9, .bar10, .bar11 { width: 484px; height: 20px; position: relative; border: 3px solid #D1D1D1; position: relative; margin: 20px 0px 10px -3px; box-sizing: content-box; } .bar1 { margin: 23px 0px 10px -3px; } /* ==== Grid Cross Bars ===== */ .upright { margin: -480px 0px 0px 156px; width: 166px; position: relative; height: 488px; border: 3px solid #D1D1D1; box-sizing: content-box; } @media screen and (max-width: 480px) { .fan-box { transform: scale(0.5); margin-left: -20%; transform-origin: top center; } }

Check out 2 more CSS FANS: FAN and FAN-ROUND

]]> https://thingography.com/css-fan-box/feed/ 0 Fan CSS Animation https://thingography.com/css-fan/ https://thingography.com/css-fan/#respond Sun, 18 Feb 2018 20:10:19 +0000 http://thingography.com/my-things/?p=96 .ani-box {height: 550px; position: relative; overflow: hidden;} .fanbox { margin: -20px auto 0px auto; width: 90%; position: relative; padding-bottom: 2em; height: 416px; width: 416px; box-sizing: content-box; } #grid { border: 6px solid #777; border-radius: 50%; left: 50%; top: 50%; position: absolute; z-index: 3; margin-left: -208px; margin-top: -220px; height: 416px; width: 416px; box-sizing: content-box; } #fan { position: absolute; top: 50%; left: 50%; margin-top: -204px; margin-left: -193px; height: 400px; width: 400px; box-sizing: content-box; } .low { animation: fan 120s linear infinite; } .high { animation: fan 40s linear infinite; } @keyframes fan { 0% {transform: rotate(0deg) } 100% {transform: rotate(36000deg)} } /* ========= Switch ========= */ #control { margin: 0em auto .5em auto; width: 80%; position: relative; text-align: center; } button { padding: 5px 8px; margin: 0.5em; color: #FFFFFF; background-color: #009900; border: 3px ridge #CCCCCC; text-align: center; font-size: 1.1em; line-height: 1em; display: inline-block; } @media screen and (max-width: 480px) { .fanbox { transform: scale(0.5); margin-left: -10%; } #grid { display: none; } } #speed span {top: -20px; padding-bottom: 10px; vertical-align: text-top;} .low-text {color: #fff;} .high-text {color: #004F00;}
fan
grid

This switch may not work in Internet Explorer –
Check out 2 more CSS FANS: FAN-BOX and FAN-ROUND

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