ivuorinen/heart2
1
0
Fork 0
mirror of https://github.com/ivuorinen/heart2.git synced 2026-01-26 03:13:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Create index.html

Browse Source 
Works only on webkit-browsers
This commit is contained in:
Ismo Vuorinen
2012-12-20 05:59:37 -08:00
commit f299bd4ca7
1 changed files with 81 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
index.html Normal file
View File

@@ -0,0 +1,81 @@
<html>
<head>
<title>&hearts;</title>
<style type="text/css" media="screen">
@font-face {
font-family: 'entypo';
src: url('f/entypo.eot');
src: url('f/entypo.eot?#iefix') format('embedded-opentype'),
url('f/entypo.woff') format('woff'),
url('f/entypo.ttf') format('truetype'),
url('f/entypo.svg#entypo') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'entypo';
font-size: 11px;
background: #900;
color: #fff;
-webkit-animation: bodybg 10s infinite;
animation: bodybg 10s infinite;
}
div.attribution {
position: absolute;
bottom: 5px;
left: 5px;
}
div.attribution a {
text-transform: uppercase;
text-decoration: none;
color: #fff;
}
span#heart {
font-family: 'entypo';
display: inline-block;
vertical-align: middle;
position: fixed;
width: 400px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -300px;
text-align: center;
font-size: 500px;
color: #fff;
line-height: 100%;
-webkit-animation: heartanimation 10s infinite;
animation: heartanimation 10s infinite;
}
@-webkit-keyframes bodybg
{
0% { background-color: #900; }
50% { background-color: #f00; }
100% { background-color: #900; }
}
@-webkit-keyframes heartanimation
{
0% { font-size: 500px; color: #f00; }
50% { font-size: 1000px; color: #900; width: 800px; height: 400px; margin-left: -400px; }
100% { font-size: 500px; color: #f00; width: 400px; height: 200px; margin-left: -200px; }
}
</style>
</head>
<body class="animate">
<span id="heart">&hearts;</span>
<div class="attribution">
<a href="http://www.entypo.com/">Entypo pictograms by Daniel Bruce</a>
&middot; This is a CSS3 keyframe animation test
</div>
</body>
</html>