<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Floating Animated Hearts</title>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link rel='stylesheet prefetch' href='https://db.tt/4VuE85Y5'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="bear">
<h2>Chill bear loves honey.</h2>
<img src="https://db.tt/4VuE85Y5" class="bear">
</div>
<img src="https://db.tt/SdQlCWWD" class="move1 heart"/>
<img src="https://db.tt/SdQlCWWD" class="move2 heart"/>
<img src="https://db.tt/SdQlCWWD" class="move3 heart"/>
</div>
</body>
</html>
/*Downloaded from https://www.codeseek.co/10Dimensional/floating-animated-hearts-MKpbrz */
/* Did not inlude all vendor prefixes because ¯\_(ツ)_/¯ */
body {
font-size: 13px;
}
h2 {
font-family: 'Pacifico', cursive;
font-size: 3.5em;
text-align: center;
color: #ffc832;
}
.container {
position: relative;
width: 300px;
margin: 0 auto;
}
.bear {
width: 100%;
}
.heart {
position: absolute;
}
.bear {
width:
}
@keyframes heart-move-one {
0% {-webkit-transform: translate(0, 0)}
20% {-webkit-transform: translate(0em, .2em) rotate(-5deg)}
40% {-webkit-transform: translate(0em, .4em) rotate(-10deg)}
60% {-webkit-transform: translate(-.1em, .2em) rotate(-15deg)}
80% {-webkit-transform: translate(-.3em, .3em) rotate(-10deg)}
100% {-webkit-transform: translate(0em, 0em)}
}
@keyframes heart-move-two {
0% {-webkit-transform: translate(0, 0) rotate(-55deg)}
10% {-webkit-transform: translate(0em, .1em) rotate(-50deg)}
20% {-webkit-transform: translate(.1em, .3em) rotate(-45deg)}
40% {-webkit-transform: translate(.3em, .4em) rotate(-40deg)}
50% {-webkit-transform: translate(.2em, .5em) rotate(-40deg)}
60% {-webkit-transform: translate(.1em, .3em) rotate(-45deg)}
80% {-webkit-transform: translate(.2em, .1em) rotate(-50deg)}
100% {-webkit-transform: translate(0em, 0em) rotate(-55deg)}
}
@keyframes heart-move-three {
0% {-webkit-transform: translate(0, 0) rotate(5deg)}
20% {-webkit-transform: translate(0em, .3em) rotate(0deg)}
40% {-webkit-transform: translate(.1em, .5em) rotate(-5deg)}
50% {-webkit-transform: translate(.3em, .6em) rotate(-10deg)}
60% {-webkit-transform: translate(.6em, .5em) rotate(-15deg)}
70% {-webkit-transform: translate(.4em, .4em) rotate(-10deg)}
80% {-webkit-transform: translate(.3em, .3em) rotate(-5deg)}
90% {-webkit-transform: translate(.2em, .2em) rotate(0deg)}
100% {-webkit-transform: translate(0em, 0em) rotate(5deg)}
}
.move1 {
animation: heart-move-one 4s infinite linear;
width: 1em;
top: 9.3em;
left: 16em;
}
.move2 {
animation: heart-move-two 4s infinite linear;
width: 2.1em;
top: 8em;
left: 5.3em;
}
.move3 {
animation: heart-move-three 3.8s infinite linear;
width: 3em;
top: 6em;
left: 14em;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Google Font API
