<div>
<h1>Ripple</h1>
<span class="ripple"></span>
</div>
@import url(https://fonts.googleapis.com/css?family=Norican);
html, body {margin:0;background:#45c2c5;}
div {
display:block;
position:absolute;
top:50%;
left:50%;
margin:-20px 0 0 -20px;
width:40px;
line-height:40px;
}
h1 {
font-size:50px;
font-family: 'Norican', cursive;
color:white;
text-shadow:0 2px 0 #8ed2d4,2px 3px 15px rgba(0,0,0,0.5);
}
.ripple,.ripple:before,.ripple:after {
display:block;
border-radius:2px;
width:2px;
height:2px;
-webkit-animation:rip 6s infinite ease-out;
-moz-animation:rip 6s infinite ease-out;
}
.ripple {
position:absolute;
z-index:-1;
top:40px;
left:15px;
}
.ripple:before,.ripple:after {
content:'';
position:absolute;
}
.ripple:before {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;top:5px;left:25px;}
.ripple:after {-webkit-animation-delay:.8s;-moz-animation-delay:.8s;top:25px;left:0;}
@-webkit-keyframes rip
{
0% {
box-shadow:0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent;
}
15% {
box-shadow:0 0 0 0 #45c2c5,
0 0 0 0 rgba(255,255,255,0.4),
0 0 0 0 #45c2c5,
0 0 0 0 rgba(0,0,0,0.08);
}
100% {
box-shadow:0 0 40px 200px #45c2c5,
0 0 10px 210px transparent,
0 0 30px 220px #45c2c5,
0 0 5px 230px transparent;
}
}
@-moz-keyframes rip
{
0% {
box-shadow:0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent;
}
15% {
box-shadow:0 0 0 0 #45c2c5,
0 0 0 0 rgba(255,255,255,0.4),
0 0 0 0 #45c2c5,
0 0 0 0 rgba(0,0,0,0.08);
}
100% {
box-shadow:0 0 40px 200px #45c2c5,
0 0 10px 210px transparent,
0 0 30px 220px #45c2c5,
0 0 5px 230px transparent;
}
}
This Pen doesn't use any external CSS resources.