css画十字架和靶心图标

 

.bottom {

      position: absolute;

      top: 230px;

      /* left: 10px; */

    }

    .bottom button {

      width: 30px;

      height: 30px;

      cursor: pointer;

      border: none;

      background: transparent;

      /* color: #333;

      box-shadow: 0px 1px 10px 2px rgb(10 10 10 / 50%);

      padding-left: 10px;

      border-radius: 50%;

      font-size: 30px;*/

    }

.cross  {

      width: 30px;

      height: 30px;

      position: relative;

    }

    .cross::before, .cross::after {

      content: ""; /* 伪元素，用来绘制十字架的两条线 */

      position: absolute; /* 绝对定位 */

      width: 26px;

      height: 4px;

      background-color: #333; /* 设置为黑色 */

      left: 0;

      top: 16px;

    }

    .cross::before {

      transform: rotate(90deg); /* 将第一条线旋转45度 */

    }

    .cross::after {

      transform: rotate(-180deg); /* 将第二条线旋转-45度 */

    }

    .round4,.round5{

      border-radius: 50%;

      background-color: #333;

      position: absolute;

      z-index: 1;

    }

    .round4{

      width: 20px;

      height: 20px;

      top: 8px;

      left: 3px;

    }

    .round5{

      width: 8px;

      height: 8px;

      border: 4px solid #fff;

      margin: 2px 0 0 2px;

      z-index: 1;

    }

 

<div class="bottom">

    <button id="centerPosition">

      <!-- <div class="coordinate"></div>

      <div class="point"></div> -->

      <div class="cross"></div>

      <div class="round4">

        <div class="round5">

        </div>

      </div>

    </button>

  </div>