CSS 剪辑路径将圆圈对齐到左侧

Question

我想制作一个在页面加载和悬停时展开一次的 gdpr 同意浮动广告。我发现 CSS clip-path 可能是一个很好的解决方案。

在默认状态下，我只想显示一个带有同意图标的圆圈。

在悬停状态下，我想显示圆圈和文字。

正如您在第一张图片中看到的那样，圆并不完美。使用 clip-path: circle(); 会形成一个完美的圆，但默认情况下它是居中的。添加任何参数都会使事情变成猜谜游戏。 clip-path: circle(19% at 13% 50%); 大约是。我想要什么，但是它更完美，我也不认为这是好的做法。它会与单词的其他翻译或更改字体等中断。

那么，我能否使用裁剪路径制作一个由元素高度（因此半径为高度的 50%）计算并与元素左侧对齐的完美圆？

SCSS

.gdpr__floating_container {

  &__animate {
    animation: gdpr__floating_container ease-in-out 1500ms;
    @keyframes gdpr__floating_container {
      50% {
        clip-path: circle(100%);
      }
    }
  }

  clip-path: circle(19% at 13% 50%);
  transition: clip-path 750ms;

  &:hover {
    clip-path: circle(100%);
  }

}

HTML

<div class="gdpr__floating_container rounded-pill bg-dark text-light" style="font-size: 1.2rem; cursor: pointer; position: fixed; display: flex; left: 1vw; bottom: 1vw; align-items: center;">
   <button type="button" class="btn btn-link text-primary" style="font-size: 1.5rem;">
      <svg class="icon">
         <use href="/fontawesome/sprites/solid.svg#cookie-bite"></use>
      </svg>
   </button>
   <span class="pr-4">Datenschutz</span>
</div>

Answer 1

I think you should 'make grow' a parent element with the same border-radius and background-color on hover. It will do the same effect without moving your image.

Anyways, it would be nice to check out your HTML code.

编辑：

查看此 Codepen，

https://codepen.io/filoscoder/pen/abpxRmg

Answer 2

最初的问题是：clip-path: circle() 能否在 none 方形矩形中左对齐。

答案大多是否定的，除非你手动对齐像素。例如：clip-path: circle(25px at 25px 50%);.

在 0 处对齐会创建一个半圆，因此它必须精确定位在 1x 半径（本例中为 25px）。

然而，这仅适用于固定尺寸的对象。没有更多动态框的运气。

CSS 剪辑路径将圆圈对齐到左侧

CSS Clip Path align circle to left side

css

clip-path