Hover эффект текста/ссылок. Urpi

Источник: ruseller.com
[html]<svg class="hidden" viewBox="0 0 310 20">
    <defs>
    <clipPath id="cp_up">
        <polygon id="cp_poly_up" points="0,0 600,0 600,160" class=""></polygon>
    </clipPath>
    <clipPath id="cp_down">
        <polygon id="cp_poly_down" points="0,0 0,160 600,160"></polygon>
    </clipPath>
    </defs>
</svg>
<div class="demo"><a class="link link--urpi" href="http://forumd.ru" data-letters="ForumD.ru">ForumD.ru</a></div>
<style>
.demo {
       background-color: #fda9a9;
       height: 500px;
       top: -25px;
       position: relative;
}
.link {
        top: 35%;
        left: 7%;
outline: none;
text-decoration: none;
position: relative;
font-size: 8em;
line-height: 1;
color: #9e9ba4;
display: inline-block;
}
/* Urpi */
.link--urpi {
font-family: 'Oswald', sans-serif;
font-size: 10em;
font-weight: 700;
text-transform: uppercase;
color: #e78383;
-webkit-transition: color 0s 0.5s;
transition: color 0s 0.5s;
}

.link--urpi:hover {
color: transparent;
-webkit-transition: none;
transition: none;
}

.link--urpi::before,
.link--urpi::after {
content: attr(data-letters);
position: absolute;
top: 0;
left: 0;
color: #e78383;
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transition: color 0.5s, -webkit-transform 0.5s;
transition: color 0.5s, transform 0.5s;
}

.link--urpi::before {
-webkit-clip-path: url(#cp_up);
clip-path: url(../index.html#cp_up);
}

.link--urpi::after {
-webkit-clip-path: url(#cp_down);
clip-path: url(../index.html#cp_down);
}

.link--urpi:hover::before,
.link--urpi:hover::after {
color: #fff;
-webkit-transition: color 0.5s, -webkit-transform 0.5s;
transition: color 0.5s, transform 0.5s;
}

.link--urpi:hover::before {
-webkit-transform: translate3d(7px,1px,0);
transform: translate3d(7px,1px,0);
}

.link--urpi:hover::after {
-webkit-transform: translate3d(-7px,-1px,0);
transform: translate3d(-7px,-1px,0);
}
</style>[/html]

установка
1. HTML код устанавливаем в нужном месте

Код:
<svg class="hidden" viewBox="0 0 310 160">
    <defs>
    	<clipPath id="cp_up">
        <polygon id="cp_poly_up" points="0,0 310,0 310,160" class=""></polygon>
    	</clipPath>
    	<clipPath id="cp_down">
        <polygon id="cp_poly_down" points="0,0 0,160 310,160"></polygon>
    	</clipPath>
    </defs>
	</svg>
<a class="link link--urpi" href="#" data-letters="Urpi">Urpi</a>

В данном коде для svg указан размер 310 на 160. Вы меняете на свой размер.
При этом обратите внимание!
В демке площадь занимаемая надписью больше площади svg, при этом достигается эффект "обрубания" буквы. Если вы хотите, чтобы надпись просто "разъезжалась", следует для svg указать площадь побольше [хотя бы методом подбора].
2. CSS код, устанавливается в стиль css, или вместе html (предварительно обернув тегами <style></style>)

Код:
.link {
	outline: none;
	text-decoration: none;
	position: relative;
	font-size: 8em;
	line-height: 1;
	color: #9e9ba4;
	display: inline-block;
}
/* Urpi */
.link--urpi {
	font-family: 'Oswald', sans-serif;
	font-size: 10em;
	font-weight: 700;
	text-transform: uppercase;
	color: #e78383;
	-webkit-transition: color 0s 0.5s;
	transition: color 0s 0.5s;
}

.link--urpi:hover {
	color: transparent;
	-webkit-transition: none;
	transition: none;
}

.link--urpi::before,
.link--urpi::after {
	content: attr(data-letters);
	position: absolute;
	top: 0;
	left: 0;
	color: #e78383;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-transition: color 0.5s, -webkit-transform 0.5s;
	transition: color 0.5s, transform 0.5s;
}

.link--urpi::before {
	-webkit-clip-path: url(#cp_up); 
	clip-path: url(../index.html#cp_up);
}

.link--urpi::after {
	-webkit-clip-path: url(#cp_down); 
	clip-path: url(../index.html#cp_down);
}

.link--urpi:hover::before,
.link--urpi:hover::after {
	color: #fff;
	-webkit-transition: color 0.5s, -webkit-transform 0.5s;
	transition: color 0.5s, transform 0.5s;
}

.link--urpi:hover::before {
	-webkit-transform: translate3d(4px,3px,0);
	transform: translate3d(4px,3px,0);
}

.link--urpi:hover::after {
	-webkit-transform: translate3d(-4px,-3px,0);
	transform: translate3d(-4px,-3px,0);
}

Кроме того, вам скорее всего придется по-играться и в этих значениях

.link--urpi:hover::before {
-webkit-transform: translate3d(4px,1px,0);
transform: translate3d(4px,1px,0);
}

.link--urpi:hover::after {
-webkit-transform: translate3d(-4px,-1px,0);
transform: translate3d(-4px,-1px,0);
}

В предложенном для вас коде, подобраны оптимальные значения для короткой надписи URPI.
Чтобы наша надпись [ForumD.ru] приобрела такой "разъезд" пришлось вместо четверок ставить семерки.

Выше был продемонстрирован эффект так, как он задумывался автором.
Однако поскольку в решении не были полностью прописаны стили для ссылок, эффект будет цепляться за ваше оформление.
Например вот, что, на мой взгляд, интересненькое и многообещающее получилось со стандартными "голубыми аля 90-е гг" ссылочками
https://image.ibb.co/gAi3nJ/urpi.gif
Естественно вы можете навязать свои правила там где это вам нужно, и конечно придумать нечто интересненькое.


Возникшие у вас вопросы по установке данного эффекта или стилизации текста для него, можно задать в этой теме.
Надеюсь эффект вам понравился.