>Zina: /* Версия с Tison.com.ua */

2022-10-21T20:46:58Z

Версия с Tison.com.ua

Нова сторінка

== Анимация стрелки с увеличением ее длины ==

* https://codepen.io/nxworld/pen/boRVKR
* https://codepen.io/shuta/pen/dXbyWz — без SVG в коде
* https://codepen.io/georgiacobrien/pen/BajydKz — похожая версия
* https://codepen.io/ChrisBup/pen/xLgobW — без SVG в коде

=== Пример на основе https://codepen.io/malavigne/pen/vodKrP ===

<source lang="html">

<div class="arrow__animate left">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 74.5 7.3" style="enable-background:new 0 0 74.5 7.3;" xml:space="preserve">
<path class="arrow__tip" d="M74.3,4.1c0.2-0.2,0.2-0.5,0-0.7l-3.2-3.2c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7l2.8,2.8l-2.8,2.8c-0.2,0.2-0.2,0.5,0,0.7 s0.5,0.2,0.7,0L74.3,4.1z"></path>
<rect class="arrow__handle" y="3.1" width="30" height="1.1"></rect>
</svg>
</div>
</source>

<source lang="css">
/*
Анимированная стрелка состоит из двух SVG элементов:
— rect — линия
— path — острие
В CSS меняем только длину линии.
*/

.arrow__animate.left {
@apply brdr py-4 px-8 cursor-pointer text-white rotate-180;
& svg {
@apply w-[100px] fill-current transition-transform translate-x-0;
transition: 0.3s;
/*
В начальном состоянии уменьшаем длину линии.
Устанавливаем точку отсчета анимаций - относительно правого конца линии.
*/
& rect {
@apply origin-right duration-300 scale-x-[85%];
}
}
/*
При наведении одновременно изменяем размер линии до исходного
и смещаем линию по горизонтали.
*/
&:hover {
@apply bg-gray-800;
& svg {
@apply translate-x-[15%];
& rect {
@apply scale-x-100;
}
}
}
}
</source>

=== Пример на основе https://codepen.io/jsomai/pen/GRNNvYV — выглядит наиболее ок ===

<source lang="html">
<svg id="left">
<path d="M0.5 9.35772H20.9956L14.2001 2.29941L16.4134 0L27 11L16.4134 22L14.2001 19.7006L20.9956 12.6423H0.5V9.35772Z" fill="currentColor"></path>
</svg>
<svg id="right">
<path d="M0.5 9.35772H20.9956L14.2001 2.29941L16.4134 0L27 11L16.4134 22L14.2001 19.7006L20.9956 12.6423H0.5V9.35772Z" fill="currentColor"></path>
</svg>
</source>

<source lang="css">
& svg {
@apply brdr cursor-pointer;
height: 22px;
width: 60px;
/* opacity: 0.5; */
transition: 250ms all ease;
& path {
transition: 250ms all ease;
}
&:hover {
opacity: 1;
}
}
& svg#left{
transform:rotate(180deg);
}
& svg:hover path {
d: path("M0 9.35772H50.9956L44.2001 2.29941L46.4134 0L57 11L46.4134 22L44.2001 19.7006L50.9956 12.6423H0V9.35772Z");
}
</source>

=== Версия с Tison.com.ua ===

<source lang="html">
<button class="link-back">
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="33.403" viewBox="0 0 70 33.403">
<path d="m19.999 15.775 13.85-15.775 2.2856 2.0077-10.739 12.231h44.603v3.042h-44.959l11.154 14.247-2.3961 1.8749z" stroke-width="1.014"/>
</svg>
</button>
</source>

<source lang="css">
button.link-back {
@apply cursor-pointer;
& svg {
@apply w-[70px] h-[33.403px] fill-current;
& path {
transition: 250ms all ease;
}
}
&:hover svg path {
d: path("m0 15.775 13.85-15.775 2.2856 2.0077-10.739 12.231h64.603v3.042h-64.959l11.154 14.247-2.3961 1.8749z");
}
}
</source>

Arrows - Історія редагувань

>Zina: /* Версия с Tison.com.ua */