0

不久前，我看到一个按钮在 width 属性上使用了三次贝塞尔过渡。我真的很喜欢它的外观，以及重新创建它是多么简单。

这是我制作的一个简单版本：https ://codepen.io/Xemros/pen/oNNKjLm

<div class="container">
  <button>Hover me !</button>
</div>


button {
  outline:none;
  background-color: #ABCDFE;
  height: 70px;
  width: 200px;
  border-radius: 2em;
  border:0px;
  color:white;
  font-weight:800;
  font-size:18px;
  transition: width .5s cubic-bezier(0.68, -0.55, 0.265, 1.55),box-shadow .4s;
  box-shadow: 0px 4px 15px -4px rgba(0,0,0,0.35);
}

button:hover {
  width:250px;
}

这对我来说已经很有效了，但我想更进一步。我想在我的三次贝塞尔过渡中添加更多点以创建“稳定”效果，因此最后的弹性感觉更加自然。但是 css 函数只需要 4 个参数，它们是两个点的坐标。像这样：三次贝塞尔曲线（x1，y1，x2，y2）。

这是我用来测试参数的工具：https ://cubic-bezier.com/#.68,-0.55,.26,1.55

这是一个绘制得很差的图表来说明我希望我的过渡如何表现：https ://i.stack.imgur.com/vKD6I.png

有谁知道在 CSS 或 JS/Jquery 中实现这一目标的简单方法？如果没有简单的方法，那么创建过渡的最有效方法是什么？

4

0 回答 0