<!--Эффект перетекания-->
<!--https://mt-webdesign.ru/overflow-->
<img class="image_1" src="https://static.tildacdn.com/tild3332-6631-4364-a533-303364363763/Frame_36.jpg" alt="lel" />
<script>
$("body").on("mouseover mouseout", '.link-bubble-1', function(){
$('.link-bubble-1').toggleClass("link-color-brown-active");
$('.link-bubble-2').toggleClass("link-color-brown");
$('.link-bubble-3').toggleClass("link-color-brown");
$('.link-color').toggleClass("color-brown");
});
</script>
<style>
.link-color .tn-atom {
transition-duration: 0.7s;
}
.color-brown .tn-atom {
color: #80786A !important;
transition-duration: 0.7s;
}
.link-bubble-1 .tn-atom {
transition-duration: 0.7s;
}
.link-color-brown .tn-atom {
transition-duration: 0.7s;
color: transparent !important;
-webkit-text-stroke: 1px #80786A;
}
.link-color-brown-active .tn-atom {
transition-duration: 0.7s;
color: #ffffff !important;
-webkit-text-stroke: 1px #ffffff;
}
</style>
<style>
:root {
--clip-path-1: path(
"M715 340C715 586.899 594.645 710 347.5 710C100.355 710 0 611.899 0 365C0 118.101 137.355 0 384.5 0C631.645 0 715 93.1005 715 340Z"
);
--clip-path-2: path(
"M699.239 152.761C816.543 342.98 732.566 578.576 482.086 682.216C231.607 785.857 138.44 678.886 66.6785 520.238C-2.87282 366.477 -80.0001 147 189.5 56C459 -35.0003 590.807 -23.0723 699.239 152.761Z"
);
--clip-path-3: path(
"M558.5 199.999C639 413.499 591.5 561.999 437.669 670.216C187.189 773.856 101.177 656.64 78.4999 483.999C63 366 -124.418 134.999 145.082 43.9993C414.582 -47.001 485.618 6.70378 558.5 199.999Z"
);
}
.image_1 {
height: 100%;
width: 100%;
object-fit: cover;
clip-path: var(--clip-path-1);
animation: blobby_1 5s ease-in-out infinite;
}
@keyframes blobby_1 {
0% {
clip-path: var(--clip-path-1);
}
25% {
clip-path: var(--clip-path-2);
}
50% {
clip-path: var(--clip-path-3);
}
75% {
clip-path: var(--clip-path-2);
}
100% {
clip-path: var(--clip-path-1);
}
}
</style>