.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.
]]>