{"id":103,"date":"2018-02-18T20:32:38","date_gmt":"2018-02-18T20:32:38","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=103"},"modified":"2019-02-18T23:05:49","modified_gmt":"2019-02-18T23:05:49","slug":"css-fan-round","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-fan-round\/","title":{"rendered":"Fan Pure CSS Animation"},"content":{"rendered":"<style>\n.ani-box {height: 700px; position:relative; overflow: hidden;\n\tbackground: linear-gradient(to bottom, rgba(56,101,153,1) 0%,rgba(149,177,201,1) 37%,rgba(211,221,229,1) 77%);\n\tbackground-color: #39466b;\n\tbackground-image:url('data:image\/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPgoJPGRlZnM+CgkJPHBhdHRlcm4gaWQ9J3RpbGUnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnIHdpZHRoPSc3NScgaGVpZ2h0PSc3NScgdmlld0JveD0nMCAwIDUwIDUwJz4KCQkJPGxpbmUgeDE9JzEnIHkxPScwJyB4Mj0nNTEnIHkyPSc1MCcgc3Ryb2tlPScjODc5YWYwJyBzdHJva2Utd2lkdGg9JzcuNicvPgoJCQk8bGluZSB4MT0nNDknIHkxPScwJyB4Mj0nLTEnIHkyPSc1MCcgc3Ryb2tlPScjODc5YWYwJyBzdHJva2Utd2lkdGg9JzcuNicvPgoJCQk8bGluZSB4MT0nNTAnIHkxPScwJyB4Mj0nMCcgeTI9JzUwJyBzdHJva2U9JyMzMTM3NjMnIHN0cm9rZS13aWR0aD0nNy42Jy8+CgkJCTxsaW5lIHgxPScwJyB5MT0nMCcgeDI9JzUwJyB5Mj0nNTAnIHN0cm9rZT0nIzMxMzc2Mycgc3Ryb2tlLXdpZHRoPSc3LjYnLz4KCQk8L3BhdHRlcm4+CgkJPHJhZGlhbEdyYWRpZW50IGlkPSdsJyBjeD0nNTAlJyBjeT0nMjAwJScgZnk9JzAnIHI9JzIwMSUnPgoJCQk8c3RvcCBvZmZzZXQ9JzAlJyBzdHlsZT0nc3RvcC1jb2xvcjojZmZmOyBzdG9wLW9wYWNpdHk6LjE7JyAvPgoJCQk8c3RvcCBvZmZzZXQ9JzEwJScgc3R5bGU9J3N0b3AtY29sb3I6IzAwMDsgc3RvcC1vcGFjaXR5OjAuMTsnIC8+CgkJCTxzdG9wIG9mZnNldD0nMzAlJyBzdHlsZT0nc3RvcC1jb2xvcjojMDAwOyBzdG9wLW9wYWNpdHk6MC4zOycgLz4KCQkJPHN0b3Agb2Zmc2V0PSc5MCUnIHN0eWxlPSdzdG9wLWNvbG9yOiMwMDA7IHN0b3Atb3BhY2l0eTowLjU1OycgLz4KCQkJPHN0b3Agb2Zmc2V0PScxMDAlJyBzdHlsZT0nc3RvcC1jb2xvcjojMDAwOyBzdG9wLW9wYWNpdHk6LjYnIC8+CgkJPC9yYWRpYWxHcmFkaWVudD4KCTwvZGVmcz4KCTxyZWN0IGZpbGw9JyMzOTQ2NmInIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnLz4KCTxyZWN0IGZpbGw9J3VybCgjdGlsZSknIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnLz4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3VybCgjbCknLz4KPC9zdmc+');\n\t-webkit-background-size: cover;\n\t-moz-background-size: cover;\n\t-o-background-size: cover;\n\tbackground-size: cover;\n}\n.fan {\n\twidth: 500px;\n\theight: 500px;\n\tmargin: 0px auto 1em auto;\n\tposition: relative;\ntop: 30px;\nbox-sizing: content-box;\n}\n#blades {\n\twidth: 500px;\n\theight: 500px;\n\tleft: 50%;\n\ttop: 50%;\n\tborder-radius: 50%;\n\tposition: absolute;\n\tmargin-top: -250px;\n\tmargin-left: -250px;\n}\n.blades {\n\tanimation: fan 100s linear infinite;\n}\n.high {\n\tanimation: fan 40s linear infinite;\n}\n.blade1, .blade2, .blade3, .blade4, .blade5 {\n\tborder: 1px solid #969696;\n\tdisplay: block;\n\twidth: 150px;\n\theight: 195px;\n\tborder-radius: 50% 50% 50% 50% \/ 40% 40% 60% 60%;\n\tbox-shadow: 0px 0px 5px 0px #000000;\n\tposition: absolute;\n}\n.blade1 {\n\ttop: 20px;\n\tleft: 171px;\n\tbackground: rgb(252,128,134);\n\tbackground: -moz-radial-gradient(center, ellipse cover,  rgba(252,128,134,1) 0%, rgba(255,0,0,1) 100%, rgba(249,104,82,1) 100%); \n\tbackground: -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))); \n\tbackground: -webkit-radial-gradient(center, ellipse cover,  rgba(252,128,134,1) 0%,rgba(255,0,0,1) 100%,rgba(249,104,82,1) 100%); \n\tbackground: -o-radial-gradient(center, ellipse cover,  rgba(252,128,134,1) 0%,rgba(255,0,0,1) 100%,rgba(249,104,82,1) 100%); \n\tbackground: -ms-radial-gradient(center, ellipse cover,  rgba(252,128,134,1) 0%,rgba(255,0,0,1) 100%,rgba(249,104,82,1) 100%); \n\tbackground: radial-gradient(ellipse at center,  rgba(252,128,134,1) 0%,rgba(255,0,0,1) 100%,rgba(249,104,82,1) 100%); \n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc8086', endColorstr='#f96852',GradientType=1 );\n}\n.blade2 {\n\ttransform: rotateZ(90deg);\n\ttop: 156px;\n\tleft: 308px;\n\tbackground: rgb(102,201,107); \n\tbackground: -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%); \n\tbackground: -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))); \n\tbackground: -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%); \n\tbackground: -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%); \n\tbackground: -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%); \n\tbackground: 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%); \n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66c96b', endColorstr='#6f9e68',GradientType=1 );\n}\n.blade3 {\n\ttransform: rotateZ(180deg);\n\ttop: 285px;\n\tleft: 178px;\n\tbackground: rgb(208,228,247);\n\tbackground: -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%); \n\tbackground: -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))); \n\tbackground: -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%);\n\tbackground: -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%);\n\tbackground: -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%); \n\tbackground: 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%); \n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#eef7a3',GradientType=1 );\n}\n.blade4 {\n\ttransform: rotateZ(-90deg);\n\ttop: 158px;\n\tleft: 41px;\n\tbackground: rgb(208,228,247); \n\tbackground: -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%); \n\tbackground: -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))); \n\tbackground: -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%); \n\tbackground: -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%); \n\tbackground: -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%); \n\tbackground: 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%); \n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=1 );\n}\n.center {\n\twidth: 76px;\n\theight: 76px;\n\ttop: 50%;\n\tleft: 50%;\n\tposition: absolute;\n\tmargin-top: -40px;\n\tmargin-left: -40px;\n\tborder: 2px solid #000000;\n\tborder-radius: 50%;\n\tbackground: rgb(245,246,246); \n\tbackground: -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%); \n\tbackground: -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))); \n\tbackground: -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%); \n\tbackground: -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%);\n\tbackground: -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%);\n\tbackground: 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%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=1 );\n}\n@keyframes fan {\n\t0%   {transform: rotate(0deg) }\n\t100% {transform: rotate(36000deg) }\n}\n.grid, .grid1, .grid2, .grid3, .grid4, .grid5 {\n\tborder: 8px solid #919191;\n\twidth: 484px;\n\theight: 484px;\n\ttop: 50%;\n\tleft: 50%;\n\tmargin-top: -250px;\n\tmargin-left:-250px;\n\tposition: absolute;\n\tborder-radius: 50%;\nbox-sizing: content-box;\n}\n.grid1 {transform: scale(0.8);}\n.grid2 {transform: scale(0.6);}\n.grid3 {transform: scale(0.4);}\n.grid4 {transform: scale(0.2);}\n.grid5 {transform: scale(0.1);}\n\/* ==== Grid Cross Bars  ===== *\/\n.upright1, .upright2, .upright3 {\n\tmargin: 0px 0px 0px 239px;\n\theight: 218px;\n\tbackground-color: #919191;\n\twidth: 5px;\n\tposition: relative;\nbox-sizing: content-box;\n}\n.upright2 {\n\tmargin: -20px 0px 0px 125px;\n\theight: 220px;\n\ttransform: rotateZ(-120deg);\n}\n.upright3 {\n\tmargin: -220px 0px 0px 358px;\n\theight: 224px;\n\ttransform: rotateZ(120deg);\n}\n\/*  ========= Switch  =========  *\/\n#control {\n\tmargin: 3em auto 1.5em auto;\n\twidth: 80%;\n\tposition: relative;\n\ttext-align: center;\n}\nbutton {\n\tpadding: 4px 8px;\n\tmargin: 0.5em;\n\tfont-family: Stencil;\n\tcolor: #FFFFFF;\n\tbackground-color: #009900;\n\tborder: 3px ridge #CCCCCC;\n\ttext-align: center;\n\tfont-size: 1.3em;\n\tline-height: 1.3em;\n\tdisplay: inline-block;\n}\n@media screen and (max-width: 480px) {\n    .fan {\n        transform: scale(0.5);\n        margin-left: -20%;\n        transform-origin: top center;\n    }\n}\n.low-text {color: #fff;}\n.high-text {color: #004F00;}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"fan\">\n<div class=\"blades\" id=\"blades\">\n<div class=\"blade1\"><\/div>\n<div class=\"blade2\"><\/div>\n<div class=\"blade3\"><\/div>\n<div class=\"blade4\"><\/div>\n<div class=\"center\"><\/div>\n<\/p><\/div>\n<p>  <!-- Blades --><\/p>\n<div class=\"grid\">\n<div class=\"grid1\"><\/div>\n<div class=\"grid2\"><\/div>\n<div class=\"grid3\"><\/div>\n<div class=\"grid4\"><\/div>\n<div class=\"grid5\"><\/div>\n<div class=\"upright1\"><\/div>\n<div class=\"upright2\"><\/div>\n<div class=\"upright3\"><\/div>\n<\/p><\/div>\n<p> <!-- Grid --><\/p><\/div>\n<p> <!-- Fan --><\/p>\n<div id=\"control\">\n    <button id=\"speed\"><span class=\"low-text\">Low <\/span><span class=\"high-text\">High<\/span><\/button>\n  <\/div>\n<\/div>\n<p> <!--  Ani-box --><\/p>\n<p class=\"below-ani\">Check out 2 more CSS FANS: <a class=\"tooltip\" href=\"https:\/\/thingography.com\/css-fan\/\" title=\"Our First CSS Fan animation which uses images and has a low-high switch\">FAN<\/a> and <a class=\"tooltip\" href=\"https:\/\/thingography.com\/css-fan-box\/\" title=\"This a Pure CSS Window or Box Fan with a Cool Clean look. Spinning Blades are automatic (no switch). \">FAN-BOX<\/a>\n<\/p>\n<p><script src=\"https:\/\/code.jquery.com\/jquery-1.12.4.min.js\" integrity=\"sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=\" crossorigin=\"anonymous\"><\/script> <\/p>\n<p><script>\n$(\"#speed\").click(function() {\n    $(\"#blades\").toggleClass(\"low\").toggleClass(\"high\");\n    $(\"#speed span\").toggleClass(\"low-text\").toggleClass(\"high-text\");\n})\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Low High Check out 2 more CSS FANS: FAN and FAN-BOX<\/p>\n","protected":false},"author":2,"featured_media":2584,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,19,16],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/103"}],"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=103"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/103\/revisions"}],"predecessor-version":[{"id":2860,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/103\/revisions\/2860"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2584"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}