.ani-box {
width: 100%; height: auto; overflow: hidden; background-color: #333;
}
.bg {
width: 100%;
height: 100%;
background-color: #51FFFF;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJyB2aWV3Qm94PScwIDAgMjQzIDI0Myc+Cgk8cGF0aCBkPSdNMTIxLjUsMTAzYzAsLTMwIDQwLC0zMCA0MCwwYzAsMzAgLTQwLDYwIC00MCw2MGMwLDAgLTQwLC0zMCAtNDAsLTYwYzAsLTMwIDQwLC0zMCA0MCwwJyBmaWxsPScjZmMwOTA1Jy8+Cjwvc3ZnPgo=');
position: absolute;
animation: fade 7s linear;
top: 0;
left: 0;
}
.vd-cont {
width: 1080px;
height: 500px;
position: relative;
left: 50%;
margin-top: -100px;
margin-bottom: 0;
margin-left: -540px;
}
/* === Since Heart is Built from 2 Overlapping Images - Evenly distributed glow eminates from this sphere === */
#glow {
margin: 270px auto 0;
width: 270px;
height: 270px;
background-color: #FF00FF;
border-radius: 50%;
z-index: 0;
position: relative;
animation: glow 7s linear;
}
/* === Black Heart for Red Heart Border Outline === */
.heart2 {
margin: -350px auto 0;
position: relative;
width: 502px;
height: 467px;
z-index: 1;
}
#heartl2, #heartr2 {
width: 320px;
height: 470px;
position: absolute;
background-color: #000000;
top: -35px;
}
/* === RED Heart === */
.heart {
margin: -462px 0 0 298px;
position: relative;
width: 497px;
height: 462px;
z-index: 2;
}
#heartl, #heartr {
width: 300px;
height: 450px;
position: absolute;
background-color: #E50000;
top: -30px;
animation: heart 7s linear;
}
/* === Basic Shape of Heat & Black outline heart === */
#heartl, #heartl2 {
border-radius: 50% 50% 20% 0%;
left: 45px;
transform: rotate(-45deg);
}
#heartr, #heartr2 {
border-radius: 50% 50% 0% 20%;
left: 151.5px;
}
#heartr, #heartr2, #arrow-cover {
transform: rotate(45deg);
}
/* === ARROW-COVER to hide arrow partially === */
#arrow-cover {
margin: -488px auto 0;
left: 80px;
z-index: 100;
width: 100px;
height: 300px;
position: relative;
background-color: #E50000;
border-radius: 40% 40% 0% 0%;
animation: heart 7s linear;
}
/* === ARROW == */
.arrow {
margin: -200px 0 0 530px;
height: 300px;
width: 50px;
z-index: 2;
position: relative;
overflow: hidden;
}
.point {
margin: 0 0 0 5px;
width: 0;
height: 0;
z-index: 4;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid #727272;
position: relative;
}
.arrow {
transform: scale(3,3) rotate(45deg);
animation: arrow 6s linear;
}
.shaft {
width: 10px;
height: 265px;
z-index: 3;
background-color: #000000;
margin: 0 0 0 10px;
position: relative;
z-index: 3;
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 {
border-style: none solid solid solid;
border-width: 0 1px 1px 1px;
margin: -60px 0 0 15px;
width: 12px;
height: 50px;
z-index: 1;
transform: skew(10deg);
position: relative;
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 );
border-bottom-color: #000000;
border-left-color: #000000;
border-right-color: #000000;
}
.fletching2 {
margin: -50px 0px 0px 3px;
transform: rotateY(180deg) skew(10deg);
}
/* === End ARROW === */
/* === Glow Fade Away Animation === */
@keyframes glow {
0% { box-shadow: 0px 0px 300px 200px #FFFFFF, 0px 0px 400px 250px red;}
70% { box-shadow: 0px 0px 300px 200px #FFFFFF, 0px 0px 400px 250px red;}
100% { box-shadow: 0px 0px 0px 0px #FFFFFF, 0px 0px 0px 0px red;}
}
/* === ARROW Animation === */
@keyframes arrow {
0% {margin-top: 900px; margin-left:-530px;}
80% {margin-top: -200px; margin-left: 530px;}
100% {margin-top: -200px; margin-left: 530px;}
}
/* === Background Color & SVG Hearts Animation === */
@keyframes fade {
0% {opacity: 0; background-color: #000000;}
70% {opacity: 0; background-color: #666666;}
100% {opacity: 1; background-color: #51FFFF;}
}
/* === Heart Color Change Animation === */
@keyframes heart {
0% { background-color: #6E0000;}
70% { background-color: #6E0000;}
100% { background-color: #E50000;}
}
@media screen and (max-width: 730px) {
.vd-cont {
transform: scale(0.7);
top: -100px;
}
}
@media screen and (max-width: 480px) {
.vd-cont {
transform: scale(0.4);
top: -200px;
}
}
Valentine’s Day heart with arrow shot through it
]]>