hearts – Thingography.com
https://thingography.com
More than a Photo Gallery
Thu, 13 Feb 2025 21:08:06 +0000
en-US
hourly
1
-
Candy Hearts CSS Animation
https://thingography.com/css-hearts/
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);}
}
The large candy hearts with text are pure CSS, and the small background hearts are from a PNG image.
]]>