Анимация текста через css

monahyip · 04.01.2016

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

HTML:

@-webkit-keyframes fonsite {
      0% {background-color: #45CEEF;}
     30% {background-color: #FFF5A5;}
     60% {background-color: #FFD4DA;}
     100% {background-color: #D8CAB4;}
}

body {
     background-color: #45CEEF;    
     -webkit-animation: fonsite 10s infinite alternate;

}

теперь пройдемся по свойствам.
1 - @-webkit-keyframes - то что задает меняющие характеристики элемента.
2 - проценты - это шаг для смены функций (тестируйте чтобы понять детальнее).
3 - background-color: меняющееся свойство. Может быть что угодно - от размера шрифта до тени текста, и от границ блока до заокругленных уголков. Любое свойство css.
4 - -webkit-animation: fonsite 10s infinite alternate; То, что запускает механизм. 10сек - это интервал, за который все функции срабатывают. Если уменьшить - то будет все быстрее, если увеличить (до 40-50 сек) - то фон будет меняться плавнее.

Посмотреть онлайн можете здесь: Анимация фона на jsfiddle (реальный пример)

Теперь сделаем другую анимацию. Например, размер шрифта и цвет.
Посмотрите уроки по данным функциям, а в целом не сложно.

PHP:

@-webkit-keyframes raznoe {
      0% {color: #45CEEF;
      font-size:1em;}
     25% {color: #FFF5A5;
     font-size:1.2em;}
     50% {color: #FFD4DA;
     font-size:1.5em;}
     75% {color: #99D2E4;
     font-size:1.7em;}
     100% {color: #D8CAB4;}
}

.tagil {
     color: #45CEEF;    
     -webkit-animation: raznoe 10s infinite alternate;
    
}

Живой пример тут: Смена цвета и шрифта css без скриптов.
В общем, делать можно многое

, под каждое свойство могу отдельную тему заводить :wink2:

Если кому полезно было - пишите, спрашивайте :thumbsup:

An27 · 04.01.2016

monahyip написал(а):
размер шрифта и цвет.

Плюсую, годная тема! Искал именно по шрифтам, на лендинг нужно было. Все работает.

monahyip · 04.01.2016

An27 написал(а):
на лендинг нужно было

Как то у меня на лендинг кнопку анимированную заказывали. Было два эффекта:
1) смена фона, ставился шаг в 15-20%, всего где-то 5-8 цветов, на время 3-5 секунд.
2) и бордюр - граница. С границей и без, интервал 2 секунды, всего два свойства - border:0, border:2px solid black;
Код в принципе несложный, но если нужно будет - спрашивайте.

An27 · 04.01.2016

monahyip написал(а):
если нужно будет - спрашивайте.

Я в принципе разобрался, сам потестил. Пока ничего такого не горит.
Кстати, а для разных блоков один и тот же эффект можно применять? Но с разницей в 1-2 секунды?

monahyip · 04.01.2016

An27 написал(а):
Но с разницей в 1-2 секунды?

Думаю, стоит прописать по-другому. Или проценты поменять в новом свойство, или время изменить.
Но одно и то же "сдвинуть" не получиться. Применить можно, но с интервалами...разве что через скрипты.

Анимация текста через css

monahyip

Любитель

An27

МАСТЕР

monahyip

Любитель

An27

МАСТЕР

monahyip

Любитель

Похожие темы