PUBLICAÇÃO
Os melhores scripts 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 …
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
Quer aumentar suas oportunidades no mercado digital?
Conheça o método WED, onde ensino pessoas comuns a criar Sites e Landing Pages profissionais sem a necessidade de saber programar. Esse mercado paga no mínimo R$500 por criação de uma simples Landing Page.
