{"id":139,"date":"2018-02-18T21:59:05","date_gmt":"2018-02-18T21:59:05","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=139"},"modified":"2025-02-13T21:07:52","modified_gmt":"2025-02-13T21:07:52","slug":"css-spiral","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-spiral\/","title":{"rendered":"Spiral Pure CSS Animation"},"content":{"rendered":"<style>\n.ani-box {height: auto !important; padding: 0 !important;}\n.box {\nmargin-top: -10%;\n  position: relative;\n  width: 100%;\n  padding-top: 100%; \/* 1:1 Aspect Ratio *\/\n  animation: spin 3s infinite linear;\nbox-sizing: content-box;\n}\n.layer0, .layer1, .layer2, .layer3, .layer4, .layer5, .layer6  {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  top: 50%;\n  left: 50%;\n  border-radius: 50%;\n  overflow: hidden;\n  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%);\n  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ffffff',GradientType=1 );\n}\n.layer0 {\n\twidth: 60%;\n\theight: 60%;\n\tmargin-top: -30%;\n\tmargin-left: -29%;\n}\n.layer1 {\n\twidth: 48%;\n\theight: 48%;\n\tmargin-top: -23%;\n\tmargin-left: -24%;\n}\n.layer2 {\n\twidth: 42%;\n\theight: 42%;\n\tmargin-top: -21%;\n\tmargin-left: -22%;\n}\n.layer3 {\n\twidth: 36%;\n\theight: 36%;\n\tmargin-top: -17%;\n\tmargin-left: -18%;\n}\n.layer4 {\n\twidth: 28%;\n\theight: 28%;\n\tmargin-top: -14%;\n\tmargin-left: -13%;\n}\n.layer5 {\n\twidth: 20%;\n\theight: 20%;\n\tmargin-top: -11%;\n\tmargin-left: -10%;\n}\n.layer6 {\n\twidth: 14%;\n\theight: 14%;\n\tmargin-top: -7%;\n\tmargin-left: -6%;\n}\n@keyframes spin {\n\t0%   { transform: rotateZ(  0deg);}\n\t100% { transform: rotateZ(360deg);}\n}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"box\">\n<div class=\"layer0\"><\/div>\n<div class=\"layer1\"><\/div>\n<div class=\"layer2\"><\/div>\n<div class=\"layer3\"><\/div>\n<div class=\"layer4\"><\/div>\n<div class=\"layer5\"><\/div>\n<div class=\"layer6\"><\/div>\n<\/p><\/div>\n<\/div>\n<p> <!--  Ani-box  --><\/p>\n<p class=\"below-ani\"> If you like this Spiral optical illusion animation, check out more Spirals on the <a href=\"https:\/\/thingography.com\/animation\/spiral\/\">Spiral web page.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you like this Spiral optical illusion animation, check out more Spirals on the Spiral web page.<\/p>\n","protected":false},"author":2,"featured_media":2578,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,16,29],"class_list":["post-139","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-css","tag-css-animation","tag-pure-css","tag-spiral"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/139","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=139"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/139\/revisions"}],"predecessor-version":[{"id":2884,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/139\/revisions\/2884"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2578"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}