实现这种效果的技术是什么？

Question

我正在尝试通过 html 和 css 获得类似的效果（快照），但可以得到结果吗？我可以假设这是通过 css3 转换完成的。

任何人都可以帮助我如何通过 css3 过渡获得这种效果？

这是网站 url

https://www.mrd.com/

我试过这些

// 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);
}

Answer 1

是这样的吗？

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

实现这种效果的技术是什么？

What is the technique to achieve this effect?

jquery

html

css

css-transitions