的 Fiddle

Question

我想知道如何在这个站点中完成这种现场膨胀效果：https://koding.com/ 如果你查看视频部分，你可以看到绿色圆圈有一个很好的CSS动画重复在同一间隔。我在网上查了类似的教程但找不到。

他们使用了这个课程：span.intro-marker 有人知道如何创造这种效果吗？

Answer 1

以下小提琴/代码应该为您提供一个不错的起点，然后根据需要进行调整

的 Fiddle

HTML

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

CSS

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

Answer 2

首先，如果您想了解任何页面特定元素的所有内容，请右键单击并单击“检查元素”。

大多数浏览器都有此功能。它会以详细的方式告诉您有关您想要的特定元素的信息。这是：

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

工作jsFiddle，在firefox中测试

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

2 个答案:

的 Fiddle