Пример:
Анимация графического фона на CSS
Если поставить в фон не фотографию, а абстрактную картинку, например с линиями, то эффект будет даже более интересен.
HTML:
|
1 2 3 |
<div class="bg-animation"> Анимация графического фона на CSS </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.bg-animation { animation: bg-animation 25s ease-in-out infinite; padding: 160px 20px; text-align: center; background-image: url(sky.jpg); /* Фоновая картинка */ background-repeat: no-repeat; border: 8px solid #BFE2FF; margin: 20px 0; color: #337AB7; font-size: 34px; font-family: 'Roboto', sans-serif; } @media (max-width: 620px) { .bg-animation { padding: 100px 20px; font-size: 26px; } } @keyframes bg-animation { 0% { background-size: 120%; background-position: 50% 50% } 20% { background-size: 150%; background-position: 0 50%; } 40% { background-size: 110%; background-position: 20% 80%; } 60% { background-size: 160%; background-position: 60% 10%; } 80% { background-size: 120%; background-position: 40% 70%; } 100% { background-size: 120%; background-position: 50% 50% } } |
не надо линии, облака шикарны
Приветствую перекопал кучу сайтов, но нифига не нашел, вдруг тут кто подскажет - задача сделать "прилипший" футер на сайте (с этим справился), а вот вторая задача - как фон футера сделать анимированным (через css) никак не выходит ... Вдруг есть мыслишка или решение, буду рад помощи ✌️ а сайте у тебя - просто бомба