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

Гость, на форуме стартует продажа паев инвестиционного пула форума. Успей купить паи!

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

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

  1. monahyip

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

    Регистрация:
    дек 7, 2015
    Сообщения:
    692
    Симпатии:
    75
    Баллы:
    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
    Может кому нужно какое-то другое свойство - спрашиваем ;)
     
  2. FIRE_BEAR

    FIRE_BEAR Пользователь Стандартная ставка оплаты

    Регистрация:
    май 10, 2020
    Сообщения:
    116
    Симпатии:
    6
    Баллы:
    1
    Привет, есть проблема. Как лучше написать анимацию? Надо, чтобы серпантин сыпался с неба. Пару штук я могу сделать, но когда надо делать сотни таких объектов, возникает трудность.
     
  3. monahyip

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

    Регистрация:
    дек 7, 2015
    Сообщения:
    692
    Симпатии:
    75
    Баллы:
    6
    Как угодно, можно на js, можно стилями.