текст и мигающие изображение с помощью CSS или javascript

С помощью графических программ, как Photoshop,  Gimp и других вы можете создавать анимированные картинки в формате GIF. В этой статье хочу показать, как создавать из текста и изображений мигающие элементы , используя CSS3 и Javascript.

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

Для ясности разделю пост на 4 секции:

мигающий текст с помощью CSS
мигающие изображения с помощью CSS
мигающий текст с помощью Javascript 
мигающее изображение с помощью Javascript 

Для индивидуальных потребностей можно добавить ещё и ссылки.

1. Пример мигающего изображения со ссылкой ( в конкретном случае моя страница на Фейсбуке) на CSS

присоединяйтесь к странице Facebook шпаргалки блогерши

<div class="blink_text" >присоединяйтесь к странице Facebook <span><a href="https://www.facebook.com/ViktoriyBarad/" target="_blank">шпаргалки блогерши</a></span></div>
<style type="text/css">
.blink_text {
animation:1s blinker linear infinite;
color: #00f;
font-size:18px;
font-weight:bold;
}
.blink_text a {color:#f00;}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
</style>

Соответственно меняйте текст и адрес страницы https://www.facebook.com/ViktoriyBarad/.

Это стили текста

color: #00f;
font-size:18px;
font-weight:bold;

Время анимации задано в 1 секунду (настраивается по усмотрению)

2. Пример мигающей картинки на CSS

Я в Twitter

Код

<div class="blink_text" ><a href="https://twitter.com/VikserV" target="_blank"><img src="http://s019.radikal.ru/i618/1406/76/98d12801cd3d.png" /></a></div>
<style type="text/css">
.blink_text {
animation:1s blinker linear infinite;
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}

</style>

Настройки аналогичные - ваш адрес и картинка в формате png.

Теперь давайте посмотрим, как реализовать те же самые эффекты с помощью javascript.

1. Мигающий текст на javascript

Оформите подписку на шпаргалки блогерши

<div id="blink" style="text-align: center;"> <a href="http://feeds.feedburner.com/shpargalochkiru" target="_blank"><span style="color: #00f; font-size: 18px; font-weight:bold;">Оформите подписку на</span> <span style="color: #f00; font-size: 22px; font-weight:bold;"> шпаргалки блогерши</span></a> </div>  <script language="JavaScript">  function blink_one() {  document.getElementById('blink').style.visibility='visible';  setTimeout('blink_two()',700);  }  function blink_two() {  document.getElementById('blink').style.visibility='hidden';  setTimeout('blink_one()',700);  }  blink_one();  </script>

Меняйте на адрес вашего фида и напишите свой текст.

<span style="color: #00f; font-size: 18px; font-weight:bold;  и  <span style="color: #f00; font-size: 22px; font-weight:bold;" стили шрифта

2. Мигающая картинка на javascript

Моя группа "Блоггер для каждого" ВК

<div id="blink2" style="text-align: center;">
<a href="https://vk.com/public150615645" target="_blank"><img src="https://sun9-8.userapi.com/c840238/v840238441/16f9d/EGtuqtogfw8.jpg" /></a></div> <script language="javascript">
function lampeggiamento(){
if(document.getElementById('blink2').style.visibility=="hidden")
{document.getElementById('blink2').style.visibility= "visible"}
else
{document.getElementById('blink2').style.visibility= "hidden"}
}
setInterval('lampeggiamento()',1000);
</script>

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

Во всех кодах присутствует тег target="_blank" для открытия ссылки в новом окне.
Каждый из кодов устанавливается на странице в режиме HTML. Так же можно вставить и в гаджет в любом месте макета блога.

Сегодня всё, удачи всем и до встречи.

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :