valentines day – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:04:21 +0000 en-US hourly 1 Pure CSS Heart & Arrow Animation https://thingography.com/css-vd/ https://thingography.com/css-vd/#respond Wed, 14 Mar 2018 22:29:48 +0000 http://thingography.com/?p=2080 .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
]]> https://thingography.com/css-vd/feed/ 0