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
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>