将剪辑路径从右下角旋转到左下角

Question

我在 css 上有一个按钮：

button {
  background: #FB5D5D;
  width: 350px;
  height: 54px;
  border-radius: 4px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  color: white;
  border: none;
  transition: clip-path 3s ease, transform 3s ease, -webkit-clip-path 3s ease;
}

button:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(-90deg, #D92121 0%, #FF6464 100%);
  z-index: -1;
  transition: clip-path .3s ease;
  clip-path: polygon(200% 0, 0 200%, 0 0);
}

button:hover:after {
  clip-path: polygon(0 0, 0 0, 0 0);
}

<button type="submit" class="w-full font-bold">Send</button>

如何从左下角开始动画，而不是从右下角开始？我需要当用户将鼠标悬停在按钮上时，动画应该从左边开始，然后从浅色背景变为深色（浅色应该像现在一样出现在整个按钮上）。请帮助。谢谢

Answer 1

您只需使用 transfomr: rotateY(0.5turn); 旋转 90deg 并从 right 制作动画即可。

编辑

更改背景渐变的角度-270deg 将黑暗的一面向右移动。

button {
  background: #FB5D5D;
  width: 350px;
  height: 54px;
  border-radius: 4px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  color: white;
  border: none;
  transition: clip-path 3s ease, transform 3s ease, -webkit-clip-path 3s ease;
}

button:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(-270deg, #D92121 0%, #FF6464 100%);
  z-index: -1;
  transition: clip-path .3s ease;
  clip-path: polygon(200% 0, 0 200%, 0 0);
  transform: rotateY(0.5turn);
}

button:hover:after {
  clip-path: polygon(0 0, 0 0, 0 0);
}

<button type="submit" class="w-full font-bold">Send</button>

Answer 2

您可以使用 transform: scaleX(-1) 翻转 ::after 选择器。您可以将渐变的角度更改为 90deg 以使黑暗的一面向右。

button {
  background: #FB5D5D;
  width: 350px;
  height: 54px;
  border-radius: 4px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  color: white;
  border: none;
  transition: clip-path 3s ease, transform 3s ease, -webkit-clip-path 3s ease;
}

button:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, #D92121 0%, #FF6464 100%);
  z-index: -1;
  transition: clip-path .3s ease;
  clip-path: polygon(200% 0, 0 200%, 0 0);
  transform: scaleX(-1);
}

button:hover:after {
  clip-path: polygon(0 0, 0 0, 0 0);
}

<button type="submit" class="w-full font-bold">Send</button>

将剪辑路径从右下角旋转到左下角

Rotate clip-path from bottom right side to the bottom left side

css

clip-path

编辑