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



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

Дорогие мои! С Наступающим Новым 2017 Годом !!!
<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>. Для обоих вариантов.

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

TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 12/10/2016 Ярлыки ►


Открыть комментарии →

2 коммент. :

  1. Доброго времени суток Оленька! Очень интересно и привлекательно смотрится! Жалко только что я никак не могу разобраться в кодах шаблона...после того как сломала один раз, еле восстановила, то больше уже не лезу..

    ОтветитьУдалить
    Ответы
    1. Валя здравствуй. Можно и без шаблона применить. Вставь добавить гаджет, сохрани в сайдбаре, или над/под сообщением.
      Еще как вариант, на странице сообщения, по вкладке HTML.

      Удалить


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *