Анимация текста через css - HTML & Веб-Дизайн | MMGP
Присоединяйтесь к нашему инвестиционному форуму, на котором уже 434,995 пользователей. Чтобы получить доступ ко многим закрытым разделам и начать общение -  .
Вход через:  
Обсуждение веб-дизайна. Здесь можно получить помощь по вопросам HTML/CSS и т.д.
При поддержке
Сеть доставки контента, выбранная космическими агентствами
Важная информация
Есть опыт работы с криптовалютами? Заведи Крипто-Блог и заработай на нём!
Торгуешь криптовалютой? Оставь свой отзыв о бирже!
Разбираешься в криптовалюте? Прими участие в акции Крипторайтер 2.0 (2-10 поинтов за 1000 символов)
Изменения в акции "Оплата за сообщения".
Как на одной публикации заработать $100
Ответить
 
Первый пост Опции темы
Сообщения прочитаны и/или просмотрены Сегодня, 07:16
Старый 04.01.2016, 13:25
#1
Любитель
 
Пол: Мужской
Адрес: Italy
Инвестирую в: Свой бизнес
Регистрация: 30.12.2015
Сообщений: 188
Благодарностей: 98
УГ: 0
КП: 0.249
Анимация текста через css

Вижу мало полезных тем по дизайну. выложу одну фишечку - как сделать анимацию на 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-animationraznoe 10s infinite alternate;
    

Живой пример тут: Смена цвета и шрифта css без скриптов.
В общем, делать можно многое, под каждое свойство могу отдельную тему заводить Если кому полезно было - пишите, спрашивайте
monahyip вне форума  
Сказали спасибо 3 раз(а):
An27 (04.01.2016), big-taras92 (12.01.2016), Flashback (12.01.2016)
Старый 04.01.2016, 13:26
#2
Мастер
 
Имя: Андрей
Пол: Мужской
Инвестирую в: Свой бизнес
Регистрация: 03.07.2010
Сообщений: 1,716
Благодарностей: 588
Записей в блоге: 1
УГ: 0
КП: 0.361
Re: Анимация текста через css

Цитата:
Сообщение от monahyip Посмотреть сообщение
размер шрифта и цвет.
Плюсую, годная тема! Искал именно по шрифтам, на лендинг нужно было. Все работает.
An27 вне форума  
Сказали спасибо 2 раз(а):
monahyip (04.01.2016), Алена Соколова (07.01.2016)
Старый 04.01.2016, 15:16
#3
Любитель
 
Пол: Мужской
Адрес: Italy
Инвестирую в: Свой бизнес
Регистрация: 30.12.2015
Сообщений: 188
Благодарностей: 98
УГ: 0
КП: 0.249
Автор темы Re: Анимация текста через css

Цитата:
Сообщение от An27 Посмотреть сообщение
на лендинг нужно было
Как то у меня на лендинг кнопку анимированную заказывали. Было два эффекта:
1) смена фона, ставился шаг в 15-20%, всего где-то 5-8 цветов, на время 3-5 секунд.
2) и бордюр - граница. С границей и без, интервал 2 секунды, всего два свойства - border:0, border:2px solid black;
Код в принципе несложный, но если нужно будет - спрашивайте.
monahyip вне форума  
Сказали спасибо 2 раз(а):
An27 (04.01.2016), big-taras92 (12.01.2016)
Старый 04.01.2016, 16:03
#4
Мастер
 
Имя: Андрей
Пол: Мужской
Инвестирую в: Свой бизнес
Регистрация: 03.07.2010
Сообщений: 1,716
Благодарностей: 588
Записей в блоге: 1
УГ: 0
КП: 0.361
Re: Анимация текста через css

Цитата:
Сообщение от monahyip Посмотреть сообщение
если нужно будет - спрашивайте.
Я в принципе разобрался, сам потестил. Пока ничего такого не горит.
Кстати, а для разных блоков один и тот же эффект можно применять? Но с разницей в 1-2 секунды?
An27 вне форума  
Сказали спасибо:
Старый 04.01.2016, 18:05
#5
Любитель
 
Пол: Мужской
Адрес: Italy
Инвестирую в: Свой бизнес
Регистрация: 30.12.2015
Сообщений: 188
Благодарностей: 98
УГ: 0
КП: 0.249
Автор темы Re: Анимация текста через css

Цитата:
Сообщение от An27 Посмотреть сообщение
Но с разницей в 1-2 секунды?
Думаю, стоит прописать по-другому. Или проценты поменять в новом свойство, или время изменить.
Но одно и то же "сдвинуть" не получиться. Применить можно, но с интервалами...разве что через скрипты.
monahyip вне форума  
Сказали спасибо 2 раз(а):
An27 (04.01.2016), big-taras92 (12.01.2016)
Ответить
Войдите, чтобы оставить комментарий.
Сообщения прочитаны и/или просмотрены Сегодня, 07:16
Опции темы

Быстрый переход
Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Общаемся анонимно через Jabber + шифрование переписки OTR + подмена IP через Tor Алена Соколова Софт 1 01.08.2016 22:01
В Google Translate появились автоперевод голоса и перевод текста через камеру kamol_mix Новости технологий и интернета 11 26.05.2015 14:56
Продам Макеты, баннеры, флэш анимация. jet95 Шаблоны 2 01.05.2014 10:30
Анимация любого типа...Flash/GIF bawa Дизайн 1 20.02.2010 12:24
GIF-анимация. Баннеры любых размеров. markinyan Дизайн 0 02.06.2008 10:50


Случайные темы
Аватар johnnyParazit
earn2me.com или earn2me.ru мои рассуждения
От johnnyParazit в разделе «Список интернет мошенников»
Аватара нет
Gainbank - gainbank.biz
От Angel-monitor в разделе «Архив: Список проблемных/неактивных/закрытых программ»
Аватар Rain1
НБУ разрешил банкам принимать документы клиентов в электронной форме
От Rain1 в разделе «Новости в банковской сфере и страховании»
Аватар WOH
Skyway Capital - skyway.capital
От WOH в разделе «Архив: Список проблемных/неактивных/закрытых программ»
Аватар onliner-76
Avirel Funds - avirelfunds.com
От onliner-76 в разделе «Архив: Список проблемных/неактивных/закрытых программ»
Аватара нет
Приглашаем на International Blockchain Forum (12 октября, г. Москва)
От Sapiens в разделе «Криптовалюты: общий форум»
.     
Пользователей
434,995
Тем
504,819
Сообщений
12,673,872

mmgp.telegram