时间戳

首页 > 解决方案 > 将剪辑路径从右下角旋转到左下角

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

问题描述

我在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>

我如何从左下角开始动画，但不是正确的？我需要当用户将鼠标悬停在按钮上时，动画应该从左侧开始并从浅色背景转到深色（浅色应该像现在一样在整个按钮上）。请帮忙。谢谢。

标签： cssclip-path

解决方案

你可以通过使用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>

推荐阅读