Skip to content

Instantly share code, notes, and snippets.

@Ashkanph
Last active September 26, 2018 09:19
Show Gist options
  • Save Ashkanph/e451e71cb9d26de1736badc04f7f0b89 to your computer and use it in GitHub Desktop.
Save Ashkanph/e451e71cb9d26de1736badc04f7f0b89 to your computer and use it in GitHub Desktop.
Pulse effect css style for html elements. just add the class to your element.
.pulse {
// margin:100px;
display: block;
width: 2px;
height: 2px;
border-radius: 50%;
background: transparent;
cursor: pointer;
/* box-shadow: 10 10 10 rgba(204,169,44, 0.4); */
animation: pulse 2s infinite;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 59, 43, 1);
}
70% {
-webkit-box-shadow: 0 0 0 50px rgba(255, 59, 43, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 59, 43, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(255, 59, 43, 1);
box-shadow: 0 0 0 0 rgba(255, 59, 43, 1);
}
70% {
-moz-box-shadow: 0 0 0 70px rgba(255, 59, 43,0);
box-shadow: 0 0 0 70px rgba(255, 59, 43, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(255, 59, 43, 0);
box-shadow: 0 0 0 0 rgba(255, 59, 43, 0);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment