Появление изображений
Фото в блобе
Фотография живёт внутри органично перетекающей формы.
Просто смотрите.
Код
<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; форма органично перетекает, фото остаётся неподвижным внутри. Мягкая тень для объёма. Отлично для «о нас», аватаров, хиро-иллюстраций.