{"id":1966,"date":"2018-03-12T15:09:13","date_gmt":"2018-03-12T15:09:13","guid":{"rendered":"http:\/\/thingography.com\/?p=1966"},"modified":"2025-02-13T20:58:10","modified_gmt":"2025-02-13T20:58:10","slug":"css-target","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-target\/","title":{"rendered":"Bull&#8217;s-eye &#038; Arrows Pure CSS Animation"},"content":{"rendered":"<style>\n.ani-box {width: 100%; height: 500px;\n}\n#target {\n\tmargin: 0 auto;\n\tborder-width: medium;\n\tborder-color: #CC3300;\n\twidth: 100%;\n\theight: 400px;\n\tposition: relative;\n}\n.arrow1, .arrow2, .arrow3 {\n\theight: 300px;\n\twidth: 50px;\n\tz-index: 2;\n\tposition: absolute;\n}\n.arrow1 {\n\tanimation: arrow1 10s linear infinite;\n}\n.arrow2 {\n\tleft: 25px;\n\tanimation: arrow2 10s linear infinite;\n}\n.arrow3 {\n\tleft: 50px;\n\tanimation: arrow3 10s linear infinite;\n}\n@keyframes arrow1 {\n\t0%   {top:200%; left: 50%; transform:rotateX( 0deg) scale(2,2);}\n\t30%  {top: 50%; left: 50%; transform:rotateX(80deg) scale(1,1);}\n\t100% {top: 50%; left: 50%; transform:rotateX(80deg) scale(1,1);}\n}\n@keyframes arrow2 {\n\t0%   {top:200%; left: 50%; transform:rotateX( 0deg) scale(2,2);}\n\t30%  {top:200%; left: 50%; transform:rotateX( 0deg) scale(2,2);}\n\t60%  {top: 30%; left: 47%; transform:rotateX(80deg) scale(1,1);}\n\t100% {top: 30%; left: 47%; transform:rotateX(80deg) scale(1,1);}\n} \n@keyframes arrow3 {\n\t0%   {top:200%; left: 49%; transform:rotateX( 0deg) scale(2,2);}\n\t60%  {top:200%; left: 49%; transform:rotateX( 0deg) scale(2,2);}\n\t90%  {top: 24%; left: 49%; transform:rotateX(80deg) scale(1,1);}\n\t100% {top: 24%; left: 49%; transform:rotateX(80deg) scale(1,1);}\n} \n.point1, .point2, .point3 {\n\tmargin: 0px 0px 0px 5.5px;\n\twidth: 0;\n\theight: 0;\n\tz-index: 2;\n\tborder-left: 10px solid transparent;\n\tborder-right: 10px solid transparent;\n\tborder-bottom: 30px solid #727272;\n\tposition: relative;\n}\n@keyframes point1 {\n\t0%   {opacity: 1;}\n\t30%  {opacity: 1;}\n\t30.1%{opacity: 0;}\n\t100% {opacity: 0;}\n} \n@keyframes point2 {\n\t0%   {opacity: 1;}\n\t60%  {opacity: 1;}\n\t60.1%{opacity: 0;}\n\t100% {opacity: 0;}\n} \n@keyframes point3 {\n\t0%   {opacity: 1;}\n\t90%  {opacity: 1;}\n\t90.1%{opacity: 0;}\n\t100% {opacity: 0;}\n} \n.point1 {\n\tanimation: point1 10s linear infinite;\n}\n.point2 {\n\tanimation: point2 10s linear infinite;\n}\n.point3 {\n\tanimation: point3 10s linear infinite;\n}\n.shaft {\n\twidth: 10px;\n\theight: 200px;\n\tz-index: 1;\n\tbackground-color: #000000;\n\tmargin: 0px 0px 0px 10px;\n\tposition: relative;\n\tbackground: #454f77; \n\tbackground: -moz-linear-gradient(left,  #454f77 21%, #f9f5f4 34%, #fc1b07 50%, #f7f5f4 69%, #454f77 83%); \n\tbackground: -webkit-gradient(linear, left top, right top, color-stop(21%,#454f77), color-stop(34%,#f9f5f4), color-stop(50%,#fc1b07), color-stop(69%,#f7f5f4), color-stop(83%,#454f77)); \/* Chrome,Safari4+ *\/\n\tbackground: -webkit-linear-gradient(left,  #454f77 21%,#f9f5f4 34%,#fc1b07 50%,#f7f5f4 69%,#454f77 83%); \n\tbackground: -o-linear-gradient(left,  #454f77 21%,#f9f5f4 34%,#fc1b07 50%,#f7f5f4 69%,#454f77 83%);\n\tbackground: -ms-linear-gradient(left,  #454f77 21%,#f9f5f4 34%,#fc1b07 50%,#f7f5f4 69%,#454f77 83%); \n\tbackground: linear-gradient(to right,  #454f77 21%,#f9f5f4 34%,#fc1b07 50%,#f7f5f4 69%,#454f77 83%); \n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454f77', endColorstr='#454f77',GradientType=1 );\n}\n.fletching, .fletching2 {\n\tmargin: -60px 0px 0px 15px;\n\twidth: 12px;\n\theight: 50px;\n\tbackground: red;\n\tz-index: 0;\n\ttransform:skew(10deg);\n\tposition: relative;\n\tbackground: #e5e6e8; \n\tbackground: -moz-linear-gradient(top,  #e5e6e8 0%, #fc5849 6%, #f9f7f7 14%, #3a3fc4 22%, #fcf8f7 30%, #ff4f4f 38%, #3845bc 46%, #fcf9fa 54%, #fc5546 63%, #f9f7f7 71%, #5762bf 79%, #f94f43 87%, #f7f0ef 95%, #f7f0ef 95%, #f7f0ef 95%); \n\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e6e8), color-stop(6%,#fc5849), color-stop(14%,#f9f7f7), color-stop(22%,#3a3fc4), color-stop(30%,#fcf8f7), color-stop(38%,#ff4f4f), color-stop(46%,#3845bc), color-stop(54%,#fcf9fa), color-stop(63%,#fc5546), color-stop(71%,#f9f7f7), color-stop(79%,#5762bf), color-stop(87%,#f94f43), color-stop(95%,#f7f0ef), color-stop(95%,#f7f0ef), color-stop(95%,#f7f0ef)); \n\tbackground: -webkit-linear-gradient(top,  #e5e6e8 0%,#fc5849 6%,#f9f7f7 14%,#3a3fc4 22%,#fcf8f7 30%,#ff4f4f 38%,#3845bc 46%,#fcf9fa 54%,#fc5546 63%,#f9f7f7 71%,#5762bf 79%,#f94f43 87%,#f7f0ef 95%,#f7f0ef 95%,#f7f0ef 95%);\n\tbackground: -o-linear-gradient(top,  #e5e6e8 0%,#fc5849 6%,#f9f7f7 14%,#3a3fc4 22%,#fcf8f7 30%,#ff4f4f 38%,#3845bc 46%,#fcf9fa 54%,#fc5546 63%,#f9f7f7 71%,#5762bf 79%,#f94f43 87%,#f7f0ef 95%,#f7f0ef 95%,#f7f0ef 95%);\n\tbackground: -ms-linear-gradient(top,  #e5e6e8 0%,#fc5849 6%,#f9f7f7 14%,#3a3fc4 22%,#fcf8f7 30%,#ff4f4f 38%,#3845bc 46%,#fcf9fa 54%,#fc5546 63%,#f9f7f7 71%,#5762bf 79%,#f94f43 87%,#f7f0ef 95%,#f7f0ef 95%,#f7f0ef 95%);\n\tbackground: linear-gradient(to bottom,  #e5e6e8 0%,#fc5849 6%,#f9f7f7 14%,#3a3fc4 22%,#fcf8f7 30%,#ff4f4f 38%,#3845bc 46%,#fcf9fa 54%,#fc5546 63%,#f9f7f7 71%,#5762bf 79%,#f94f43 87%,#f7f0ef 95%,#f7f0ef 95%,#f7f0ef 95%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e6e8', endColorstr='#f7f0ef',GradientType=0 ); \n}\n.fletching2 {\n\tmargin: -50px 0px 0px 3px;\n\ttransform: rotateY(180deg) skew(10deg);\n}\n.bullseye {\n\ttop: 50%;\n\tleft: 50%;\n\tposition: absolute;\n\twidth: 400px;\n\theight: 400px;\n\tmargin: -200px 0px 0px -200px;\n\tborder-radius: 50%;\n\tbox-shadow: 0 0 50px 5px #808080, 0 0 0px 0px #FF0000 inset;\n\tbackground: #ffff00;\n\tbackground: -moz-radial-gradient(center, ellipse cover,  #ffff00 0%, #fff00f 11%, #ff0000 12%, #ff0000 25%, #0093dd 25%, #0093dd 38%, #000000 38%, #2b2b2b 51%, #ffffff 51%, #ffffff 63%, #000000 63%, #ffffff 84%, #2b2b2b 100%); \n\tbackground: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffff00), color-stop(11%,#fff00f), color-stop(12%,#ff0000), color-stop(25%,#ff0000), color-stop(25%,#0093dd), color-stop(38%,#0093dd), color-stop(38%,#000000), color-stop(51%,#2b2b2b), color-stop(51%,#ffffff), color-stop(63%,#ffffff), color-stop(63%,#000000), color-stop(84%,#ffffff), color-stop(100%,#2b2b2b)); \n\tbackground: -webkit-radial-gradient(center, ellipse cover,  #ffff00 0%,#fff00f 11%,#ff0000 12%,#ff0000 25%,#0093dd 25%,#0093dd 38%,#000000 38%,#2b2b2b 51%,#ffffff 51%,#ffffff 63%,#000000 63%,#ffffff 84%,#2b2b2b 100%); \n\tbackground: -o-radial-gradient(center, ellipse cover,  #ffff00 0%,#fff00f 11%,#ff0000 12%,#ff0000 25%,#0093dd 25%,#0093dd 38%,#000000 38%,#2b2b2b 51%,#ffffff 51%,#ffffff 63%,#000000 63%,#ffffff 84%,#2b2b2b 100%);\n\tbackground: -ms-radial-gradient(center, ellipse cover,  #ffff00 0%,#fff00f 11%,#ff0000 12%,#ff0000 25%,#0093dd 25%,#0093dd 38%,#000000 38%,#2b2b2b 51%,#ffffff 51%,#ffffff 63%,#000000 63%,#ffffff 84%,#2b2b2b 100%); \n\tbackground: radial-gradient(ellipse at center,  #ffff00 0%,#fff00f 11%,#ff0000 12%,#ff0000 25%,#0093dd 25%,#0093dd 38%,#000000 38%,#2b2b2b 51%,#ffffff 51%,#ffffff 63%,#000000 63%,#ffffff 84%,#2b2b2b 100%); \n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#2b2b2b',GradientType=1 ); \n}\n@media only screen and (max-width: 721px) {\n    #target  {transform: scale(0.7);}\n}\n@media only screen and (max-width: 481px) {\n    #target  {transform: scale(0.4);}\n.bullseye {transform: scale(0.7);}  \n}\n<\/style>\n<div class=\"ani-box\">\n<div id=\"target\">\n<div class=\"arrow1\">\n<div class=\"point1\"><\/div>\n<div class=\"shaft\"><\/div>\n<div class=\"fletching\"><\/div>\n<div class=\"fletching2\"><\/div>\n<\/p><\/div>\n<div class=\"arrow2\">\n<div class=\"point2\"><\/div>\n<div class=\"shaft\"><\/div>\n<div class=\"fletching\"><\/div>\n<div class=\"fletching2\"><\/div>\n<\/p><\/div>\n<div class=\"arrow3\">\n<div class=\"point3\"><\/div>\n<div class=\"shaft\"><\/div>\n<div class=\"fletching\"><\/div>\n<div class=\"fletching2\"><\/div>\n<\/p><\/div>\n<div class=\"bullseye\"><\/div>\n<\/p><\/div>\n<p><!-- target --><\/p>\n<\/div>\n<p> <!-- Ani-box  --><\/p>\n<div class=\"below-ani\"> This was an enlightening project, as it showed me how flexible CSS can be with imagination. A pure CSS bulls-eye target and arrows all made with purely CSS.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This was an enlightening project, as it showed me how flexible CSS can be with imagination. A pure CSS bulls-eye target and arrows all made with purely CSS.<\/p>\n","protected":false},"author":2,"featured_media":2610,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,190,192,4,5,16,191],"class_list":["post-1966","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-arroes","tag-bulls-eye","tag-css","tag-css-animation","tag-pure-css","tag-target"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1966","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=1966"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1966\/revisions"}],"predecessor-version":[{"id":2635,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1966\/revisions\/2635"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2610"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=1966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=1966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=1966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}