Result
水上で起こる波紋のようなエフェクトです
css
html,
body {
margin: 0;
background: #45c2c5;
}
.ripple,
.ripple:before,
.ripple:after {
display: block;
border-radius: 2px;
width: 2px;
height: 2px;
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 {
animation-delay: 0.2s;
top: 5px;
left: 25px;
}
.ripple:after {
animation-delay: 0.8s;
top: 25px;
left: 0;
}
@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;
}
}
|
html
<div>
<h1>foo</h1>
<span class="ripple"></span>
</div>
|
via
CSS ripple effect
