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

Question

我试图通过html和css获得类似的效果（快照），但可以得到结果？我可以假设这个是由css3过渡完成的。

任何人都帮助我，我怎样才能通过css3过渡获得这种效果？

这是网站网址

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

这样的东西？

＆＃13;

＆＃13;

.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):}
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;