Фото в блобе
дриббл-эстетика Прожектор-фонарик →

Появление изображений

Фото в блобе

Фотография живёт внутри органично перетекающей формы.

Просто смотрите.

Код
<div class="blob-photo" style="background-image:url(photo.jpg)"></div>

<style>
.blob-photo { width: 460px; aspect-ratio: 1;
  background-size: cover; background-position: center;
  animation: blob 11s ease-in-out infinite; }
@keyframes blob {
  0%,100% { border-radius: 58% 42% 33% 67% / 63% 30% 70% 37%; }
  25%     { border-radius: 35% 65% 60% 40% / 40% 60% 35% 65%; }
  50%     { border-radius: 65% 35% 45% 55% / 55% 45% 60% 40%; }
  75%     { border-radius: 40% 60% 70% 30% / 65% 40% 55% 45%; } }
</style>
Промпт для ИИ
Посади фото в живой блоб: квадратному контейнеру с background cover — анимация восьмизначного border-radius по 4 кадрам за 11s ease-in-out infinite; форма органично перетекает, фото остаётся неподвижным внутри. Мягкая тень для объёма. Отлично для «о нас», аватаров, хиро-иллюстраций.