1. Гость, на данный момент выплаты с форума превысили 7000 долларов! Присоединяйся к нам и начинай зарабатывать!
  2. Гость, спеши получить на новый год подарок от форума!!! Подробности тут
    Скрыть объявление
  3. Гость, примите участие в прогнозе курса Bitcoin и выиграйте коллекционную монету!
    Скрыть объявление
  4. Гость, участвуй в конкурсе прогнозов по валютной паре EUR|AUD ! Призовой фонд - 350 долларов! Участвовать
    Скрыть объявление
  5. Гость, любите смотреть фильмы? Зарабатывайте на этом в Конкурсе Киноманов!
    Скрыть объявление
  6. Гость, пользуете ОС Android на планшете или смартфоне? Возможно Вам пригодится приложение нашего форума
    Скрыть объявление
  7. Гость, рады сообщить что теперь на форуме можно заработать ещё больше продавая свою подпись. Подробнее в этой теме.
    Скрыть объявление

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

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

  1. monahyip

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

    Регистрация:
    дек 7, 2015
    Сообщения:
    562
    Симпатии:
    47
    Баллы:
    3
    Пол:
    Мужской
    Род занятий:
    делаю сайты, арбитражю
    Адрес:
    Италия
    Сайт:
    Давно искал как сделать анимация через 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
    Может кому нужно какое-то другое свойство - спрашиваем ;)