.dot {

    width: 10px;height: 10px;

    position: absolute;

    left:550px;

    top:653px;

}

.dot:before{

    content:' ';

    position: absolute;

    z-index:2;

    left:0;top:0;width:10px;height:10px;

    background-color: #ff4200;

    border-radius: 50%;}

.dot:after {

    content:' ';

    position: absolute;

    z-index:1;

    width:10px;

    height:10px;

    background-color: #ff4200;

    border-radius: 50%;

    box-shadow: 0 0 10px rgba(0,0,0,.3) inset;

    -webkit-animation:ripple 1s ease 0s infinite normal;/*动画属性名，也就是我们前面keyframes定义的动画名*/

    -moz-animation:ripple 1s ease 0s infinite normal;

    -ms-animation:ripple 1s ease 0s infinite normal;}