<body>
<div>☆<span class="ring_wave"></span></div>
</body>
body{
text-align: center;
}
div{
position: relative;
display: inline-block;
}
.ring_wave{
border: 1px solid #56aae8;
border-radius: 100px;
height: 30px;
width: 30px;
position: absolute;
top: -4px;
right: -8px;
-webkit-animation: ring 6s ease-out;
animation: ring 6s ease-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
opacity: 0;
}
@keyframes ring{
30% {
-webkit-transform: scale(.1,.1);
transform: scale(.1,.1);
opacity: 0;
}
35% {
opacity: 1;
}
40% {
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
opacity: 0;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.