{"id":133,"date":"2018-02-18T21:28:55","date_gmt":"2018-02-18T21:28:55","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=133"},"modified":"2025-02-13T21:08:06","modified_gmt":"2025-02-13T21:08:06","slug":"css-hearts","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-hearts\/","title":{"rendered":"Candy Hearts CSS Animation"},"content":{"rendered":"<style>\n.ani-box {width: 100%; height: 600px; position: relative;}\n\/*  ============== Small Hearts  ============== *\/\n.hart1  {\n\tmargin-left: 8%;\n\tanimation: floatsmall 18s linear infinite;\n}\n.hart2 {\n\tmargin-left: 35%;\n\tanimation: floatsmall 10s linear infinite;\n}\n.hart3 {\n\tmargin-left: 75%;\n\tanimation: left 11s linear infinite;\n}\n.hart4 {\n\tmargin-left: 60%;\n\tanimation: floatsmall 12s linear infinite;\n}\n.hart5 {\n\tmargin-left: 85%;\n\tanimation:  floatsmall 8s linear infinite;\n}\n.hart6 {\n\tmargin-left: 20%;\n\tanimation: left 12s linear infinite;\n}\n.hart7 {\n\tmargin-left: 30%;\n\tanimation: right 9s linear infinite;\n}\n.hart8 {\n\tmargin-left: 43%;\n\tanimation: floatsmall 10s linear infinite;\n}\n.hart9 {\n\tmargin-left: 1%;\n\tanimation: right 10s linear infinite;\n}\n.hart10 {\n\tmargin-left: 96%;\n\tanimation: right 15s linear infinite;\n}\n\/*  ===== Medium Hearts  ===== *\/\n.hart11 {\n\tmargin-left: 52%;\n\tanimation:  floatmed 18s linear infinite;\n}\n.hart12 {\n\tmargin-left: 92%;\n\tanimation:  floatmed 13s linear infinite;\n}\n.hart13 {\n\tmargin-left: 2%;\n\tanimation: floatmed 17s linear infinite;\n}\n.hart14 {\n\tmargin-left: 67%;\n\tanimation: floatmed 15s linear infinite;\n}\n.hart15 {\n\tmargin-left: 77%;\n\tanimation: floatmed 10s linear infinite;\n}\n.hart16 {\n\tmargin-left: 20%;\n\tanimation: floatmed 20s linear infinite;\n}\n.hart17 {\n\tmargin-left: 57%;\n\tanimation: floatmed 8s linear infinite;\n}\n.hart18 {\n\tmargin-left: 75%;\n\tanimation: floatmed 14s linear infinite;\n}\n.hart19 {\n\tmargin-left: 41%;\n\tanimation: floatmed 11s linear infinite;\n}\n.hart20 {\n\tmargin-left: 41%;\n\tanimation: floatmed 17s linear infinite;\n}\n\/*  ===== Large Hearts  ===== *\/\n.hart21  {\n\tmargin-left: 32%;\n\tanimation: float 20s linear infinite;\n}\n.hart22 {\n\tmargin-left: 70%;\n\tanimation: left 20s linear infinite;\n}\n.hart23 {\n\tmargin-left: -5%;\n\tanimation: float 19s linear infinite;\n}\n.hart24 {\n\tmargin-left: 20%;\n\tanimation: float 16s linear infinite;\n}\n.hart25 {\n\tmargin-left: 05%;\n\tanimation: float 14s linear infinite;\n}\n.hart26 {\n\tmargin-left: 15%;\n\tanimation: float 12s linear infinite;\n}\n.hart27 {\n\tmargin-left: 25%;\n\tanimation: float 10s linear infinite;\n}\n.hart28 {\n\tmargin-left: 35%;\n\tanimation: float 13s linear infinite;\n}\n.hart29 {\n\tmargin-left: 45%;\n\tanimation: float 10s linear infinite;\n}\n.hart30 {\n\tmargin-left: 55%;\n\tanimation: float 21s linear infinite;\n}\n.hart31 {\n\tmargin-left: 65%;\n\tanimation: float 16s linear infinite;\n}\n.hart32 {\n\tmargin-left: 75%;\n\tanimation: float 15s linear infinite;\n}\n.hart33 {\n\tmargin-left: 90%;\n\tanimation: float 15s linear infinite;\n}\n.print {\n\tfont-size: 48px;\n\tcolor: #FF6699;\n\twidth: 180px;\n\theight: 125px;\n\tposition: absolute;\n\ttop: 14%;\n\tleft: 10%;\n\tmargin-top: -385px;\n\tmargin-left: -230px;\n\ttext-align: center;\n\tz-index: 5;\n\ttext-shadow: 0 0 5px #FF66ED, 1px -1px 8px #333333;\n\tfont-family: Verdana;\n\ttext-transform: uppercase;\n\tfont-weight: 600;\nline-height: 1em;\n}\n.hart1, .hart2, .hart3, .hart4, .hart5, .hart6, .hart7, .hart8, .hart9, .hart10, .hart11, .hart12, .hart13, .hart14, .hart15, .hart16, .hart17, .hart18, .hart19, .hart20, .hart21, .hart22, .hart23, .hart24, .hart25, .hart26, .hart27, .hart28, .hart29, .hart30, .hart31, .hart32, .hart33 {\n\twidth: 260px;\n\theight: 245px;\n\tposition: absolute;\n\tborder: 0px solid #FF0000;\n}\n\/* === To lower single line text on the hearts  === *\/\n#lower {\n\tpadding-top: 20px;\n}\n\/*  FIXED HEARTs CODE for Heat & Outline - DO NOT CHANGE = USE \"Scale\" for size *\/\n\/* === Black Heart for Red Heart Border Outline  === *\/\n.heart2 {\n\tmargin: 20px 0 0px -13px;\n\tposition: absolute;\n\twidth: 251px;\n\theight: 233px;\n\tz-index: 1;\n}\n.heartl2, .heartr2 {\n\twidth: 160px;\n\theight: 235px;\n\tposition: absolute;\n\tbackground-color: #999999;\n\ttop: -35px;\n}\n\/* === RED Heart === *\/\n.heart {\n\tmargin: 20px 0px 0px -18px;\n\tposition: relative;\n\twidth: 248px;\n\theight: 231px;\n\tz-index: 2;\n}\n.heartl, .heartr {\n\twidth: 150px;\n\theight: 225px;\n\tposition: absolute;\n\tbackground-color: #FEB4D7;\n\ttop: -30px;\n}\n\/* === Basic Shape of Heart & 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: 100px;\n\ttransform: rotate(45deg);\n}\n\/* ==========  Individual Heart Colors ========== *\/\n#b {background-color: #92D6EE;}\n#y {background-color: #FBE892;}\n#o {background-color: #FAB684;}\n#r {background-color: #E897BF;}\n#w {background-color: #F0EEE4;}\n#p {background-color: #A789BF;}\n#g {background-color: #93D8B9;}\n\/* ==========  Individual Heart Colors - Darker Edges ========== *\/\n#b2 {background-color: #759FB8;}\n#y2 {background-color: #C5B771;}\n#o2 {background-color: #BE8861;}\n#r2 {background-color: #B57293;}\n#w2 {background-color: #ABA9A2;}\n#p2 {background-color: #866B9C;}\n#g2 {background-color: #83BFA4;}\n\/* === Rotate & Larger ===  *\/\n@keyframes float  {\n\t0%  {top:-50%; transform:rotateZ(  0deg) scale(0.6);}\n\t100%{top:110%; transform:rotateZ(720deg) scale(0.6);}\n} \n\/*  === Rotate & Medium === *\/\n@keyframes floatmed  {\n\t0%  {top:-50%; transform:rotateZ(  0deg) scale(0.4);}\n\t100%{top:110%; transform:rotateZ(720deg) scale(0.4);}\n} \n\/*  === Rotate & Smaller  === *\/ \n@keyframes floatsmall  {\n\t0%  {top:-50%; transform:rotateZ(  0deg) scale(0.2);}\n\t100%{top:110%; transform:rotateZ(720deg) scale(0.2);}\n} \n\/*  === Move to Left === *\/\n@keyframes left  {\n\t0%  {top:-50%; transform:translateX(   0px) rotateZ(  0deg) scale(0.4);}\n\t100%{top:110%; transform:translateX(-400px) rotateZ(720deg) scale(0.4);}\n}\n\/*  === Move to Right === *\/\n@keyframes right  {\n\t0%  {top:-50%; transform:translateX(  0px) rotateZ(   0deg) scale(0.4);}\n\t100%{top:110%; transform:translateX(300px) rotateZ(-720deg) scale(0.4);}\n} \n\/* ===== Layer 1 - Background Falling PNG Hearts ===== *\/\n.layer1, .layer0 {\n\twidth: 120%;\n\theight: 100%;\n\ttop: 0px;\n\tleft: -10%;\n\tposition: absolute;\n\topacity: 1;\n}\n.layer0  {\n\topacity: 0.5;\n\tbackground-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/hearts\/h8.png');\n\tanimation: conf0 20s linear infinite;\n}\n.layer1  {\n\topacity: 0.8;\n\tbackground-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/hearts\/h2.png');\n\tanimation: conf1 10s linear infinite;   \n}\n\/* Layer 0 - Base Layer conf Falling Animation *\/\n@keyframes conf0 { \n\t0%  {background-position:   0px   0px; transform:scale(1.0);}\n\t50% {                                  transform:scale(0.8);}\n\t100%{background-position: 500px 500px; transform:scale(1.0);}\n}\n\/* Layer 1 - 1st Addition conf Falling Animation *\/\n@keyframes conf1 { \n\t0%  {background-position:   0px   0px; transform:scale(1.0,1.0);}\n\t50% {                                  transform:scale(0.9,0.9);}\n\t100%{background-position: 500px 500px; transform:scale(1.0,1.0);}\n}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"layer0\"><\/div>\n<div class=\"layer1\"><\/div>\n<p><!-- Background Hearts PNG Layer --><br \/>\n\t\t<!--  Remember to List the background small hearts first & the Bigger hearts last to keep the bigger ones in front --><\/p>\n<div class=\"hart1\">\n<div class=\"heart2\"> <!--  To create black border on heart --><\/p>\n<div class=\"heartl2\" id=\"b2\"><\/div>\n<div class=\"heartr2\" id=\"b2\"><\/div>\n<\/p><\/div>\n<div class=\"heart\"><!-- RED Hart --><\/p>\n<div class=\"heartl\" id=\"b\"><\/div>\n<div class=\"heartr\" id=\"b\"><\/div>\n<\/p><\/div>\n<p>  <!-- Close Heart --><\/p>\n<p class=\"print\"> kiss <br \/> me <\/p>\n<\/p><\/div>\n<p> <!-- Close Hart -->\t\t\t\t<\/p>\n<div class=\"hart2\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"y2\"><\/div>\n<div class=\"heartr2\" id=\"y2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"y\"> <\/div>\n<div class=\"heartr\" id=\"y\"> <\/div>\n<\/div>\n<p class=\"print\"> love <br \/> bug <\/p>\n<\/p><\/div>\n<div class=\"hart3\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"p2\"><\/div>\n<div class=\"heartr2\" id=\"p2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"p\"> <\/div>\n<div class=\"heartr\" id=\"p\"> <\/div>\n<\/div>\n<p class=\"print\"> always <\/p>\n<\/p><\/div>\n<div class=\"hart4\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"r2\"><\/div>\n<div class=\"heartr2\" id=\"r2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"r\"> <\/div>\n<div class=\"heartr\" id=\"r\"> <\/div>\n<\/div>\n<p class=\"print\"> text <br \/> me <\/p>\n<\/p><\/div>\n<div class=\"hart5\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"w2\"><\/div>\n<div class=\"heartr2\" id=\"w2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"w\"> <\/div>\n<div class=\"heartr\" id=\"w\"> <\/div>\n<\/div>\n<p class=\"print\" id=\"lower\"> smile <\/p>\n<\/p><\/div>\n<div class=\"hart6\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"o2\"><\/div>\n<div class=\"heartr2\" id=\"o2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"o\"> <\/div>\n<div class=\"heartr\" id=\"o\"> <\/div>\n<\/div>\n<p class=\"print\"> love <br \/> you <\/p>\n<\/p><\/div>\n<div class=\"hart7\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"g2\"><\/div>\n<div class=\"heartr2\" id=\"g2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"g\"> <\/div>\n<div class=\"heartr\" id=\"g\"> <\/div>\n<\/div>\n<p class=\"print\"> for <br \/> ever <\/p>\n<\/p><\/div>\n<div class=\"hart8\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"b2\"><\/div>\n<div class=\"heartr2\" id=\"b2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"b\"> <\/div>\n<div class=\"heartr\" id=\"b\"> <\/div>\n<\/div>\n<p class=\"print\"> love <br \/> me <\/p>\n<\/p><\/div>\n<div class=\"hart9\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"y2\"><\/div>\n<div class=\"heartr2\" id=\"y2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"y\"> <\/div>\n<div class=\"heartr\" id=\"y\"> <\/div>\n<\/div>\n<p class=\"print\">i love<br \/>you<\/p>\n<\/p><\/div>\n<div class=\"hart10\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"o2\"><\/div>\n<div class=\"heartr2\" id=\"o2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"o\"> <\/div>\n<div class=\"heartr\" id=\"o\"> <\/div>\n<\/div>\n<p class=\"print\"> call <br \/> me <\/p>\n<\/p><\/div>\n<div class=\"hart11\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"r2\"><\/div>\n<div class=\"heartr2\" id=\"r2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"r\"> <\/div>\n<div class=\"heartr\" id=\"r\"> <\/div>\n<\/div>\n<p class=\"print\"> miss <br \/> you <\/p>\n<\/p><\/div>\n<div class=\"hart12\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"p3\"><\/div>\n<div class=\"heartr2\" id=\"p3\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"p\"> <\/div>\n<div class=\"heartr\" id=\"p\"> <\/div>\n<\/div>\n<p class=\"print\"> ur <br \/> cute <\/p>\n<\/p><\/div>\n<div class=\"hart13\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"p2\"><\/div>\n<div class=\"heartr2\" id=\"p2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"p\"> <\/div>\n<div class=\"heartr\" id=\"p\"> <\/div>\n<\/div>\n<p class=\"print\"> cutie <br \/> pie <\/p>\n<\/p><\/div>\n<div class=\"hart14\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"g2\"><\/div>\n<div class=\"heartr2\" id=\"g2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"g\"> <\/div>\n<div class=\"heartr\" id=\"g\"> <\/div>\n<\/div>\n<p class=\"print\"> kiss <br \/> me <\/p>\n<\/p><\/div>\n<div class=\"hart15\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"b2\"><\/div>\n<div class=\"heartr2\" id=\"b2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"b\"> <\/div>\n<div class=\"heartr\" id=\"b\"> <\/div>\n<\/div>\n<p class=\"print\" id=\"lower\">xoxo<\/p>\n<\/p><\/div>\n<div class=\"hart16\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"y2\"><\/div>\n<div class=\"heartr2\" id=\"y2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"y\"> <\/div>\n<div class=\"heartr\" id=\"y\"> <\/div>\n<\/div>\n<p class=\"print\" id=\"lower\"> yes <\/p>\n<\/p><\/div>\n<div class=\"hart17\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"o2\"><\/div>\n<div class=\"heartr2\" id=\"o2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"o\"> <\/div>\n<div class=\"heartr\" id=\"o\"> <\/div>\n<\/div>\n<p class=\"print\"> ur <br \/> hot <\/p>\n<\/p><\/div>\n<div class=\"hart18\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"r2\"><\/div>\n<div class=\"heartr2\" id=\"r2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"r\"> <\/div>\n<div class=\"heartr\" id=\"r\"> <\/div>\n<\/div>\n<p class=\"print\"> you <br \/> rock <\/p>\n<\/p><\/div>\n<div class=\"hart19\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"w2\"><\/div>\n<div class=\"heartr2\" id=\"w2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"w\"> <\/div>\n<div class=\"heartr\" id=\"w\"> <\/div>\n<\/div>\n<p class=\"print\"> only <br \/> you <\/p>\n<\/p><\/div>\n<div class=\"hart20\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"w2\"><\/div>\n<div class=\"heartr2\" id=\"w2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"w\"> <\/div>\n<div class=\"heartr\" id=\"w\"> <\/div>\n<\/div>\n<p class=\"print\"> you <br \/>&amp; me<\/p>\n<\/p><\/div>\n<div class=\"hart21\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"g2\"><\/div>\n<div class=\"heartr2\" id=\"g2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"g\"> <\/div>\n<div class=\"heartr\" id=\"g\"> <\/div>\n<\/div>\n<p class=\"print\"> ur a <br \/> 10 <\/p>\n<\/p><\/div>\n<div class=\"hart22\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"b2\"><\/div>\n<div class=\"heartr2\" id=\"b2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"b\"> <\/div>\n<div class=\"heartr\" id=\"b\"> <\/div>\n<\/div>\n<p class=\"print\"> marry <br \/> me <\/p>\n<\/p><\/div>\n<div class=\"hart23\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"g2\"><\/div>\n<div class=\"heartr2\" id=\"g2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"g\"> <\/div>\n<div class=\"heartr\" id=\"g\"> <\/div>\n<\/div>\n<p class=\"print\"> I <br \/> wish <\/p>\n<\/p><\/div>\n<div class=\"hart24\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"o2\"><\/div>\n<div class=\"heartr2\" id=\"o2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"o\"> <\/div>\n<div class=\"heartr\" id=\"o\"> <\/div>\n<\/div>\n<p class=\"print\"> lover <br \/> boy <\/p>\n<\/p><\/div>\n<div class=\"hart25\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"r2\"><\/div>\n<div class=\"heartr2\" id=\"r2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"r\"> <\/div>\n<div class=\"heartr\" id=\"r\"> <\/div>\n<\/div>\n<p class=\"print\"> true <br \/> love <\/p>\n<\/p><\/div>\n<div class=\"hart26\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"w2\"><\/div>\n<div class=\"heartr2\" id=\"w2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"w\"> <\/div>\n<div class=\"heartr\" id=\"w\"> <\/div>\n<\/div>\n<p class=\"print\"> hey <br \/> baby <\/p>\n<\/p><\/div>\n<div class=\"hart27\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"p2\"><\/div>\n<div class=\"heartr2\" id=\"p2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"p\"> <\/div>\n<div class=\"heartr\" id=\"p\"> <\/div>\n<\/div>\n<p class=\"print\"> marry <br \/> me <\/p>\n<\/p><\/div>\n<div class=\"hart28\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"y2\"><\/div>\n<div class=\"heartr2\" id=\"y2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"y\"> <\/div>\n<div class=\"heartr\" id=\"y\"> <\/div>\n<\/div>\n<p class=\"print\"> cup <br \/> cake <\/p>\n<\/p><\/div>\n<div class=\"hart29\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"b2\"><\/div>\n<div class=\"heartr2\" id=\"b2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"b\"> <\/div>\n<div class=\"heartr\" id=\"b\"> <\/div>\n<\/div>\n<p class=\"print\"> tweet <br \/> me <\/p>\n<\/p><\/div>\n<div class=\"hart30\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"y2\"><\/div>\n<div class=\"heartr2\" id=\"y2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"y\"> <\/div>\n<div class=\"heartr\" id=\"y\"> <\/div>\n<\/div>\n<p class=\"print\"> hug <br \/> me <\/p>\n<\/p><\/div>\n<div class=\"hart31\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"o2\"><\/div>\n<div class=\"heartr2\" id=\"o2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"o\"> <\/div>\n<div class=\"heartr\" id=\"o\"> <\/div>\n<\/div>\n<p class=\"print\"> be <br \/> mine <\/p>\n<\/p><\/div>\n<div class=\"hart32\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"r2\"><\/div>\n<div class=\"heartr2\" id=\"r2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"r\"> <\/div>\n<div class=\"heartr\" id=\"r\"> <\/div>\n<\/div>\n<p class=\"print\"> hot <br \/>stuff<\/p>\n<\/p><\/div>\n<div class=\"hart33\">\n<div class=\"heart2\">\n<div class=\"heartl2\" id=\"w2\"><\/div>\n<div class=\"heartr2\" id=\"w2\"><\/div>\n<\/div>\n<div class=\"heart\">\n<div class=\"heartl\" id=\"w\"> <\/div>\n<div class=\"heartr\" id=\"w\"> <\/div>\n<\/div>\n<p class=\"print\"> soul <br \/> mate <\/p>\n<\/p><\/div>\n<\/div>\n<p> <!-- ani-box --><\/p>\n<h4 class=\"below-ani\"> The large candy hearts with text are pure CSS, and the small background hearts are from a PNG image. <\/h4>\n","protected":false},"excerpt":{"rendered":"<p>kiss me love bug always text me smile love you for ever love me i loveyou call me miss you ur cute cutie pie kiss me xoxo yes ur hot you rock only you you &amp; me ur a 10<\/p>\n","protected":false},"author":2,"featured_media":2590,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,27,4,5,26,16],"class_list":["post-133","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-candy-hearts","tag-css","tag-css-animation","tag-hearts","tag-pure-css"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/133","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=133"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/133\/revisions"}],"predecessor-version":[{"id":2881,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/133\/revisions\/2881"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2590"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}