html - 如何创建用于在页面/幻灯片之间切换的元素符号

Question

我有一个在 div 之间切换的页面，功能正常，但现在，我只有这个:

我希望黑色/白色容器是没有文字的元素符号。像这样:

#menu li {
	display:block;
	margin: 10px;
	color: #000;
	background:#fff;
	background: rgba(255,255,255, 0.5);
	-webkit-border-radius: 10px;
            border-radius: 10px;
}
#menu li.active{
	background:#666;
	background: rgba(0,0,0, 0.5);
	color: #fff;
}
#menu li a{
	text-decoration:none;
	color: #000;
}
#menu li.active a:hover{
	color: #000;
}
#menu li:hover{
	background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
	padding: 9px 18px;
	display:block;
}
#menu li.active a{
	color: #fff;
}
#menu{
	position:fixed;
	top:18%;
	right:1%;
	height: 40px;
	z-index: 70;
	width: 10%;
	padding: 0;
	margin:0;
}

<ul id="menu">
	<li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
	<li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
	<li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
	<li data-menuanchor="4thpage"><a href="#4thpage">Fourth slide</a></li>
</ul>

Answer 1

您可以使用多个 box-shadow 和 border-radius 设置为 50% 来做到这一点。

此外，您可以使用另一个事件类为所选元素符号提供不同的外观。在这种情况下，我使用 opacity 来区分事件元素符号和非事件元素符号:

.dots {
  display: inline-block;
  width: 50px;
  margin: 1em;
  height: 50px;
  opacity: 0.5;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 3px green,
              0px 0px 0px 5px #fff;
  -webkit-box-shadow: 0px 0px 0px 3px green,
              0px 0px 0px 5px #fff;
}

html {
  width: 100%;
  height: 100%;
  background-color: green;
}

.dots + .dots-active {
  opacity: 1.0
}

<div class="dots">
</div>

<div class="dots dots-active">
</div>