» »

Мигающий текст в кнопке с помощью CSS

Мигающий текст в кнопке с помощью CSS

Красиво использованный эффект мешающего текста с помощью CSS, что находится в элементе виде кнопки, где безусловно привлекает больше внимание. Все создано на чистых стилях CSS, где самостоятельно задается скорость, что можно сделать быстрое мигание или замедлить его. Здесь изначально используется анимация под заданный объект, где все сделано для того, чтоб эффект был как можно ярче на нашей кнопке.

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

Здесь однозначно функция анимации потребует, чтобы были загаданные ключевые кадры, все делается для того, чтобы вызвать этот эффект. А вообще это очень простой способ веб разработчика, что заставить мигать текст или прикрепленный шрифтовой значок, используя только HTML и CSS3.

Рассмотрим как выглядит на светлом фоне:

Мигающий текст на html с помощью CSS стилей

Это уже на темном, с аналогичными по гамме тенями:

Как создать на css мигающий текст при помощи CSS

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

HTML

Код
<div class="poskubleb-meoptivons"><span>Скачать файл</span></div>

CSS

Код
.poskubleb-meoptivons {
  width: 235px;
  height: 49px;
  background-color: #c10bc1;
  padding: 20px;
  text-align: center;
  line-height: 50px;
  border-radius: 100px;
  border: 3px solid #efe3e3;
  box-shadow: 1px 2px 20px 0px rgba(31, 29, 29, 0.73), 0px 1px 19px 1px rgba(39, 37, 37, 0.83);
}
  span{
  font-size: 30px;
  font-family: cursive;
  color: white;
  animation: blink 0.5s linear infinite;
  }

@keyframes blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}

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

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

Демонстрация
2019-01-30 Загрузок: 1 Просмотров: 380 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Комментарий: 3
Kosten
Kosten 2019-01-30 14:551
0
iano1, вам бан, просто ваши причуды мне не понятны, и как заметил пользователям.
-SAM-
-SAM- 2019-02-01 03:082
0
Kosten
Kosten 2019-02-01 03:583
0
Тут человеку репа не сильно важна, тут спускаю на тормоза из за того, что человек возможно не понимает, что ему пишут в ответ.

Одно с уверенностью понял, это поставить ссылку, ведь размещая старый материал, это скрипты, то везде указывал свой источник.
avatar