Html 如何在css中添加斑点凸起效果？

我想知道我们如何才能像在这个网站上那样实现点膨胀效应： 如果你查看视频部分，你可以看到绿色的圆圈有一个漂亮的css动画在相同的时间间隔内重复。我在网上查过类似的教程，但没有找到

他们使用了这个类：span.intro-marker

---

有人知道如何创建这种效果吗？

首先，如果您想了解任何页面的特定元素的所有信息，请右键单击并单击Inspect元素

大多数浏览器都有这个功能。它将详细地告诉您有关您想要的特定元素的信息。这是：

span.intro-marker {
    -moz-box-sizing: border-box;
    background: radial-gradient(circle farthest-side at center center , #1AAF5D 50%, rgba(26, 175, 93, 0.2) 57%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 2px solid #1AAF5D;
    border-radius: 50%;
    cursor: pointer;
    height: 52px;
    left: 0;
    overflow: visible;
    position: absolute;
    top: 0;
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
    width: 52px;
    z-index: 10;
}
span.intro-marker.in {
    transform: scale(1);
}
span.intro-marker.in:after {
    -moz-box-sizing: border-box;
    animation: 5s linear 3s normal none infinite homeMarkers;
    -webkit-animation: 5s linear 3s normal none infinite homeMarkers;
    background: radial-gradient(circle farthest-side at center center , rgba(26, 175, 93, 0) 70%, #1AAF5D 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #1AAF5D;
    border-radius: 50%;
    content: "";
    height: 52px;
    left: -2px;
    opacity: 0;
    position: absolute;
    top: -2px;
    width: 52px;
}
@keyframes homeMarkers {
  5% {
    opacity: 0.6;
  }
  27% {
    opacity: 0;
    transform: scale(1.8);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes homeMarkers {
  5% {
    opacity: 0.6;
  }
  27% {
    opacity: 0;
    transform: scale(1.8);
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes homeMarkers {
  5% {
    opacity: 0.6;
  }
  27% {
    opacity: 0;
    transform: scale(1.8);
  }
  100% {
    opacity: 0;
  }
}

---

工作，在firefox中测试，下面的提琴/代码应该给你一个合适的起点，然后根据需要进行调整

HTML

---

你试过在firebug中调试和检查吗？是的，但我失败了。这就是我检查教程的原因。JSFIDLE应该是great@user1012181是的，做一个，让我们知道它看起来怎么样。如果您有任何问题，我们可能会提供帮助。@pellePenna在这里。。动画没有到位，它在firefox+1中正确显示，为学习点从头开始提供了实际示例

<span class="point"><span class="ripple"></span><span>

.point, .ripple {
    display:inline-block;
    border-radius:100%;
    height:55px;
    width:55px;
}
.ripple {
    position:absolute;
    transition:all 1.2s ease;
    -webkit-box-shadow: 0px 0px 8px #1AAF5D, inset 0px 0px 23px #8AF2B7;
    -moz-box-shadow: 0px 0px 8px #1AAF5D, inset 0px 0px 23px #8AF2B7;
    box-shadow: 0px 0px 8px #1AAF5D, inset 0px 0px 23px #8AF2B7;
}
.point {
    position:relative;
    border: 2px solid #1AAF5D;
    background:rgba(26, 175, 93, 0);
}
.point:after {
    content:'';
    display:inline-block;
    position:absolute;
    border-radius:100%;
    height:25px;
    width:25px;
    background:#1AAF5D;
    top:15px;
    left:15px;
}
.point:hover .ripple {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    opacity:0;
}