{"id":96,"date":"2018-02-18T20:10:19","date_gmt":"2018-02-18T20:10:19","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=96"},"modified":"2025-02-13T21:09:48","modified_gmt":"2025-02-13T21:09:48","slug":"css-fan","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-fan\/","title":{"rendered":"Fan CSS Animation"},"content":{"rendered":"<style>\n.ani-box {height: 550px; position: relative; overflow: hidden;}\n.fanbox {\n\tmargin: -20px auto 0px auto;\n\twidth: 90%;\n\tposition: relative;\n\tpadding-bottom: 2em;\n\theight: 416px;\n        width: 416px;\n box-sizing: content-box;\n}\n#grid {\n\tborder: 6px solid #777;\n\tborder-radius: 50%;\n\tleft: 50%;\n\ttop: 50%;\n\tposition: absolute;\n\tz-index: 3;\n\tmargin-left: -208px;\n\tmargin-top: -220px;\n\theight: 416px;\n        width: 416px;\n box-sizing: content-box;\n}\n#fan {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\tmargin-top: -204px;\n\tmargin-left: -193px;\n\theight: 400px;\n        width: 400px;\n box-sizing: content-box;\n}\n.low {\n\tanimation: fan 120s linear infinite;\n}\n.high {\n\tanimation: fan 40s linear infinite;\n}\n@keyframes fan {\n\t0%   {transform: rotate(0deg) }\n\t100% {transform: rotate(36000deg)}\n}\n\/*  ========= Switch  =========  *\/\n#control {\n\tmargin: 0em auto .5em auto;\n\twidth: 80%;\n\tposition: relative;\n\ttext-align: center;\n}\nbutton {\n\tpadding: 5px 8px;\n\tmargin: 0.5em;\n\tcolor: #FFFFFF;\n\tbackground-color: #009900;\n\tborder: 3px ridge #CCCCCC;\n\ttext-align: center;\n\tfont-size: 1.1em;\n\tline-height: 1em;\n\tdisplay: inline-block;\n}\n@media screen and (max-width: 480px) {\n    .fanbox {\n        transform: scale(0.5);\n        margin-left: -10%;\n    }\n    #grid {\n        display: none;\n    }\n}\n#speed span {top: -20px; padding-bottom: 10px; vertical-align: text-top;}\n.low-text {color: #fff;}\n.high-text {color: #004F00;}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"fanbox\">\n    <img loading=\"lazy\" decoding=\"async\"  class=\"low\" id=\"fan\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/fan\/fan.png\" alt=\"fan\" width=\"400\" height=\"400\"\/><br \/>\n    <img loading=\"lazy\" decoding=\"async\"  id=\"grid\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/fan\/grid420.png\" alt=\"grid\" width=\"416\" height=\"416\"\/>\n  <\/div>\n<p>  <!-- Close fanbox  --><\/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\">This switch may not work in Internet Explorer &#8211;<br \/>\nCheck out 2 more CSS FANS: <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> and <a class=\"tooltip\" href=\"https:\/\/thingography.com\/css-fan-round\/\" title=\"This a Pure CSS Fan with a Cool Clean look and a little javascript just for the High-low switch \">FAN-ROUND<\/a>\n<\/p>\n<p><script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/jquery-1.9.1.min.js\"><\/script><\/p>\n<p><script>\n$(\"#speed\").click(function() {\n    $(\"#fan\").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 This switch may not work in Internet Explorer &#8211; Check out 2 more CSS FANS: FAN-BOX and FAN-ROUND<\/p>\n","protected":false},"author":2,"featured_media":2585,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,19,16],"class_list":["post-96","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-css","tag-css-animation","tag-fan","tag-pure-css"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/96","targetHints":{"allow":["GET"]}}],"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=96"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/96\/revisions"}],"predecessor-version":[{"id":3823,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/96\/revisions\/3823"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2585"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=96"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=96"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=96"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}