• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов HTML » Эффект прицела при нажатие кнопки на CSS (Красочный эффект анимации при использование кнопки)
Эффект прицела при нажатие кнопки на CSS
Kosten
Дата: Вторник, 2018-10-02, 23:33 | Сообщение 1
Администраторы
Сообщений:18771
Награды: 55


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

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

Так смотрится при заходе на сайт:



Здесь уже выглядит при наведение курсора:



Приступаем к установке:

HTML

Код
<div class="kecnalogun-conuesta">
  <span>ZORNET.RU</span>
  <span class="top"></span>
  <span class="bottom"></span>
  <span class="left"></span>
  <span class="right"></span>
</div>


CSS

Код
.kecnalogun-conuesta {
    width: 9em;
    height: 3em;
    font-size: 30px;
    font-family: sans-serif;
    text-align: center;
    line-height: 3em;
    letter-spacing: 0.2em;
    position: relative;
    filter: blur(2px);
    transition: 0.5s;
}

.kecnalogun-conuesta:hover {
    filter: blur(0.2px);
}

.kecnalogun-conuesta::after {
    content: '';
    position: absolute;
    width: 3em;
    height: 3em;
    border: 1px solid red;
    border-radius: 50%;
    left: 3em;
    filter: opacity(0);
}

.kecnalogun-conuesta span:not(:first-child) {
    position: absolute;
    background-color: red;
    filter: opacity(0);
}

.kecnalogun-conuesta span.top,
.kecnalogun-conuesta span.bottom {
    width: 1px;
    height: 3em;
    left: 50%;
}

.kecnalogun-conuesta span.top {
    top: -3em;
}

.kecnalogun-conuesta span.bottom {
    bottom: -3em;
}

.kecnalogun-conuesta span.left,
.kecnalogun-conuesta span.right {
    width: 3em;
    height: 1px;
    top: 50%;
}

.kecnalogun-conuesta span.left {
    left: 0;
}

.kecnalogun-conuesta span.right {
    right: 0;
}

.kecnalogun-conuesta:hover::after,
.kecnalogun-conuesta:hover span:not(:first-child) {
    animation: aim 1s linear infinite alternate;
}

@keyframes aim {
    from {
  filter: opacity(0.2);
    }

    to {
  filter: opacity(0.8);
    }
}


Демонстрация
Прикрепления: 6634761.png(11.0 Kb) · 7147883.png(9.2 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов HTML » Эффект прицела при нажатие кнопки на CSS (Красочный эффект анимации при использование кнопки)
  • Страница 1 из 1
  • 1
Поиск: