candy hearts – Thingography.com https://thingography.com More than a Photo Gallery Tue, 19 Feb 2019 00:36:02 +0000 en-US hourly 1 Candy Hearts CSS Animation https://thingography.com/css-hearts/ https://thingography.com/css-hearts/#respond Sun, 18 Feb 2018 21:28:55 +0000 http://thingography.com/my-things/?p=133 .ani-box {width: 100%; height: 600px; position: relative;} /* ============== Small Hearts ============== */ .hart1 { margin-left: 8%; animation: floatsmall 18s linear infinite; } .hart2 { margin-left: 35%; animation: floatsmall 10s linear infinite; } .hart3 { margin-left: 75%; animation: left 11s linear infinite; } .hart4 { margin-left: 60%; animation: floatsmall 12s linear infinite; } .hart5 { margin-left: 85%; animation: floatsmall 8s linear infinite; } .hart6 { margin-left: 20%; animation: left 12s linear infinite; } .hart7 { margin-left: 30%; animation: right 9s linear infinite; } .hart8 { margin-left: 43%; animation: floatsmall 10s linear infinite; } .hart9 { margin-left: 1%; animation: right 10s linear infinite; } .hart10 { margin-left: 96%; animation: right 15s linear infinite; } /* ===== Medium Hearts ===== */ .hart11 { margin-left: 52%; animation: floatmed 18s linear infinite; } .hart12 { margin-left: 92%; animation: floatmed 13s linear infinite; } .hart13 { margin-left: 2%; animation: floatmed 17s linear infinite; } .hart14 { margin-left: 67%; animation: floatmed 15s linear infinite; } .hart15 { margin-left: 77%; animation: floatmed 10s linear infinite; } .hart16 { margin-left: 20%; animation: floatmed 20s linear infinite; } .hart17 { margin-left: 57%; animation: floatmed 8s linear infinite; } .hart18 { margin-left: 75%; animation: floatmed 14s linear infinite; } .hart19 { margin-left: 41%; animation: floatmed 11s linear infinite; } .hart20 { margin-left: 41%; animation: floatmed 17s linear infinite; } /* ===== Large Hearts ===== */ .hart21 { margin-left: 32%; animation: float 20s linear infinite; } .hart22 { margin-left: 70%; animation: left 20s linear infinite; } .hart23 { margin-left: -5%; animation: float 19s linear infinite; } .hart24 { margin-left: 20%; animation: float 16s linear infinite; } .hart25 { margin-left: 05%; animation: float 14s linear infinite; } .hart26 { margin-left: 15%; animation: float 12s linear infinite; } .hart27 { margin-left: 25%; animation: float 10s linear infinite; } .hart28 { margin-left: 35%; animation: float 13s linear infinite; } .hart29 { margin-left: 45%; animation: float 10s linear infinite; } .hart30 { margin-left: 55%; animation: float 21s linear infinite; } .hart31 { margin-left: 65%; animation: float 16s linear infinite; } .hart32 { margin-left: 75%; animation: float 15s linear infinite; } .hart33 { margin-left: 90%; animation: float 15s linear infinite; } .print { font-size: 48px; color: #FF6699; width: 180px; height: 125px; position: absolute; top: 14%; left: 10%; margin-top: -385px; margin-left: -230px; text-align: center; z-index: 5; text-shadow: 0 0 5px #FF66ED, 1px -1px 8px #333333; font-family: Verdana; text-transform: uppercase; font-weight: 600; line-height: 1em; } .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 { width: 260px; height: 245px; position: absolute; border: 0px solid #FF0000; } /* === To lower single line text on the hearts === */ #lower { padding-top: 20px; } /* FIXED HEARTs CODE for Heat & Outline - DO NOT CHANGE = USE "Scale" for size */ /* === Black Heart for Red Heart Border Outline === */ .heart2 { margin: 20px 0 0px -13px; position: absolute; width: 251px; height: 233px; z-index: 1; } .heartl2, .heartr2 { width: 160px; height: 235px; position: absolute; background-color: #999999; top: -35px; } /* === RED Heart === */ .heart { margin: 20px 0px 0px -18px; position: relative; width: 248px; height: 231px; z-index: 2; } .heartl, .heartr { width: 150px; height: 225px; position: absolute; background-color: #FEB4D7; top: -30px; } /* === Basic Shape of Heart & 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: 100px; transform: rotate(45deg); } /* ========== Individual Heart Colors ========== */ #b {background-color: #92D6EE;} #y {background-color: #FBE892;} #o {background-color: #FAB684;} #r {background-color: #E897BF;} #w {background-color: #F0EEE4;} #p {background-color: #A789BF;} #g {background-color: #93D8B9;} /* ========== Individual Heart Colors - Darker Edges ========== */ #b2 {background-color: #759FB8;} #y2 {background-color: #C5B771;} #o2 {background-color: #BE8861;} #r2 {background-color: #B57293;} #w2 {background-color: #ABA9A2;} #p2 {background-color: #866B9C;} #g2 {background-color: #83BFA4;} /* === Rotate & Larger === */ @keyframes float { 0% {top:-50%; transform:rotateZ( 0deg) scale(0.6);} 100%{top:110%; transform:rotateZ(720deg) scale(0.6);} } /* === Rotate & Medium === */ @keyframes floatmed { 0% {top:-50%; transform:rotateZ( 0deg) scale(0.4);} 100%{top:110%; transform:rotateZ(720deg) scale(0.4);} } /* === Rotate & Smaller === */ @keyframes floatsmall { 0% {top:-50%; transform:rotateZ( 0deg) scale(0.2);} 100%{top:110%; transform:rotateZ(720deg) scale(0.2);} } /* === Move to Left === */ @keyframes left { 0% {top:-50%; transform:translateX( 0px) rotateZ( 0deg) scale(0.4);} 100%{top:110%; transform:translateX(-400px) rotateZ(720deg) scale(0.4);} } /* === Move to Right === */ @keyframes right { 0% {top:-50%; transform:translateX( 0px) rotateZ( 0deg) scale(0.4);} 100%{top:110%; transform:translateX(300px) rotateZ(-720deg) scale(0.4);} } /* ===== Layer 1 - Background Falling PNG Hearts ===== */ .layer1, .layer0 { width: 120%; height: 100%; top: 0px; left: -10%; position: absolute; opacity: 1; } .layer0 { opacity: 0.5; background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/hearts/h8.png'); animation: conf0 20s linear infinite; } .layer1 { opacity: 0.8; background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/hearts/h2.png'); animation: conf1 10s linear infinite; } /* Layer 0 - Base Layer conf Falling Animation */ @keyframes conf0 { 0% {background-position: 0px 0px; transform:scale(1.0);} 50% { transform:scale(0.8);} 100%{background-position: 500px 500px; transform:scale(1.0);} } /* Layer 1 - 1st Addition conf Falling Animation */ @keyframes conf1 { 0% {background-position: 0px 0px; transform:scale(1.0,1.0);} 50% { transform:scale(0.9,0.9);} 100%{background-position: 500px 500px; transform:scale(1.0,1.0);} }


kiss
me

love
bug

always

text
me

smile

love
you

for
ever

love
me

i love
you

call
me

miss
you

ur
cute

cutie
pie

kiss
me

xoxo

yes

ur
hot

you
rock

only
you

you
& me

ur a
10

marry
me

I
wish

lover
boy

true
love

hey
baby

marry
me

cup
cake

tweet
me

hug
me

be
mine

hot
stuff

soul
mate

The large candy hearts with text are pure CSS, and the small background hearts are from a PNG image.

]]> https://thingography.com/css-hearts/feed/ 0