Skip to content

Instantly share code, notes, and snippets.

@debloper

debloper/index.html

Created December 14, 2011 11:37
Show Gist options
  • Save debloper/1476243 to your computer and use it in GitHub Desktop.
Save debloper/1476243 to your computer and use it in GitHub Desktop.
Download ZIP
Pulsating HTML Element with just pinchful of CSS Animation
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Pulsator</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="pulsor">Pulsate!</div>
</body>
</html>
Raw
style.css
#pulsor {
width: 120px;
margin: 64px;
padding: 16px 32px;
font-size: 32px;
cursor: auto;
border-radius: 8px;
box-shadow: 0 0 10px #333;
}
#pulsor:hover {
-webkit-animation: pusate 1s infinite alternate;
-moz-animation: pusate 1s infinite alternate;
-animation: pusate 1s infinite alternate;
text-shadow: 0 0 8px #ccc;
}
@-webkit-keyframes pusate {
from { box-shadow: 0 0 10px #333; }
to { box-shadow: 0 0 20px #c00; }
}
@-moz-keyframes pusate {
from { box-shadow: 0 0 10px #333; }
to { box-shadow: 0 0 20px #c00; }
}
@keyframes pusate {
from { box-shadow: 0 0 10px #333; }
to { box-shadow: 0 0 20px #c00; }
}
Copy link

ghost commented Aug 17, 2013

Thank you!

@Kyttias
Copy link

Kyttias commented Mar 3, 2014

Perfect, this definitely set me in the right direction for making this: http://liveweave.com/87O1eW

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment