{"id":100,"date":"2018-02-18T20:11:40","date_gmt":"2018-02-18T20:11:40","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=100"},"modified":"2019-02-18T21:21:21","modified_gmt":"2019-02-18T21:21:21","slug":"css-fan-box","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-fan-box\/","title":{"rendered":"Fan Box CSS Animation"},"content":{"rendered":"<style>\n.ani-box {height: 600px; overflow: hidden; }\n.fan-box {\n\tpadding: 0px 20px 20px -8px;\n\twidth: 505px;\n\theight: 505px;\n\tmargin-top: 0;\n\tmargin-right: auto;\n\tmargin-left: auto;\n\tposition: relative;\nbox-sizing: content-box;\n}\n.blades-box {\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;\nbox-sizing: content-box;\n}\n.blades-box {\n\tanimation: spin 20s linear infinite;\n}\n.blade1b, .blade2b, .blade3b, .blade4b, .blade5b {\n\twidth: 0px;\n\theight: 0px;\n\tborder-radius: 45% 45% 0 0 \/ 80% 100% 0 0;\n\tborder-left: 90px solid transparent;\n\tborder-right: 90px solid transparent;\n\tposition: absolute;\n\tbox-shadow:0 0 0 1px #999;\n}\n.blade1b {\n\ttop: 20px;\n\tleft: 161px;\n\tborder-top: 200px solid #FFFF00; \/* \"border-top\" will change the blade Color *\/\n}\n.blade2b {\n\ttransform: rotateZ(72deg);\n\ttop: 110px;\n\tleft: 282px;\n\tborder-top: 200px solid #0000FF;\n}\n.blade3b {\n\ttransform: rotateZ(144deg);\n\ttop: 254px;\n\tleft: 239px;\n\tborder-top: 200px solid #FF0000;\n}\n.blade4b {\n\ttransform: rotateZ(-144deg);\n\ttop: 255px;\n\tleft: 77px;\n\tborder-top: 200px solid #00FF00;\n}\n.blade5b {\n\ttransform: rotateZ(-72deg);\n\ttop: 106px;\n\tleft: 39px;\n\tborder-top: 200px solid #FF9900;\n}\n.centerb {\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 spin {\n\t0%   { transform: rotatez(   0deg);}\n\t25%  { transform: rotateZ(1440deg);}\n\t50%  { transform: rotateZ(7200deg);}\n\t75%  { transform: rotateZ(1440deg);}\n\t100% { transform: rotateZ(   0deg);}\n}\n.gridb {\n\tborder: 8px solid #D1D1D1;\n\twidth: 484px;\n\theight: 484px;\n\ttop: 50%;\n\tleft: 50%;\n\tmargin-top: -251px;\n\tmargin-left:-249px;\n\tposition: absolute;\n\tborder-radius: 7%;\nbox-sizing: content-box;\n}\n.bar1, .bar2, .bar3, .bar4, .bar5, .bar6, .bar7, .bar8, .bar9, .bar10, .bar11 {\n\twidth: 484px;\n\theight: 20px;\n\tposition: relative;\n\tborder: 3px solid #D1D1D1;\n\tposition: relative;\n\tmargin: 20px 0px 10px -3px;\nbox-sizing: content-box;\n}\n.bar1 {\n\tmargin: 23px 0px 10px -3px;\n}\n\/* ==== Grid Cross Bars  ===== *\/\n.upright {\n\tmargin: -480px 0px 0px 156px;\n\twidth: 166px;\n\tposition: relative;\n\theight: 488px;\n\tborder: 3px solid #D1D1D1;\nbox-sizing: content-box;\n}\n@media screen and (max-width: 480px) {\n    .fan-box {\n        transform: scale(0.5);\n        margin-left: -20%;\ntransform-origin: top center;\n    }\n}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"fan-box\">\n<div class=\"blades-box\">\n<div class=\"blade1b\"><\/div>\n<div class=\"blade2b\"><\/div>\n<div class=\"blade3b\"><\/div>\n<div class=\"blade4b\"><\/div>\n<div class=\"blade5b\"><\/div>\n<div class=\"centerb\"><\/div>\n<\/p><\/div>\n<p>  <!--  Close Blades-box --><\/p>\n<div class=\"gridb\">\n<div class=\"bar1\"><\/div>\n<div class=\"bar2\"><\/div>\n<div class=\"bar3\"><\/div>\n<div class=\"bar4\"><\/div>\n<div class=\"bar5\"><\/div>\n<div class=\"bar6\"><\/div>\n<div class=\"bar7\"><\/div>\n<div class=\"bar8\"><\/div>\n<div class=\"bar9\"><\/div>\n<div class=\"bar10\"><\/div>\n<div class=\"upright\"><\/div>\n<\/p><\/div>\n<p> <!--  Close Gridb --><\/p><\/div>\n<p>   <!--  Close Fan-box --><\/p>\n<\/div>\n<p> <!-- Ani-box  --><\/p>\n<p class=\"below-ani\">Check out 2 more CSS FANS: <a class=\"tooltip\" href=\"http:\/\/www.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=\"http:\/\/www.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><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Check out 2 more CSS FANS: FAN and FAN-ROUND<\/p>\n","protected":false},"author":2,"featured_media":2583,"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\/100"}],"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=100"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/100\/revisions"}],"predecessor-version":[{"id":2850,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/100\/revisions\/2850"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2583"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}