CSS
.bullet{
margin: 0;
padding: 0;
position: absolute;
z-index: 1;
border-radius: 30px;
width: 36px;
height: 16px;
background: #e82257;
z-index: 9000;
top: 50px;
left: 50px;
cursor: pointer;
background: #ddd;
}
.bullet:before{
content: '';
display: block;
width: 10px;
height: 10px;
border: 1px solid rgba(255, 255, 255, 0.8);
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
position: absolute;
left: 2px;
top: 2px;
background: #f00;
}
.bullet:after{
content: '';
display: block;
border: 10px solid #e82257;
background: transparent;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
height: 50px;
width: 50px;
-webkit-animation: pulse 3s ease-out;
-moz-animation: pulse 3s ease-out;
animation: pulse 3s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
position: absolute;
top: -27px;
left: -27px;
z-index: 1;
opacity: 0;
}
.bullet,
.bullet:before,
.bullet:after{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.bullet.active:before{
left: auto;
right: 2px;
background: green
}
.bullet.active:after{
left: auto;
right: -27px;
}
.bullet.active:after{
border-color: green;
}
@-moz-keyframes pulse {
0% {
-moz-transform: scale(0);
opacity: 0.0;
}
25% {
-moz-transform: scale(0);
opacity: 0.1;
}
50% {
-moz-transform: scale(0.1);
opacity: 0.3;
}
75% {
-moz-transform: scale(0.5);
opacity: 0.5;
}
100% {
-moz-transform: scale(1);
opacity: 0.0;
}
}
@-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
25% {
-webkit-transform: scale(0);
opacity: 0.1;
}
50% {
-webkit-transform: scale(0.1);
opacity: 0.3;
}
75% {
-webkit-transform: scale(0.5);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1);
opacity: 0.0;
}
}
