Hover эффект текста/ссылок. Kumya
Источник: ruseller.com
[html]
<div class="demo"><a class="link link--kumya" href="https://forumd.ru"><span data-letters="ForumD.ru">ForumD.ru</span></div>
<style>
.demo {background-color: #333;
height: 350px;}
.link {
outline: none;
text-decoration: none;
position: relative;
top:25%;
left: 20%;
font-size: 8em;
line-height: 1;
color: #9e9ba4;
display: inline-block;
text-align: center;
}
/* Kumya */
.link--kumya {
font-family: 'Syncopate', sans-serif;
font-size: 6.5em;
overflow: hidden;
padding: 10px 10px 0;
line-height: 1;
color: #242424;
}
.link--kumya:hover {
color: #242424;
}
.link--kumya::after {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
z-index: 0;
background: #242424;
-webkit-transform: translate3d(101%,0,0);
transform: translate3d(101%,0,0);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.link--kumya:hover::after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.link--kumya span {
display: block;
position: relative;
}
.link--kumya span::before {
content: attr(data-letters);
position: absolute;
color: #fff;
left: 0;
overflow: hidden;
white-space: nowrap;
width: 0%;
z-index: 2;
-webkit-transition: width 0.5s;
transition: width 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.link--kumya:hover span::before {
width: 100%;
}
</style>[/html]
установка
1. HTML код устанавливаем в нужном месте
<a class="link link--kumya" href="https://forumd.ru"><span data-letters="ForumD.ru">ForumD.ru</span>
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; text-align: center; } /* Kumya */ .link--kumya { font-family: 'Syncopate', sans-serif; font-size: 6.5em; overflow: hidden; padding: 10px 10px 0; line-height: 1; color: #242424; } .link--kumya:hover { color: #242424; } .link--kumya::after { content: ''; position: absolute; height: 100%; width: 100%; top: 0; right: 0; z-index: 0; background: #242424; -webkit-transform: translate3d(101%,0,0); transform: translate3d(101%,0,0); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1); } .link--kumya:hover::after { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .link--kumya span { display: block; position: relative; } .link--kumya span::before { content: attr(data-letters); position: absolute; color: #fff; left: 0; overflow: hidden; white-space: nowrap; width: 0%; z-index: 2; -webkit-transition: width 0.5s; transition: width 0.5s; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1); } .link--kumya:hover span::before { width: 100%; }
Возникшие у вас вопросы по установке данного эффекта или стилизации текста для него, можно задать в этой теме.
Надеюсь эффект вам понравился.