Варианты оформления анимации текста на CSS для блоггер

---

Здравствуйте друзья и читатели. Очень мне нравится все переливающее, мигающее, в разумных пределах конечно. Сегодня создадим плавно переливающийся разными цветами, и светящийся на фоне текст. Два варианта оформления:

Пример 1 

Дорогие мои! С Наступающим Новым 2018 Годом !!!

<style>

     #wash {

         background-color:#;

         border:px solid #03b4cc;

         padding:10px;

 -webkit-animation: wash 1s linear infinite;

 animation: wash 1s linear infinite;

 font-weight: bold;

        font-size:18px;

           color: #ff9900;      

  text-shadow: 0 0 5px #f8f8ff, 0 0 7px #f8f8ff;

}

@-webkit-keyframes wash {

 0% { color: #ff9900; }

 50% { color: #0a9e08; }

 100% { color: #ff9900; }

}

@keyframes wash {

 0% { color: #ff9900; }

 50% { color: #0a9e08; }

 100% { color: #ff9900; }

}

</style>

<br />

<div id="wash">

<center>

<i>Здесь текст</i></center>

</div>

Настройки: все, что выделено жирным, можно изменить на cвой вкус и цвет. 1s. это скорость переливающего цвета текста. Выделено зеленым, <i></i>-наклонный текст, <center></center> по центру. При желании измените процент преобладающего цвета.

В стиль CSS я вставила цвет фона и границу рамки (выделено сиреневым). У меня нулевые значения, если будет желание оформить в рамку, вставьте код цвета фона, форму и размер границы рамки.

Пример 2 

Будьте здоровы и счастливы ближайшие 100 лет!

<style>

@-webkit-keyframes shine {

 50% { color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff; }

}

@keyframes shine {

 50% { color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff; }

}

#shine{

  color: rgb(245,245,245);

  text-shadow: 0 -1px rgba(0,0,0,.1);

  padding:15px 10px 0 15px;

  font-size:25px;

  background: #03b4cc;

  height: 45px;

  -webkit-animation: shine 1.2s linear infinite;

  animation: shine 1.2s linear infinite;

}</style>
<br />
<div id="shine">
<i>Здесь пишем текст</i></div>

Текст можно оформить на отдельной странице в блоге или установить гаджетом. Для страниц в редакторе блоггер вставьте по вкладке HTML стили CSS в конце статьи.

Или в шаблон изменить шаблон выше строки ]]></b:skin> вставьте CSS без <style></style>, просмотрите и сохраните шаблон. 

Далее нужный текст на странице или в гаджете заключить <div id="shine">здесь текст</div>. Для обоих вариантов.

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

На сегодня все, спасибо за визит. Все вопросы в комментариях. Всего доброго.

Читайте также:

• Ссылка просмотра мобильной версии блога;
• Как подобрать совместимость фонового цвета;
• Фишки для дизайна с использованием CSS для блоггер;
• Новогодний внешний фон для блогов блоггер Оформление на CSS;