O que é uma animação de efeito blob em css?
Uma animação de efeito “blob” em CSS é uma técnica visual que cria formas fluidas e orgânicas, geralmente em movimento, para simular a aparência de blobs ou manchas de tinta. Usando propriedades CSS como keyframes, border-radius, e transform, você pode criar essas formas dinâmicas que se deformam e mudam de tamanho, adicionando um efeito visual moderno e atraente aos seus designs.
Copie os códigos abaixo e faça o teste em seu projeto!
<!-- index.html -->
<div class="blob"></div>
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #282C34;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center
}
.blob {
overflow: hidden;
width: 16rem;
height: 16rem;
border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%;
background: #282C34 url("https://images.pexels.com/photos/775201/pexels-photo-775201.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-size: cover;
background-position: center;
animation: morph 3.75s linear infinite;
}
@keyframes morph {
0%, 100% {
border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%;
}
33% {
border-radius: 72% 28% 48% 48% / 28% 28% 72% 72%;
}
66% {
border-radius: 100% 56% 56% 100% / 100% 100% 56% 56%;
}
}