{"id":2080,"date":"2018-03-14T22:29:48","date_gmt":"2018-03-14T22:29:48","guid":{"rendered":"http:\/\/thingography.com\/?p=2080"},"modified":"2025-02-13T20:57:06","modified_gmt":"2025-02-13T20:57:06","slug":"css-vd","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-vd\/","title":{"rendered":"Pure CSS Heart &amp; Arrow Animation"},"content":{"rendered":"<style>\n.ani-box {\n\t width: 100%; height: auto; overflow: hidden; background-color: #333;\n}\n.bg {\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: #51FFFF;\n\tbackground-image: url('data:image\/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJyB2aWV3Qm94PScwIDAgMjQzIDI0Myc+Cgk8cGF0aCBkPSdNMTIxLjUsMTAzYzAsLTMwIDQwLC0zMCA0MCwwYzAsMzAgLTQwLDYwIC00MCw2MGMwLDAgLTQwLC0zMCAtNDAsLTYwYzAsLTMwIDQwLC0zMCA0MCwwJyBmaWxsPScjZmMwOTA1Jy8+Cjwvc3ZnPgo=');\n\tposition: absolute;\n\tanimation: fade 7s linear;\n\ttop: 0;\n\tleft: 0;\n}\n.vd-cont {\n\twidth: 1080px;\n\theight: 500px;\n\tposition: relative;\n\tleft: 50%;\n\tmargin-top: -100px;\n\tmargin-bottom: 0;\n\tmargin-left: -540px;\n}\n\/* === Since Heart is Built from 2 Overlapping Images - Evenly distributed glow eminates from this sphere === *\/\n#glow {\n\tmargin: 270px auto 0;\n\twidth: 270px;\n\theight: 270px;\n\tbackground-color: #FF00FF;\n\tborder-radius: 50%;\n\tz-index: 0;\n\tposition: relative;\n\tanimation: glow 7s linear;\n}\n\/* === Black Heart for Red Heart Border Outline  === *\/\n.heart2 {\n\tmargin: -350px auto 0;\n\tposition: relative;\n\twidth: 502px;\n\theight: 467px;\n\tz-index: 1;\n}\n#heartl2, #heartr2 {\n\twidth: 320px;\n\theight: 470px;\n\tposition: absolute;\n\tbackground-color: #000000;\n\ttop: -35px;\n}\n\/* === RED Heart === *\/\n.heart {\n\tmargin: -462px 0 0 298px;\n\tposition: relative;\n\twidth: 497px;\n\theight: 462px;\n\tz-index: 2;\n}\n#heartl, #heartr {\n\twidth: 300px;\n\theight: 450px;\n\tposition: absolute;\n\tbackground-color: #E50000;\n\ttop: -30px;\n\tanimation: heart 7s linear;\n}\n\/* === Basic Shape of Heat & Black outline heart  === *\/\n#heartl, #heartl2 {\n\tborder-radius: 50% 50% 20% 0%;\n\tleft: 45px;\n\ttransform: rotate(-45deg);\n}\n#heartr, #heartr2 {\n\tborder-radius: 50% 50% 0% 20%;\n\tleft: 151.5px;\n}\n#heartr, #heartr2, #arrow-cover  {\n\ttransform: rotate(45deg);\n}\n\/*  === ARROW-COVER to hide arrow partially  ===  *\/\n#arrow-cover {\n\tmargin: -488px auto 0;\n\tleft: 80px;\n\tz-index: 100;\n\twidth: 100px;\n\theight: 300px;\n\tposition: relative;\n\tbackground-color: #E50000;\n\tborder-radius: 40% 40% 0% 0%;\n\tanimation: heart 7s linear;\n}\n\/*  === ARROW ==  *\/\n.arrow {\n\tmargin: -200px 0 0 530px;\n\theight: 300px;\n\twidth: 50px;\n\tz-index: 2;\n\tposition: relative;\n\toverflow: hidden;\n}\n.point {\n\tmargin: 0 0 0 5px;\n\twidth: 0;\n\theight: 0;\n\tz-index: 4;\n\tborder-left: 10px solid transparent;\n\tborder-right: 10px solid transparent;\n\tborder-bottom: 30px solid #727272;\n\tposition: relative;\n}\n.arrow {\n\ttransform: scale(3,3) rotate(45deg);\n\tanimation: arrow 6s linear;\n}\n.shaft {\n\twidth: 10px;\n\theight: 265px;\n\tz-index: 3;\n\tbackground-color: #000000;\n\tmargin: 0 0 0 10px;\n\tposition: relative;\n\tz-index: 3;\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\tborder-style: none solid solid solid;\n\tborder-width: 0 1px 1px 1px;\n\tmargin: -60px 0 0 15px;\n\twidth: 12px;\n\theight: 50px;\n\tz-index: 1;\n\ttransform: skew(10deg);\n\tposition: relative;\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\tborder-bottom-color: #000000;\n\tborder-left-color: #000000;\n\tborder-right-color: #000000;\n}\n.fletching2 {\n\tmargin: -50px 0px 0px 3px;\n\ttransform: rotateY(180deg) skew(10deg);\n}\n\/*  === End ARROW === *\/\n\/*  === Glow Fade Away Animation === *\/\n@keyframes glow {\n\t0%   {  box-shadow: 0px 0px 300px 200px #FFFFFF, 0px 0px 400px 250px red;}\n\t70%  {  box-shadow: 0px 0px 300px 200px #FFFFFF, 0px 0px 400px 250px red;}\n\t100% {  box-shadow: 0px 0px   0px   0px #FFFFFF, 0px 0px   0px   0px red;}\n}\n\/*  === ARROW Animation === *\/\n@keyframes arrow {\n\t0%   {margin-top:  900px; margin-left:-530px;}\n\t80%  {margin-top: -200px; margin-left: 530px;}\n\t100% {margin-top: -200px; margin-left: 530px;}\n}\n\/*  === Background Color & SVG Hearts Animation === *\/\n@keyframes fade {\n\t0%   {opacity: 0; background-color: #000000;}\n\t70%  {opacity: 0; background-color: #666666;}\n\t100% {opacity: 1; background-color: #51FFFF;}\n}\n\/*  === Heart Color Change  Animation === *\/\n@keyframes heart {\n\t0%   { background-color: #6E0000;}\n\t70%  { background-color: #6E0000;}\n\t100% { background-color: #E50000;}\n}\n@media screen and (max-width: 730px) {\n\t.vd-cont {\t\t\n\t\ttransform: scale(0.7);\n\t\ttop: -100px;\n\t}\n}\n@media screen and (max-width: 480px) {\n\t.vd-cont {\n\t\ttransform: scale(0.4);\n\t\ttop: -200px;\n\t}\n}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"bg\"><\/div>\n<p><!-- Close bg --><!--  For Animation to fade-in after arrow strike  --><\/p>\n<div class=\"vd-cont\"> <!--  Need container for consistent arrow impact alignment on different screen sizes --><\/p>\n<div id=\"glow\"><\/div>\n<p><!-- Since Heart is Built from 2 Overlapping Images - Evenly distributed glow eminates from this sphere --><\/p>\n<div class=\"heart2\"> <!--  To create black border on heart --><\/p>\n<div id=\"heartl2\"><\/div>\n<div id=\"heartr2\"><\/div>\n<\/p><\/div>\n<div class=\"heart\">\n<div id=\"heartl\"><\/div>\n<div id=\"heartr\"><\/div>\n<\/p><\/div>\n<div id=\"arrow-cover\"><\/div>\n<p><!--  To Hide Arrow Partially through heart --><\/p>\n<div class=\"arrow\">\n<div class=\"point\"><\/div>\n<div class=\"shaft\"><\/div>\n<div class=\"fletching\"><\/div>\n<div class=\"fletching2\"><\/div>\n<\/p><\/div>\n<p><!-- Arrow --><\/p><\/div>\n<p><!-- vd-Cont --><\/p>\n<\/div>\n<p> <!-- Ani-box  --><\/p>\n<div class=\"below-ani\">Valentine&#8217;s Day heart with arrow shot through it<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Valentine&#8217;s Day heart with arrow shot through it<\/p>\n","protected":false},"author":2,"featured_media":2621,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,205,4,5,204,206],"class_list":["post-2080","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-arrow","tag-css","tag-css-animation","tag-heart","tag-valentines-day"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2080","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=2080"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2080\/revisions"}],"predecessor-version":[{"id":2629,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2080\/revisions\/2629"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2621"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=2080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=2080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=2080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}