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

Question

<分区>

Answer 1

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

大多数浏览器都有这个功能。它会详细告诉您有关您想要的特定元素的信息。在这里:

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 中测试