Автором такого стиля ссылок является Christoph Pojer – MooTools разработчик. Принаведении курсора мыши на ссылку, она анимируется и немного смещается влево или вправо. Для усиления эффекта изменяется фоновый цвет. Эффект создаётся только средствами CSS!
CSS

.cpojer-links a {
        display: inline-block;
        padding: 4px;
        outline: 0;
        color: #3a599d;
        -webkit-transition-duration: 0.25s;
        -moz-transition-duration: 0.25s;
        -o-transition-duration: 0.25s;
        transition-duration: 0.25s;
        -webkit-transition-property: -webkit-transform;
        -moz-transition-property: -moz-transform;
        -o-transition-property: -o-transform;
        transition-property: transform;
        -webkit-transform: scale(1) rotate(0);
        -moz-transform: scale(1) rotate(0);
        -o-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
}
.cpojer-links a:hover {
        background: #3a599d;
        text-decoration: none;
        color: #fff;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
        -webkit-transform: scale(1.05) rotate(-1deg);
        -moz-transform: scale(1.05) rotate(-1deg);
        -o-transform: scale(1.05) rotate(-1deg);
        transform: scale(1.05) rotate(-1deg);
}
.cpojer-links a:nth-child(2n):hover {
  -webkit-transform: scale(1.05) rotate(1deg);
  -moz-transform: scale(1.05) rotate(1deg);
  -o-transform: scale(1.05) rotate(1deg);
  transform: scale(1.05) rotate(1deg);
}

Christoph использовал функции трансформации каждого браузера (каждый имеет свой префикс). Время трансформации установлено на 250 миллисекунд, а масштабирование/вращение определяется установками по умолчанию. Состояние hover изменяет цвет фона (скруглённые углы усиливают эффект), изменяется масштаб и выделение ссылки немного наклоняется. В завершение, чётные ссылки вращаются в противоположном направлении, просто для улучшения стиля!

Такой эффект хорошо и оригинально выделяет ссылки на странице, требует мало кода и реализуется только средствами CSS!

Добавлено: 08 Мая 2018 17:01:06 Добавил: Андрей Ковальчук Нравится 0

Добавить