Анимация текста через css - HTML & Веб-Дизайн | MMGP
Присоединяйтесь к нашему инвестиционному форуму, на котором уже 457,430 пользователей. Чтобы получить доступ ко многим закрытым разделам и начать общение -  .
Вход через:  
Обсуждение веб-дизайна. Здесь можно получить помощь по вопросам HTML/CSS и т.д.
При поддержке
Сеть доставки контента, выбранная космическими агентствами
Важная информация
Узнай, кто стал "Бизнес-леди MMGP-2018"
Внимание! Акция для копирайтеров: ЭПС-эксперт (2-10 поинтов за 1000 символов)
Есть опыт работы с криптовалютами? Заведи Крипто-Блог и заработай на нём!
Торгуешь криптовалютой? Оставь свой отзыв о бирже!
Разбираешься в криптовалюте? Прими участие в акции Крипторайтер 2.0 (2-10 поинтов за 1000 символов)
Изменения в акции "Оплата за сообщения".
Как на одной публикации заработать $100
Ответить
 
Первый пост Опции темы
Сообщения прочитаны и/или просмотрены Сегодня, 06:25
Старый 04.01.2016, 12:25
#1
Любитель
 
Пол: Мужской
Адрес: Italy
Инвестирую в: Свой бизнес
Регистрация: 30.12.2015
Сообщений: 200
Благодарностей: 103
УГ: 0
КП: 0.264
Анимация текста через 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, 12:26
#2
Мастер
 
Имя: Андрей
Пол: Мужской
Инвестирую в: Свой бизнес
Регистрация: 03.07.2010
Сообщений: 1,723
Благодарностей: 591
УГ: 0
КП: 0.361
Re: Анимация текста через css

Цитата:
Сообщение от monahyip Посмотреть сообщение
размер шрифта и цвет.
Плюсую, годная тема! Искал именно по шрифтам, на лендинг нужно было. Все работает.
An27 вне форума  
Сказали спасибо 2 раз(а):
monahyip (04.01.2016), Алена Соколова (07.01.2016)
Старый 04.01.2016, 14:16
#3
Любитель
 
Пол: Мужской
Адрес: Italy
Инвестирую в: Свой бизнес
Регистрация: 30.12.2015
Сообщений: 200
Благодарностей: 103
УГ: 0
КП: 0.264
Автор темы 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, 15:03
#4
Мастер
 
Имя: Андрей
Пол: Мужской
Инвестирую в: Свой бизнес
Регистрация: 03.07.2010
Сообщений: 1,723
Благодарностей: 591
УГ: 0
КП: 0.361
Re: Анимация текста через css

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

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

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


Случайные темы
Аватар moskva
Сколько стоят опытные специалисты по блокчейну
От moskva в разделе «Новости криптовалют»
Аватар bosyak
Сбалансированный - bosyak - (Fx-Trend)
От bosyak в разделе «Архив: Инвестирование в ПАММ-счета»
Аватар Andrey1231
ПАММ-счет adcher:528867 (ForexTrend)
От Andrey1231 в разделе «Архив: Инвестирование в ПАММ-счета»
Аватар all-hyips
Hourpay - hourpay.biz
От all-hyips в разделе «Архив: Список проблемных/неактивных/закрытых программ»
Аватара нет
vitagold.in-www.vitagold.in
От dok в разделе «Архив: Список проблемных/неактивных/закрытых программ»
Аватар morg
Угадай прогноз на 16.10.2017 по паре USD/JPY ($100 от ForexMart)
От morg в разделе «Конкурсы от MMGP»
.     
Пользователей
457,430
Тем
535,234
Сообщений
13,486,552

mmgp.telegram