Aprenda nesse tutorial como criar Bordas animadas em cards com o Elementor Pro. Fazer efeitos de animações em sites criados com WordPress e Elementor WebSite Builder deixa o site mais dinâmico e interativo, podendo dar destaque e chamar mais a atenção de uma parte específica do site, como uma seção com cards. Neste tutorial Elementor Pró eu ensinei a fazer cards com bordas animadas, duas listras/linhas de cores diferentes ficam circulando o card continuamente.
Muitos Web Designers que criam sites com o WordPress, WooCommerce e Elementor Pró, buscam usar animações em seus sites criados para tornar o layout mais bonito, interativo e dinâmico. O Elementor por si mesmo traz vários efeitos de animações muito legais. Mas há também possibilidades de fazer animações através de códigos CSS. Neste vídeo eu mostro como criar cards animados com o Elementor Pró e com CSS. Os cards ficam com borda e na borda há duas faixinhas coloridas que ficam circulando o card continuamente. Isso dá um destaque muito interessante para o card.
O CSS utilizado para fazer a animação nas bordas dos cards foi desenvolvido pelo Jim Fahad Digital.
:root{
--first-color: #ef32d9;
--second-color: #89fffd;
--size: 100px;
--speed: 4s;
}
selector{
overflow: hidden !important;
display: flex;
justify-content: center;
align-items: center;
}
selector:before{
content: '';
position: absolute;
width: var(--size);
height: 140%;
background: linear-gradient(var(--first-color), var(--second-color));
animation: animate var(--speed) linear infinite;
}
@keyframes animate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
