Бордер (border) анимация на чистом CSS

HTML и CSS WordSmall

На ресурсе GitHub можно найти очень много креативных, интересных и полезных плагинов, написанных на разных языках программирования. На своем блоге я уже о многих рассказывал, делал обзоры. И сегодня хочу осветить еще один, с помощью которого легко сделать border анимацию.

Pure-CSS3-Animated-Border

бордер анимация

Плагин представляет из себя небольшую библиотеку с более чем 40 эффектов border анимации. Поддерживается всеми современными браузерами, в том числе Internet Explorer начиная с 10 версии. Все что нужно для работы, так это подключить один файл стилей и для любого элемента, где хотели бы видеть бордер анимацию, достаточно добавить необходимый класс.

демо скачать

Подключение

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/code-fx/Pure-CSS3-Animated-Border@V1.0/css/animated-border/animated-border.min.css" />

На WordPress лучше всего подключить стили через файл functions.php. Делается это так.

// бордер анимация
function wsborder_styles() {
        wp_register_style('border-ani', 'https://cdn.jsdelivr.net/gh/code-fx/Pure-CSS3-Animated-Border@V1.0/css/animated-border/animated-border.min.css', array(), '1.0');
    wp_enqueue_style('border-ani');
};
add_action( 'wp_enqueue_scripts', 'wsborder_styles' );
/* end */

Пример использования

После подключения библиотеке осталось добавить класс к любым элементам.

<a href="#" class="ui-box top-leftToRight">
  Бордер анимация гиперссылки
</a>

<div class="ui-box bottom-rightToLeft">
  Анимация DIV блока
</div>

<button class="ui-box left-bottomToTop">
  Анимация тега Button
</button>
<p class="ui-box right-topToBottom">
  Анимация параграфа
</p>

4 линейная анимация border

Конструкция 4 линейной анимации чуток отличается от однолинейной. Требуется добавить еще тег span.

<a href="#" class="ui-box top-leftStart">
  <span class='ui-border-element'>
    Animated Hyperlink
  </span>
</a>

Редактирование

Вдруг понадобиться изменить цвет, толщину, эффект бордера, то это можно сделать через те же классы. Если изменения не заработают, попробуйте добавить значение !important.

.top-leftToRight:before{
    border-top: 5px solid red;
    transition-timing-function: linear;
}

Список всех классов

Название класса Span классы
.ui-box .topBottom-leftRightCorner <span class='ui-border-element'> Your Content... </span>
.ui-box .topBottom-rightLeftCorner <span class='ui-border-element'> Your Content... </span>
.ui-box .forwardBorderTrain <span class='ui-border-element'> Your Content... </span>
.ui-box .backwardBorderTrain <span class='ui-border-element'> Your Content... </span>
.ui-box .border-inOutSpread <span class='ui-border-element'> Your Content... </span>
.ui-box .slideOpposite <span class='ui-border-element'> Your Content... </span>
.ui-box .top-leftToRight
.ui-box .right-topToBottom
.ui-box .bottom-rightToLeft
.ui-box .left-bottomToTop
.ui-box .top-rightToLeft
.ui-box .right-bottomToTop
.ui-box .bottom-leftToRight
.ui-box .left-topToBottom
.ui-box .top-inOutSpread
.ui-box .right-inOutSpread
.ui-box .bottom-inOutSpread
.ui-box .left-inOutSpread
.ui-box .top-slideOpposite
.ui-box .right-slideOpposite
.ui-box .bottom-slideOpposite
.ui-box .left-slideOpposite
.ui-box .top-leftStart <span class='ui-border-element'> Your Content... </span>
.ui-box .top-rightStart <span class='ui-border-element'> Your Content... </span>
.ui-box .bottom-rightStart <span class='ui-border-element'> Your Content... </span>
.ui-box .bottom-leftStart <span class='ui-border-element'> Your Content... </span>
.ui-box .top-leftStart-backward <span class='ui-border-element'> Your Content... </span>
.ui-box .top-rightStart-backward <span class='ui-border-element'> Your Content... </span>
.ui-box .bottom-rightStart-backward <span class='ui-border-element'> Your Content... </span>
.ui-box .bottom-leftStart-backward <span class='ui-border-element'> Your Content... </span>
.ui-box .top-leftStart-burst <span class='ui-border-element'> Your Content... </span>
.ui-box .top-rightStart-burst <span class='ui-border-element'> Your Content... </span>
.ui-box .bottom-rightStart-burst <span class='ui-border-element'> Your Content... </span>
.ui-box .bottom-leftStart-burst <span class='ui-border-element'> Your Content... </span>
.ui-box .top-leftStart-burst-backward <span class='ui-border-element'> Your Content... </span>
.ui-box .top-rightStart-burst-backward <span class='ui-border-element'> Your Content... </span>
.ui-box .bottom-rightStart-burst-backward <span class='ui-border-element'> Your Content... </span>
.ui-box .bottom-leftStart-burst-backward <span class='ui-border-element'> Your Content... </span>
.ui-box .top-stay <span class='ui-border-element'> Your Content... </span>
.ui-box .right-stay <span class='ui-border-element'> Your Content... </span>
.ui-box .bottom-stay <span class='ui-border-element'> Your Content... </span>
.ui-box .left-stay <span class='ui-border-element'> Your Content... </span>
Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Добавить комментарий
bold quote code