Blink text with css

Мигающий текст на CSS для привлечения внимания

Мигающий текст на страницах сайта привлекает внимание, а значит может применяться для размещения надписей с акциям и скидками в интернет-магазинах. Раньше реализации были основаны на javascript, но с появлением CSS 3-го поколения, создание мигающего текста упростилось.

Переливание цвета достигается посредством анимации. Для этого необходимо создать фреймы с указанием состояния элемента. Переход между фреймами будет плавно осуществляться в автоматическом режиме.

  
Первый вариант
 

В примере мы создали плавный переход от красного цвета шрифта к розовому и обратно. Блок @-webkit-keyframes blink и @keyframes повторяет фреймы, это из-за того что разные браузеры поддерживают разные свойства css анимации.

Этот вариант смотрится отлично на тёмном фоне. Он выглядит сложнее и должен дать понять что комбинируя различные свойства можно добиться множества вариантов пульсации и переливания надписей.

  
Второй вариант
 

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

Источник

How to Create a Blinking Effect with CSS3 Animations

Often, the blinking effect is used to bring the users to the attention of some text on your website. If you need such an effect, try using CSS animations.

Solutions with CSS animations

CSS3 allows creating animation without any Javascript code. To have a blinking text effect, you also need the @keyframes rule. We use CSS animation by defining some keyframes for our blinking text animation and set the visibility to «hidden». In our example below, we also add the -webkit- extension to the animation property for more browser compatibility.

Example of creating a blinking text effect with CSS3 animations:

html> html> head> title>Title of the document title> style> .blink < animation: blink-animation 1s steps(5, start) infinite; -webkit-animation: blink-animation 1s steps(5, start) infinite; > @keyframes blink-animation < to < visibility: hidden; > > @-webkit-keyframes blink-animation < to < visibility: hidden; > > style> head> body> Here is a span class="blink">blinking span> text. body> html>

Result

Example of adding a blinking text effect:

html> html> head> title>Title of the document title> style> .blink < width: 220px; height: 50px; background-color: #342ab8; padding: 10px; text-align: center; line-height: 50px; > span < font-size: 26px; font-family: cursive; color: #fff; animation: blink 2s linear infinite; > @keyframes blink < 0% < opacity: 0; > 50% < opacity: .5; > 100% < opacity: 1; > > style> head> body> div class="blink"> span>blinking text span> div> body> html>

It is also possible to have a blinking background with CSS3 animations. Here also we create a set of keyframes and then specify the background-color at the starting and ending points.

Example of creating a blinking background:

html> html> head> title>Title of the document title> style> @keyframes blinking < 0% < background-color: #06c3d1; border: 3px solid #666; > 100% < background-color: #270da6; border: 3px solid #666; > > #blink < width: 200px; height: 200px; animation: blinking 1s infinite; > style> head> body> div id="blink"> div> body> html>

Источник

Blinking Text & Background In HTML CSS (Simple Examples)

Welcome to a tutorial on how to create blinking text and background with HTML CSS. Once upon a time in the dark ages of the Internet, creating animations involves the use of Javascript, timer functions, and fighting with digital dragons.

In modern CSS, we only need to define a set of keyframes and attach the animation to create a block of blinking text:

That is the gist of it, but let us walk through more examples of how to create blinking effects – Read on!

TLDR – QUICK SLIDES

TABLE OF CONTENTS

BLINKING BACKGROUND & TEXT

All right, let us now get into some examples of creating blinking animations in HTML and CSS.

EXAMPLE 1) BLINKING BACKGROUND

1. Start by defining a set of @keyframes NAME . Since we are creating a blinking background, we will alternate between two colors.
2. This should be self-explanatory, attach the keyframes to the container using animation: NAME TIME ITERATION
   • NAME The name of the set of keyframes.
   • TIME How fast the animation should be. Keep this short (fast enough), or it will turn into a “background transition”.
   • ITERATIONS The number of iterations/repetitions.

EXAMPLE 2) BLINKING TEXT

 /* (A) BLINKING KEYFRAMES */ @keyframes blinkingB < 0% < color: red; >100% < color: blue; >> /* (B) ATTACH BLINKING KEYFRAMES TO TEXT */ #demoB 
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Yep, CSS animation also works on text. The only difference here is that we are animating the text color instead of the background . The rest of the mechanics remain the same.

EXAMPLE 3) BLINKING NOTIFICATION

 /* (A) WARNING KEYFRAMES */ @keyframes blinkingC < 0% < color: white; background: red; >100% < color: lightcyan; background: blue; >> /* (B) ATTACH WARNING KEYFRAMES TO CONTAINER */ #demoC 
 

Put the blinking background and text together, just what good will it do? This “blinking billboard” sure attracts a lot of attention – Maybe a good fit for stuff like displaying critical system messages, or even time-limited offers.

EXAMPLE 4) BLINK ON CLICK

 /* (A) BLINKING KEYFRAMES */ @keyframes blinkingD < 0% < color: white; background: red; >100% < color: lightcyan; background: blue; >> /* (B) CONTAINER COSMETICS */ #demoD < padding: 10px; font-size: 1.3em; font-weight: 700; >/* (C) ATTACH BLINKING KEYFRAMES TO CSS CLASS */ .blinkD  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 

• (A) Create the keyframes as usual.
• (C) But set the animation on a CSS class instead.
• (D) Use Javascript to toggle the “blink” CSS class on your selected element.

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

SUPPORT

600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a «paid scripts and courses» business, so every little bit of support helps.

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

EXTRA BITS & LINKS

That’s all for the scripts, and here are a few small extras that you may find useful.

EXTRA) ADDING MORE KEYFRAMES

@keyframes blinking < 0% < background: red; >50% < background: green; >100% < background: blue; >>

We can “add more colors” by introducing more keyframes, but this is more like a “rainbow” than a “blink”.

EXTRA) BLINK ON MOUSE HOVER

That’s right, we can only attach the blink animation to mouse hover.

LINKS & REFERENCES

TUTORIAL VIDEO

INFOGRAPHIC CHEAT SHEET

THE END

Thank you for reading, and we have come to the end of this short tutorial. I hope that it has given you a few ideas on how to create a blinking effect in CSS, and if you have anything to add to this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment Cancel Reply

Search

Breakthrough Javascript

Take pictures with the webcam, voice commands, video calls, GPS, NFC. Yes, all possible with Javascript — Check out Breakthrough Javascript!

Socials

About Me

W.S. Toh is a senior web developer and SEO practitioner with over 20 years of experience. Graduated from the University of London. When not secretly being an evil tech ninja, he enjoys photography and working on DIY projects.

Code Boxx participates in the eBay Partner Network, an affiliate program designed for sites to earn commission fees by linking to ebay.com. We also participate in affiliate programs with Bluehost, ShareASale, Clickbank, and other sites. We are compensated for referring traffic.

Источник