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

【问题标题】：What is the technique to achieve this effect?实现这种效果的技术是什么？
【发布时间】：2015-06-15 16:04:34
【问题描述】：

我正在尝试通过 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);
}

【问题讨论】：

看看CSS3 animations。该网站正在使用 SVG

标签： jquery html css css-transitions

【解决方案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):}
  }

&lt;span class="highlighter"&gt;&lt;/span&gt;

【讨论】：