ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



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

Сообщений 1 страница 3 из 3

1

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

Источник: ruseller.com
[html]<br><br>
<a class="texthoveryaku link--yaku" href="https://forumd.ru"><span>F</span><span>o</span><span>r</span><span>u</span><span>m</span><span>D</span><span>.</span><span>R</span><span>U</span></a>
<style>
.html-post-box {background: #515151;
                height: 200px;}
.texthoveryaku {
        left: 50px;
outline: none;
text-decoration: none;
position: relative;
font-size: 8em;
line-height: 1;
color: #9e9ba4;
display: inline-block;
}
/* Yaku */
.link--yaku {
color: #D3D3D3;
font-family: 'Playfair Display';
font-weight: 400;
text-transform: uppercase;
font-size: 10em;
overflow: hidden;
padding: 0 0 10px;
}

.link--yaku::before {
content: '';
position: absolute;
height: 95%;
width: 100%;
border-width: 2px 0;
border-color: #282828;
border-style: solid;
left: 0;
-webkit-transform: translate3d(-101%,0,0);
transform: translate3d(-101%,0,0);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}

.link--yaku:hover::before {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

.link--yaku span {
display: inline-block;
position: relative;
-webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);
transform: perspective(1000px) rotate3d(0,1,0,0deg);
-webkit-transition: -webkit-transform 0.5s, color 0.5s;
transition: transform 0.5s, color 0.5s;
}

.link--yaku:hover span {
color: #1e1a1b;
-webkit-transform: perspective(1000px) rotate3d(0,1,0,360deg);
transform: perspective(1000px) rotate3d(0,1,0,360deg);
}

.link--yaku span:nth-child(4),
.link--yaku:hover span:first-child {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}

.link--yaku span:nth-child(3),
.link--yaku:hover span:nth-child(2) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}

.link--yaku span:nth-child(2),
.link--yaku:hover span:nth-child(3) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}

.link--yaku span:first-child,
.link--yaku:hover span:nth-child(4) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}

</style>
[/html]

установка

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

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

текст ссылочки располагаем по буковкам в <span>-ах
2. CSS-код, устанавливается в стиль css, или вместе html (предварительно обернув тегами <style></style>)

code
Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.


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

+2

2

интересное решение, возьму на зметку. спасибо

0

3

омг, как же это красиво и просто
http://s.pikabu.ru/images/big_size_comm/2012-07_5/13428615923013.png

0