Пример:
Анимация графического фона на 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 46 47 48 |
.bg-animation { animation: bg-animation 25s ease-in-out infinite; padding: 200px 10px; text-align: center; background-image: url(sky.jpg); /* Фоновая картинка */ background-repeat: no-repeat; margin: 20px 0; color: #fff; font-size: 30px; font-weight: bold; text-transform: uppercase; line-height: 1.1; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.5); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 12px 18px rgba(0, 0, 0, 0.08);; } @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) никак не выходит ... Вдруг есть мыслишка или решение, буду рад помощи ✌️ а сайте у тебя - просто бомба