Как создать плавающий переход изображения с помощью css и реагировать

avatar
Usama Liaqat
8 августа 2021 в 23:17
82
1
0

Я хочу создать плавающий переход изображения с помощью CSS и реагировать так же, как в изображениях заголовка темы Divi введите описание изображения здесь

https://divisupreme.com/features/

Источник

Ответы (1)

avatar
Ala Hamadi
8 августа 2021 в 23:42
0

Попробуйте это:

.floating {
  -webkit-animation: movebounce 5s linear infinite;
  animation: movebounce 5s linear infinite;
}

@-webkit-keyframes movebounce {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes movebounce {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

<div className='floating'><img src='YOUR_IMG' alt='' /></div>
Usama Liaqat
9 августа 2021 в 11:13
0

Какие значения вы добавили в movebounce?

Ala Hamadi
9 августа 2021 в 11:17
0

@UsamaLiaqat вот так.