毛玻璃 close 按钮样式记录

可可爱爱的毛玻璃关闭按钮，图片如下~~

下面贴，css 和 页面代码~~

没有背景图片，背景图片是自己加来看毛玻璃的

  .close-circle {
    position: fixed;
    display: flex;
    z-index: 100;
    cursor: pointer;

    left: 24px;
    top: 24px;
  }

  .close {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    background: #fff;
    color: rgba(51, 51, 51, 0.8);
    width: 40px;
    height: 40px;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.3s;
  }
  .close-mask-dark {
    color: #fff;
    background: rgba(64, 64, 64, 0.25);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    backdrop-filter: saturate(150%) blur(10px);
  }

<div class="close-circle">
  <div class="close close-mask-dark">
    <svg
      t="1716363268562"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="3907"
      width="20"
      height="20"
    >
      <path
        d="M572.16 512l183.466667-183.04a42.666667 42.666667 0 1 0-60.586667-60.586667L512 451.84l-183.04-183.466667a42.666667 42.666667 0 0 0-60.586667 60.586667l183.466667 183.04-183.466667 183.04a42.666667 42.666667 0 0 0 0 60.586667 42.666667 42.666667 0 0 0 60.586667 0l183.04-183.466667 183.04 183.466667a42.666667 42.666667 0 0 0 60.586667 0 42.666667 42.666667 0 0 0 0-60.586667z"
        p-id="3908"
        fill="#ffffff"
      ></path>
    </svg>
  </div>
</div>