0

我想为按钮元素创建边框动画。设计是倾斜矩形的末端是打开的，然后在悬停时关闭。

这就是我们正在尝试做的（请原谅我的艺术“风格”）： 按钮

这是一些代码和一个codepen示例：

a svg rect {
  stroke: red;
  stroke-width: 5;
  transition: 1s;
  stroke-dasharray: 100%;
  stroke-dashoffset: 0;
}

a:hover svg rect {
  stroke-dasharray: 0%;
stroke-dashoffset: 0;
}

代码笔示例

我无法理解stroke-dasharray背后的数学，但似乎没有太多复杂的数学应该是可能的。

另一个问题是它需要响应。所以按钮可以包含不同数量的文本。

如果您需要进一步说明，请告诉我。

4

2 回答 2

4

我认为，这是创建满足您要求的自动响应按钮的最佳方法。

它有几个缺点：

  1. 按钮轮廓中的间隙大小因标签长度而异。
  2. 它需要一个相当新的浏览器（为了支持pathLength一个<rect>元素）

.btn {
  display: inline-block;
  position: relative;
  overflow: auto;
}

.btn + .btn {
  margin-left: 20px;
}

.btn svg {
  position: absolute;
  top: 0;
  left: 0;
}

.label {
  position: relative;
  font-size: 18px;
  font-weight: bold;
  padding: 5px 20px;
}

.btn, .btn svg {
  overflow: visible;
}

.btn svg rect {
  fill: gold;
  stroke: black;
  stroke-width: 2px;
  stroke-dasharray: 47 3;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  transform: skewX(-10deg) scale(1, -1);
  transition: all 0.75s;
}

.btn:hover svg rect {
  stroke-dasharray: 50 0;
  stroke-dashoffset: 50;
}
<div class="btn">
  <svg width="100%" height="100%">
    <rect width="100%" height="100%" pathLength="100"/>
  </svg>
  <div class="label">Button</div>
</div>

<div class="btn">
  <svg width="100%" height="100%">
    <rect width="100%" height="100%" pathLength="100"/>
  </svg>
  <div class="label">Much longer button</div>
</div>

于 2019-07-19T15:08:44.287 回答
3

我使用的是多边形，而不是使用倾斜的 svg 元素。这样我可以计算多边形的总长度（周长）。我已经使用 javascript: 完成了这项工作console.log(poly.getTotalLength())。这给了我 543.7。对于多边形stroke-dasharray，我使用250, 21.85250 + 21.85 = 543.7 / 2。

我正在stroke-dashoffset为 543.7 / 2 = 271.85 设置动画；和stroke-dasharray271.85 0。（行程从 250 到 271.85，间隙从 21.85 到 0）

我所做的另一项更改：我使用的是 svg<a>元素而不是您正在使用的元素，并且pointer-events:all;我添加了多边形以使其对鼠标敏感，尽管fill:none.

我希望你会发现这很有用。

polygon {
  stroke: red;
  stroke-width: 4;
  stroke-dasharray:250, 21.85;
  fill: none;
  transition: 1s;
  pointer-events:all;
}

polygon:hover{
  stroke: #ff0;
  stroke-dashoffset: 271.85;
  stroke-dasharray: 271.85 0;
}
<svg viewBox = "0 0 250 50" width="250">
  <a xlink:href="#" class="py-2 px-5">
    <text x="125" y="30" text-anchor="middle">Button Button Button</text>
    <polygon id="poly" points="2,48 220,48 248,2 30,2 2,48" />
  </a>
</svg>

于 2019-07-19T08:02:20.560 回答