ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создать мигающий текст с помощью CSS

Создать мигающий текст с помощью CSS

Простой способ сделать мигающий текст, где задействуем HTML и CSS3. Будет представлено 2 варианта, один на светлом фоне второй на темном. На обеих версиях вы самостоятельно можете выстраивать текст, это подключить шрифт и многое другое, что качается оформление. Но и безусловно саму с пышку, что будет происходить на второй версий, так как первая идет в стандартном виде, где можно задать скорость, и как раз она идет под светлый формат.

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

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

HTML

Код

<span class="konkingedun">Сайт Zornet.Ru</span>

CSS

Код

.konkingedun{
  animation:blinkingText 0.9s infinite;
  font-weight: bold;
  font-size: 23px;
}
@keyframes blinkingText{
  0%{ color: #121213; }
  49%{ color: transparent; }
  50%{ color: transparent; }
  99%{ color:transparent; }
  100%{ color: #171717; }
}

Знаки ставим под свою гамму, что идет в CSS, прикрепленному материалу.
Демонстрация

Также есть второй вариант, который отлично покажет свой эффект на темном фоне.

Вариант №2

HTML

Код

<p id="sentingekolas">Второй вариант</p>

CSS

Код

#sentingekolas{
  color: #f1eaea;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  animation:blur .80s ease-out infinite;
  text-shadow:text-shadow: 0 0 7px #abc, 0 0 8px #abc;
}

@keyframes blur{
  from{
  text-shadow:0px 0px 8px #f1eaea,
  0px 0px 8px #f1eaea,
  0px 0px 20px #f1eaea,
  0px 0px 20px #f1eaea,
  0px 0px 20px #f1eaea,
  0px 0px 25px #f1eaea,
  0px 0px 25px #f1eaea,
  0px 0px 25px #f1eaea,
  0px 0px 50px #f1eaea,
  0px 0px 50px #f1eaea,
  0px 0px 50px #7b91ad,
  0px 0px 150px #7b91ad,
  0px 10px 100px #7b91ad,
  0px 10px 100px #7b91ad,
  0px 10px 100px #7b91ad,
  0px 10px 100px #7b91ad,
  0px -10px 100px #7b91ad,
  0px -10px 100px #7b91ad;}
}

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

Демонстрация

29 Ноября 2018 Просмотров: 1074 Комментариев: (1)

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

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

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 29 Ноября 2018 20:52¹ 0 Также можете посмотреть еще один материал на мигающее знаки, где по сути идентичный, только по гамме цвета измененный на тексте, который веб мастер ставит.