arroes – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:16:04 +0000 en-US hourly 1 Bull’s-eye & Arrows Pure CSS Animation https://thingography.com/css-target/ https://thingography.com/css-target/#respond Mon, 12 Mar 2018 15:09:13 +0000 http://thingography.com/?p=1966 .ani-box {width: 100%; height: 500px; } #target { margin: 0 auto; border-width: medium; border-color: #CC3300; width: 100%; height: 400px; position: relative; } .arrow1, .arrow2, .arrow3 { height: 300px; width: 50px; z-index: 2; position: absolute; } .arrow1 { animation: arrow1 10s linear infinite; } .arrow2 { left: 25px; animation: arrow2 10s linear infinite; } .arrow3 { left: 50px; animation: arrow3 10s linear infinite; } @keyframes arrow1 { 0% {top:200%; left: 50%; transform:rotateX( 0deg) scale(2,2);} 30% {top: 50%; left: 50%; transform:rotateX(80deg) scale(1,1);} 100% {top: 50%; left: 50%; transform:rotateX(80deg) scale(1,1);} } @keyframes arrow2 { 0% {top:200%; left: 50%; transform:rotateX( 0deg) scale(2,2);} 30% {top:200%; left: 50%; transform:rotateX( 0deg) scale(2,2);} 60% {top: 30%; left: 47%; transform:rotateX(80deg) scale(1,1);} 100% {top: 30%; left: 47%; transform:rotateX(80deg) scale(1,1);} } @keyframes arrow3 { 0% {top:200%; left: 49%; transform:rotateX( 0deg) scale(2,2);} 60% {top:200%; left: 49%; transform:rotateX( 0deg) scale(2,2);} 90% {top: 24%; left: 49%; transform:rotateX(80deg) scale(1,1);} 100% {top: 24%; left: 49%; transform:rotateX(80deg) scale(1,1);} } .point1, .point2, .point3 { margin: 0px 0px 0px 5.5px; width: 0; height: 0; z-index: 2; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid #727272; position: relative; } @keyframes point1 { 0% {opacity: 1;} 30% {opacity: 1;} 30.1%{opacity: 0;} 100% {opacity: 0;} } @keyframes point2 { 0% {opacity: 1;} 60% {opacity: 1;} 60.1%{opacity: 0;} 100% {opacity: 0;} } @keyframes point3 { 0% {opacity: 1;} 90% {opacity: 1;} 90.1%{opacity: 0;} 100% {opacity: 0;} } .point1 { animation: point1 10s linear infinite; } .point2 { animation: point2 10s linear infinite; } .point3 { animation: point3 10s linear infinite; } .shaft { width: 10px; height: 200px; z-index: 1; background-color: #000000; margin: 0px 0px 0px 10px; position: relative; background: #454f77; background: -moz-linear-gradient(left, #454f77 21%, #f9f5f4 34%, #fc1b07 50%, #f7f5f4 69%, #454f77 83%); background: -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+ */ background: -webkit-linear-gradient(left, #454f77 21%,#f9f5f4 34%,#fc1b07 50%,#f7f5f4 69%,#454f77 83%); background: -o-linear-gradient(left, #454f77 21%,#f9f5f4 34%,#fc1b07 50%,#f7f5f4 69%,#454f77 83%); background: -ms-linear-gradient(left, #454f77 21%,#f9f5f4 34%,#fc1b07 50%,#f7f5f4 69%,#454f77 83%); background: linear-gradient(to right, #454f77 21%,#f9f5f4 34%,#fc1b07 50%,#f7f5f4 69%,#454f77 83%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454f77', endColorstr='#454f77',GradientType=1 ); } .fletching, .fletching2 { margin: -60px 0px 0px 15px; width: 12px; height: 50px; background: red; z-index: 0; transform:skew(10deg); position: relative; background: #e5e6e8; background: -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%); background: -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)); background: -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%); background: -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%); background: -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%); background: 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%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e6e8', endColorstr='#f7f0ef',GradientType=0 ); } .fletching2 { margin: -50px 0px 0px 3px; transform: rotateY(180deg) skew(10deg); } .bullseye { top: 50%; left: 50%; position: absolute; width: 400px; height: 400px; margin: -200px 0px 0px -200px; border-radius: 50%; box-shadow: 0 0 50px 5px #808080, 0 0 0px 0px #FF0000 inset; background: #ffff00; background: -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%); background: -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)); background: -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%); background: -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%); background: -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%); background: 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%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#2b2b2b',GradientType=1 ); } @media only screen and (max-width: 721px) { #target {transform: scale(0.7);} } @media only screen and (max-width: 481px) { #target {transform: scale(0.4);} .bullseye {transform: scale(0.7);} }

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.
]]> https://thingography.com/css-target/feed/ 0