Os melhores Códigos de CSS para você usar no ELEMENTOR

Apesar do Elementor ser muito completo, é muito comum termos que recorrer ao CSS para implementar algum efeito e deixar nosso site mais atrativo para nosso público.

Eu separei alguns Scripts de movimento que certamente irão embelezar ainda mais a sua página.

Use o CSS personalizado do Elementor: O Elementor permite que você crie seu próprio CSS personalizado dentro do editor. Use isso para estilos específicos que não estão incluídos nos recursos padrão do Elementor.

A propriedade animation é utilizada para aplicar a animação ao elemento, e a função cubic-bezier() é utilizada para definir a curva de aceleração da animação. A classe .infinite pode ser adicionada à animação para fazê-la executar infinitamente.

Vamos lá!

01. Animação de rotação:

#elemento { animation: spin 1s ease-in-out infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

Este código animará o elemento com uma rotação infinita.

02. Animação de mudança de cor:

#elemento { animation: color-change 1s ease-in-out infinite; } @keyframes color-change { 0% { background-color: red; } 50% { background-color: blue; } 100% { background-color: green; } }

Este código animará o elemento com uma mudança de cor infinita.

03. Animação de transição de escala:

#elemento { animation: scale 1s ease-in-out infinite; } @keyframes scale { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }

Este código animará o elemento com uma transição de escala infinita.

04. Animação de desvanecimento:

#elemento { animation: fade 1s ease-in-out infinite; } @keyframes fade { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

Este código animará o elemento com um efeito de desvanecimento infinito.

05. Animação de transição de posição:

#elemento { animation: move 1s ease-in-out infinite; } @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(50px); } 100% { transform: translateX(0); } }

Este código animará o elemento com uma transição de posição infinita.

06. Animação de Pulsar:

.pulse { animation: pulse 2s cubic-bezier(0.5, 0, 0.5, 1) infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }

Neste exemplo, a classe .pulse é aplicada ao elemento HTML que se deseja fazer pulsar. A animação é criada usando a regra @keyframes, que define a sequência de transformações que serão aplicadas ao elemento ao longo do tempo. O efeito de pulsação é criado utilizando a propriedade transform e diferentes valores de scale.

07. Animação de Piscar:

.shake { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) infinite; } @keyframes shake { 0% { transform: translate(0); } 10%, 90% { transform: translate(-5px, 0); } 20%, 80% { transform: translate(5px, 0); } 30%, 50%, 70% { transform: translate(-5px, 0); } 40%, 60% { transform: translate(5px, 0); } 100% { transform: translate(0); } }

Neste exemplo, a classe .shake é aplicada ao elemento HTML que se deseja fazer tremer. A animação é criada usando a regra @keyframes, que define a sequência de transformações que serão aplicadas ao elemento ao longo do tempo. O efeito de tremer é criado utilizando a propriedade transform e diferentes valores de translate.

08. Mostrar elemento depois de um tempo (Fade)

#meuElemento { opacity: 0; animation-name: fadeIn; animation-duration: 1s; animation-delay: 5s; animation-fill-mode: forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

Neste exemplo, estamos aplicando a animação fadeIn ao elemento com o ID meuElemento. A animação tem uma duração de 1 segundo e um atraso de 5 segundos antes de começar.

A propriedade animation-fill-mode é definida como forwards para manter o elemento com uma opacidade de 1 após a animação ter terminado. A animação fadeIn é definida com @keyframes, que define os valores de opacidade do elemento de 0 a 1 durante a duração da animação.

Aplique esses efeitos com bastante atenção, insira o código no espaço determinado no Elementor e você não terá problemas.

Por Paulo Anderson, Idealizador dor Curso de WordPress para Empreendedores Digitais (WED) - Saiba mais