Estoy tratando de diseñar una barra de navegación con viñetas para un control deslizante y quiero que se vea así:

enter image description here

He estado tratando de lograr este efecto usando un degradado radial CSS como fondo del ancla, pero el efecto no es exactamente el mismo que el punto interno no debería desvanecerse.

El código que tengo ahora mismo:

#scroll-bullets {
   width: 100px;  
   background-color: blue; 
   padding:  20px; 
}

.sbn ul {
    list-style: none;
    text-align: center;
}
.sbn ul li {
    display: block;
    margin-bottom: 20px;
}
.sbn ul li a {
    display: block;
    width: 10px;
    height: 10px;
    font-size: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    outline: none;
    box-sizing: border-box;
    transition: .2s ease-in-out;

}

.sbn05 ul li a {
    background-color: rgba(255,255,255,.5);
    border-radius: 50%;
}
 
.sbn05 ul li a.is-active, .sbn05 ul li a:hover  {
    background-image: radial-gradient(circle, white, transparent, transparent); 
    transform: scale(2);
}
<div id="scroll-bullets" class="sbn sbn05">
  <ul>
      <li><a data-scroll id="bullet1" class="is-active" href="#sec-1"><span class="inner-bullet"></span></a></li>
      <li><a data-scroll id="bullet2" href="#who"><span class="inner-bullet"></span></a></li>
      <li><a data-scroll id="bullet3" href="#why"><span class="inner-bullet"></span></a></li>
      <li><a data-scroll id="bullet4" href="#"><span class="inner-bullet"></span></a></li>
      <li><a data-scroll id="bullet5" href="#"><span class="inner-bullet"></span></a></li>
  </ul>
              
</div>

¡Gracias de antemano!

1
Nil Suria 7 ago. 2020 a las 13:42

3 respuestas

La mejor respuesta

Simplemente agregue paradas de color a su degradado

background-image: radial-gradient(circle, white 20%, transparent 20%, transparent); 
#scroll-bullets {
  width: 100px;
  background-color: blue;
  padding: 20px;
}

.sbn ul {
  list-style: none;
  text-align: center;
}

.sbn ul li {
  display: block;
  margin-bottom: 20px;
}

.sbn ul li a {
  display: block;
  width: 10px;
  height: 10px;
  font-size: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  outline: none;
  box-sizing: border-box;
  transition: .2s ease-in-out;
}

.sbn05 ul li a {
  background-color: rgba(255, 255, 255, .5);
  border-radius: 50%;
}

.sbn05 ul li a.is-active,
.sbn05 ul li a:hover {
  background-image: radial-gradient(circle, white 20%, transparent 20%, transparent);
  transform: scale(2);
}
<div id="scroll-bullets" class="sbn sbn05">
  <ul>
    <li><a data-scroll id="bullet1" class="is-active" href="#sec-1"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet2" href="#who"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet3" href="#why"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet4" href="#"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet5" href="#"><span class="inner-bullet"></span></a></li>
  </ul>

</div>
4
Paulie_D 7 ago. 2020 a las 10:48

También puede utilizar el pseudoelemento {{X0} } para crear el círculo exterior con opacidad. El código explicado en los comentarios.

#scroll-bullets {
  width: 100px;
  background-color: #89ba16;
  padding: 20px;
}

.sbn ul {
  list-style: none;
  text-align: center;
}

.sbn ul li {
  display: block;
  margin-bottom: 20px;
}

.sbn ul li a {
  display: block;
  width: 10px;
  height: 10px;
  font-size: 0;
  text-indent: 100%;
  white-space: nowrap;
  outline: none;
  /* overflow: hidden; Removed so that you can see the ::after element */ 
  box-sizing: border-box;
  transition: .2s ease-in-out;
}

.sbn05 ul li a {
  background-color: rgba(255, 255, 255, .5);
  border-radius: 50%;
}

.sbn05 ul li a.is-active::after, /* Creates a pseudo version of existing element, can also use ::before */
.sbn05 ul li a:hover::after { 
  width: 30px;
  height: 30px;
  background: white;
  opacity: 0.5; /* Change according to your liking */
  display: block;
  position: relative;
  top: -10px;
  left: -10px;
  border-radius: 50%;
  content: " ";
}
<div id="scroll-bullets" class="sbn sbn05">
  <ul>
    <li><a data-scroll id="bullet1" class="is-active" href="#sec-1"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet2" href="#who"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet3" href="#why"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet4" href="#"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet5" href="#"><span class="inner-bullet"></span></a></li>
  </ul>

</div>
1
m4n0 7 ago. 2020 a las 11:01

Intente esto ...

#scroll-bullets {
   width: 100px;  
   background-color: #89b3a5; 
   padding:  20px; 
}

.sbn ul {
    list-style: none;
    text-align: center;
}
.sbn ul li {
    display: block;
    margin-bottom: 20px;
}
.sbn ul li a {
    display: block;
    width: 10px;
    height: 10px;
    font-size: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    outline: none;
    box-sizing: border-box;
    transition: .2s ease-in-out;
}

.sbn05 ul li a {
    background-color: #fff;
    border-radius: 50%;
}
 
.sbn05 ul li a.is-active, .sbn05 ul li a:hover  {
    background-image: radial-gradient(circle, #feffff,#bbd6d1,#bbd6d1,#bbd6d1); 
    transform: scale(2);
}
<div id="scroll-bullets" class="sbn sbn05">
  <ul>
      <li><a data-scroll id="bullet1" class="is-active" href="#sec-1"><span class="inner-bullet"></span></a></li>
      <li><a data-scroll id="bullet2" href="#who"><span class="inner-bullet"></span></a></li>
      <li><a data-scroll id="bullet3" href="#why"><span class="inner-bullet"></span></a></li>
      <li><a data-scroll id="bullet4" href="#"><span class="inner-bullet"></span></a></li>
      <li><a data-scroll id="bullet5" href="#"><span class="inner-bullet"></span></a></li>
  </ul>
              
</div>
1
Rayees AC 7 ago. 2020 a las 10:56