1. Гость, теперь Вы можете заходить на форум с гаджетов работающих на ОС Android, версии 4.4 и выше, через наше приложение. Приложение доступно по .
    Скрыть объявление
  2. Гость, на данный момент выплаты с форума превысили 10000 долларов! Присоединяйся к нам и начинай зарабатывать!
  3. Гость, любите смотреть фильмы? Зарабатывайте на этом в Конкурсе Киноманов!
    Скрыть объявление
  4. Гость, рады сообщить что теперь на форуме можно заработать ещё больше продавая свою подпись. Подробнее в этой теме.
    Скрыть объявление

Анимация фона на сайте через css

Тема в разделе "Движки, шаблоны, стили, модули, хаки", создана пользователем monahyip, янв 4, 2016.

  1. monahyip

    monahyip Старожила Стандартная ставка оплаты

    Регистрация:
    дек 7, 2015
    Сообщения:
    636
    Симпатии:
    63
    Баллы:
    6
    Пол:
    Мужской
    Род занятий:
    делаю сайты, арбитражю
    Адрес:
    Италия
    Сайт:
    Давно искал как сделать анимация через css, и теперь делюсь с вами.
    Все очень просто, нужно всего лишь прописать пару стилей.
    Код:
    @-webkit-keyframes raznoe {
          0% {background-color: #45CEEF;}
         25% {background-color: #FFF5A5;}
         50% {background-color: #FFD4DA;}
         75% {background-color: #99D2E4;}
         100% {background-color: #D8CAB4;}
    }
    
    body {
         background-color: #45CEEF;    
         -webkit-animation: raznoe 10s infinite alternate;
    
    }
    
    
    Где:
    1) "raznoe" - просто название для функции.
    2) background-color - меняющая функция, в нашем случае фон, можно ставить что угодно: граница, размер шрифта, цвет и прочее.
    3) 5 шагов процентов - можно уменьшить или увеличить. Количество меняющихся функций и их шаг.
    4) 10s - время, за которое все функции работают. Можно делать меньше - будет мигать чаще, если увеличить - будет плавнее переходить.

    В примере сделал для фона. Теперь давайте пропишем для какого-нибудь блока. Или лучше сделаем для участка текста меняющийся фон.
    Полный код будет выглядеть вот так:
    Код:
    @-webkit-keyframes raznoe {
          0% {color: #45CEEF;}
         25% {color: #FFF5A5;}
         50% {color: #FFD4DA;}
         75% {color: #99D2E4;}
         100% {color: #D8CAB4;}
    }
    
    .tagil {
      font-weight:bold;
         color: #45CEEF;    
         -webkit-animation: raznoe 10s infinite alternate;
    
    }
    
    Живой пример можете посмотреть здесь: Анимация на jsfiddle
    Может кому нужно какое-то другое свойство - спрашиваем ;)