Анимация текста через 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 без скриптов.
В общем, делать можно многое
, под каждое свойство могу отдельную тему заводить
Если кому полезно было - пишите, спрашивайте
