jquery - What is the technique to achieve this effect? -

i trying similar effect (snapshot) via html , css result ? assume 1 done css3 transition.

anyone me how can effect through css3 transition ?

site url

https://www.mrd.com/

i have tried these

// html  <span class="highlighter"></span>   // css  .highlighter {   position: absolute;   z-index: 1000;   pointer-events: none;   -webkit-border-radius: 50%;   -moz-border-radius: 50%;   -o-border-radius: 50%;   border-radius: 50%;   border: 1px solid #fff;   width: 20px;   height: 20px;   padding: 12px;   transform: pulse 1s infinite;   display: block; }    .highlighter:after {   content: "";   display: block;   -webkit-border-radius: 50%;   -moz-border-radius: 50%;   -o-border-radius: 50%;   border-radius: 50%;   background: #fff;   width: 20px;   height: 20px;   opacity: 0.5;   box-shadow: 0 0 3px rgba(0,0,0,0.2); } 

something this?

.highlighter {    position: absolute;    z-index: 1000;    pointer-events: none;    -webkit-border-radius: 50%;    -moz-border-radius: 50%;    -o-border-radius: 50%;    border-radius: 50%;    border: 1px solid #fff;    width: 20px;    height: 20px;    padding: 12px;    transform: pulse 1s infinite;    display: block;    background:orange;    -webkit-animation: big 2s infinite;  }        .highlighter:after {    content: "";    display: block;    -webkit-border-radius: 50%;    -moz-border-radius: 50%;    -o-border-radius: 50%;    border-radius: 50%;    background: #fff;    width: 20px;    height: 20px;    opacity: 0.5;    box-shadow: 0 0 3px rgba(0,0,0,0.2);    -webkit-animation: big 2s infinite;  }    @-webkit-keyframes big{    50%{-webkit-transform:scale(1.3,1.3);}    100%{transform:scale(1,1):}    }

<span class="highlighter"></span>