Анимированный градиент для изображений на CSS3
|
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 |
.intro { background: url("https://imapo.ru/img/cool-wallpaper-3.jpg"), -webkit-linear-gradient(217deg, #e56420, #c22525, #3d9c31, #37bbde); width: 100%; height: 100vh; background-size: cover; background-blend-mode: hard-light; -webkit-animation: hue-rotate 3s linear infinite; animation: hue-rotate 3s linear infinite; } @-webkit-keyframes hue-rotate { from { -webkit-filter: hue-rotate(0); -moz-filter: hue-rotate(0); -ms-filter: hue-rotate(0); filter: hue-rotate(0); } to { -webkit-filter: hue-rotate(360deg); -moz-filter: hue-rotate(360deg); -ms-filter: hue-rotate(360deg); filter: hue-rotate(360deg); } } @keyframes hue-rotate { from { -webkit-filter: hue-rotate(0); -moz-filter: hue-rotate(0); -ms-filter: hue-rotate(0); filter: hue-rotate(0); } to { -webkit-filter: hue-rotate(360deg); -moz-filter: hue-rotate(360deg); -ms-filter: hue-rotate(360deg); filter: hue-rotate(360deg); } } |
|
1 |
<div class="intro"></div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
