MMGP logo
Присоединяйтесь к нашему инвестиционному форуму, на котором уже 650,402 пользователей. Чтобы получить доступ ко многим закрытым разделам и начать общение - зарегистрируйтесь прямо сейчас.
Вернуться Форум о заработке и инвестициях > Форум вебмастеров > Сайтостроение: общий форум > HTML & Веб-Дизайн
Перезагрузить страницу

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

?
Регистрация
Обсуждение веб-дизайна. Здесь можно получить помощь по вопросам HTML/CSS и т.д.
 Первый пост Опции темы
Старый 04.01.2016, 13:25
#1
Любитель
 
Регистрация: 29.12.2015
Сообщений: 231
Благодарностей: 89
Анимация текста через 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-animation:*raznoe*10s*infinite*alternate;
****
}*
Живой пример тут: Смена цвета и шрифта css без скриптов.
В общем, делать можно многое, под каждое свойство могу отдельную тему заводить Если кому полезно было - пишите, спрашивайте
__________________
Реклама: FoxMixer — надежный, проверенный временем биткоин миксер
monahyip вне форума
Сказали спасибо 3 раз(а):
An27 (04.01.2016), big-taras92 (04.01.2016), Flashback (04.01.2016)
Старый 04.01.2016, 13:26
#2
Специалист
 
Имя: Андрей
Пол: Мужской
Инвестирую в: разработка сайтов
Регистрация: 02.07.2010
Сообщений: 1,665
Благодарностей: 524
Re: Анимация текста через css
Цитата:
Сообщение от monahyip Посмотреть сообщение
размер шрифта и цвет.
Плюсую, годная тема! Искал именно по шрифтам, на лендинг нужно было. Все работает.
__________________
Реклама: FoxMixer — надежный, проверенный временем биткоин миксер
An27 вне форума
Сказали спасибо 2 раз(а):
monahyip (04.01.2016), Алена Соколова (04.01.2016)
Старый 04.01.2016, 15:16
#3
Любитель
 
Регистрация: 29.12.2015
Сообщений: 231
Благодарностей: 89
Автор темы Re: Анимация текста через css
Цитата:
Сообщение от An27 Посмотреть сообщение
на лендинг нужно было
Как то у меня на лендинг кнопку анимированную заказывали. Было два эффекта:
1) смена фона, ставился шаг в 15-20%, всего где-то 5-8 цветов, на время 3-5 секунд.
2) и бордюр - граница. С границей и без, интервал 2 секунды, всего два свойства - border:0, border:2px solid black;
Код в принципе несложный, но если нужно будет - спрашивайте.
__________________
Реклама: FoxMixer — надежный, проверенный временем биткоин миксер
monahyip вне форума
Сказали спасибо 2 раз(а):
An27 (04.01.2016), big-taras92 (04.01.2016)
Старый 04.01.2016, 16:03
#4
Специалист
 
Имя: Андрей
Пол: Мужской
Инвестирую в: разработка сайтов
Регистрация: 02.07.2010
Сообщений: 1,665
Благодарностей: 524
Re: Анимация текста через css
Цитата:
Сообщение от monahyip Посмотреть сообщение
если нужно будет - спрашивайте.
Я в принципе разобрался, сам потестил. Пока ничего такого не горит.
Кстати, а для разных блоков один и тот же эффект можно применять? Но с разницей в 1-2 секунды?
__________________
Реклама: FoxMixer — надежный, проверенный временем биткоин миксер
An27 вне форума
Сказали спасибо:
Алена Соколова (04.01.2016)
Старый 04.01.2016, 18:05
#5
Любитель
 
Регистрация: 29.12.2015
Сообщений: 231
Благодарностей: 89
Автор темы Re: Анимация текста через css
Цитата:
Сообщение от An27 Посмотреть сообщение
Но с разницей в 1-2 секунды?
Думаю, стоит прописать по-другому. Или проценты поменять в новом свойство, или время изменить.
Но одно и то же "сдвинуть" не получиться. Применить можно, но с интервалами...разве что через скрипты.
__________________
Реклама: FoxMixer — надежный, проверенный временем биткоин миксер
monahyip вне форума
Сказали спасибо 2 раз(а):
An27 (04.01.2016), big-taras92 (04.01.2016)
Войдите, чтобы оставить комментарий.
Быстрый переход