3

Я хочу создать анимацию border для элемента кнопки. Дизайн состоит в том, что концы наклонного прямоугольника разрываются, а затем закрываются при наведении.

Вот что я пытаюсь сделать:

введите сюда описание изображения

Вот некоторый код и пример 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;
}

Пример на codepen

У меня проблемы с пониманием математики, лежащей в основе stroke-dasharray, но кажется, что это возможно без слишком сложной математики.

Другая проблема заключается в том, что кнопка должна быть отзывчивой. Таким образом, кнопка может содержать различное количество текста.

1

2 ответа 2

3

Вот, я думаю, самое лучшее, что вы можете сделать, чтобы создать кнопку автоматически реагирующую на изменение длины текста, соответствующую вашим требованиям.

У этого решения есть пара недостатков:

  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>

Источник ответа: @Paul LeBeau

3
  • красиво +1 (5 символов нужно)
    – Randall
    20 авг 2019 в 10:14
  • @ИзбытокСусликов мне показалось это решение интересным, именно по причине респонсивности кнопки при увеличении, уменьшении длины текста. 20 авг 2019 в 10:19
  • вообще выглядит колоритно сочетания цветов черный и желтый .А анимация в самый раз.
    – Randall
    20 авг 2019 в 10:22
1

Вместо использования skewed элемента SVG я использую polygon. Таким образом, я могу рассчитать общую длину (длину периметра) polygon.

Я сделал это с помощью javascript: console.log(poly.getTotalLength()). Это дало мне 543,7.

Для stroke-dasharray полигона я использую: 250, 21,85, где 250 + 21,85 = 543,7 / 2.

Я анимирую stroke-dashoffset до 543,7 / 2 = 271,85; и stroke-dasharray до 271,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>

Источник ответа:@enxaneta

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.