实现效果如下:
yuanhuan.png

我在做相机界面时遇到了这样的按钮需求我的思路是两个圆环的嵌套,最里面的大圆环是透明色,然后嵌套其中的小圆环中央居中,最后再给大圆环设置一个边框,这样就实现了了这样的样式。
实例代码如下

 <!--嵌套实现圆环按钮-->
<div class="play">
  <div class="_play"></div>
</div>
<style>
.upload-choose .play {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: transparent;
  border: 6px solid rgba(254, 43, 84, 0.5);
}
.play ._play {
  position: absolute;
  background-color: #fe2b54;
  height: 64px;
  width: 64px;
  line-height: 64px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
}
</style>
Last modification:July 7, 2020
如果觉得我的文章对你有用,请随意赞赏