Движущийся эффект для картинки
Код
<div class="bg-animation">
Ваш текст на картинке
</div>
<style>
.bg-animation {
animation: bg-animation 25s ease-in-out infinite;
padding: 160px 20px;
text-align: center;
background-image: url(адрес вашей картинки);
border: 8px solid #47271b;
margin: 20px 0;
color: #c5894d;
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%
}
}
</style>
Красным цветом в коде выделила оттенок рамки.Синим — цвет текста.
Зелёным — ваш текст.
Оранжевым — адрес вашей картинки.
Розовым — ширина рамки.
Голубым — размер шрифта.
Салатовым — шрифт.
Комментарии со спамом удаляются.