css实现声音开关图标 |考拉编译scss出错

.audio-control {
position: relative;
width: 30px;
height: 30px;
cursor: pointer;
}
.audio-control:before, .audio-control:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 10px;
}
.audio-control:before {
top: 8px;
left: 0px;
background-color: #ccc;
}
.audio-control:after {
top: 5px;
left: 6px;
background-color: #ccc;
}
.audio-control.active:before {
background-color: #f00;
}
.audio-control.active:after {
background-color: #fff;
}

代码中，大家创建了一个音频控件的容器，并设置好其基本样式。接着，在:before和:after伪元素中，大家分别创建了控件的两个元素：一个圆形音频图标以及另一个指示声音开关的轨迹指示器。最后添加一个伪类.active用来控制开关状态。

当大家点击该按钮时，Javascript将添加或删除.active类。这个类是用来重新渲染图标和指示器的，从而使音频开关实现开和关的效果。