Skip to content

Instantly share code, notes, and snippets.

@jasonrundell
Created February 14, 2014 21:12
Show Gist options
  • Save jasonrundell/9009375 to your computer and use it in GitHub Desktop.
Save jasonrundell/9009375 to your computer and use it in GitHub Desktop.
A Pen by Jason Rundell.
<div class="alllove">
<span class="love love1 glyphicon glyphicon-heart"></span>
<span class="love love2 glyphicon glyphicon-heart"></span>
<span class="love love3 glyphicon glyphicon-heart"></span>
<span class="love love4 glyphicon glyphicon-heart"></span>
<span class="love love5 glyphicon glyphicon-heart"></span>
<div id="container">
<h1>Happy Valentines, Cupcake!</h1>
<p>Dearest Donna,</p>
<p>I love you for making me laugh.</p>
<p>I love you for making want to be a better man everyday.</p>
<p>I love you for loving me for me and not trying to change me.</p>
<p>I love you for being there when I need you most.</p>
<p>I love you for listening.</p>
<p>I love you for trusting me.</p>
<p>I love you for playing video games with me.</p>
<p>I love you for taking care of me.</p>
<p>I love you for the above, more, and what is to come in the future.</p>
<p>I love you!</p>
<p>x o x o</p>
<p>&mdash; Jason</p>
</div>
</div>
@import url(http://fonts.googleapis.com/css?family=Bad+Script);
#container {
position: absolute;
top: 160px;
font-family: "Bad Script";
color: #de4747;
text-align: center;
}
h1 {
font-family: "Bad Script";
line-height: 6rem;
font-size: 4rem;
}
p{
font-size: 2rem;
line-height: 4rem;
}
.alllove {
position: relative;
width: 300px;
height: 200px;
margin: 0 auto;
}
.love {
position: absolute;
top: 200px;
left: 0;
color: #de4747;
}
.love1 {
-webkit-animation-name: love1;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
}
.love2 {
left: 30px;
-webkit-animation-name: love2;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
}
.love3 {
left: 60px;
-webkit-animation-name: love3;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
}
.love4 {
left: 80px;
-webkit-animation-name: love4;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
}
.love5 {
left: 100px;
-webkit-animation-name: love5;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes love1{
0% {top: 150px;}
20% {left: 10px;}
40% {left: 0px;}
60% {left: 10px;}
80% {left: 0px;}
100% {top: 10px; left: 5px; opacity: 0}
}
@-webkit-keyframes love2{
0% {top: 150px;}
20% {left: 30px;}
40% {left: 20px;}
60% {left: 30px;}
80% {left: 20px;}
100% {top: 30px; left: 5px; opacity: 0}
}
@-webkit-keyframes love3{
0% {top: 150px;}
20% {left: 60px;}
40% {left: 50px;}
60% {left: 60px;}
80% {left: 50px;}
100% {top: 60px; left: 5px; opacity: 0}
}
@-webkit-keyframes love4{
0% {top: 150px;}
20% {left: 90px;}
40% {left: 80px;}
60% {left: 90px;}
80% {left: 80px;}
100% {top: 90px; left: 5px; opacity: 0}
}
@-webkit-keyframes love5{
0% {top: 150px;}
20% {left: 110px;}
40% {left: 120px;}
60% {left: 110px;}
80% {left: 115px;}
100% {top: 100px; left: 5px; opacity: 0}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment