[Animação] Luz ao Hover
[Animação] Luz ao Hover Para aplicar esse efeito de animação, basta colocar o código CSS (abaixo) de qualquer widget (recomendo usar uma imagem) Defina em Avançado/Classe CSS: glow Código CSS Copiar Código .glow { position: relative; /* ESSENCIAL para posicionar a luz */ overflow: hidden; /* Garante que a luz não saia dos limites do widget antes do hover */ z-index: 1; /* Garante que o conteúdo do widget fique acima da luz */ /* A transição aplica-se ao próprio widget e também ao pseudo-elemento */ transition: all 0.5s ease-out; } /* Pseudo-elemento para criar a luz */ .glow::before { content: “”; position: absolute; top: 0px; /* Ajuste a posição para cobrir o widget */ left: 0px; right: 0px; bottom: 0px; z-index: -1; /* Fica atrás do conteúdo principal do widget */ border-radius: inherit; /* Herda o arredondamento do widget, se houver */ /* Inicia com a sombra transparente (invisível) */ box-shadow: 0 0 0px 0px rgba(0, 255, 115, 0); /* Verde transparente inicial */ /* Transição para a luz */ transition: box-shadow 0.6s ease-in-out, transform 0.3s ease-in-out; } /* Efeito de luz ao passar o mouse (hover) */ .glow:hover::before { /* A luz verde aparece e se espalha */ box-shadow: 0 0 25px 8px rgba(0, 255, 115, 0.7), /* Luz mais intensa no centro */ 0 0 50px 15px rgba(0, 255, 115, 0.4); /* Luz mais suave para fora */ /* Opcional: faz o widget “flutuar” um pouco para dar mais vida */ transform: scale(1.01); } /* Opcional: remove o overflow no hover para alguns efeitos */ .glow:hover { overflow: visible; }
[Animação] Up Mouse Hover v2
[Animação] Up Hover v2 Para aplicar esse efeito de animação, basta colocar o código CSS (abaixo) de qualquer widget (recomendo usar uma imagem) Defina em Avançado/Classe CSS: hover-topo Código CSS Copiar Código .uphoverv2{ transition: 0.4s ease-out; /* Transição mais rápida */ } .uphoverv2:hover{ transform: translatey(-25px); /* Move 25px para cima */ }
[Animação] Up Mouse Hover
[Animação] Up Hover Para aplicar esse efeito de animação, basta colocar o código CSS (abaixo) de qualquer widget (recomendo usar uma imagem) Defina em Avançado/Classe CSS: uphover Código CSS Copiar Código .uphover{ transition: 0.7s ease-out; /* Tempo de animação mais rápido e suave */ } .uphover:hover{ transform: translatey(-30px) rotate(-8deg); /* Move 30px para cima e rotaciona 8 graus no sentido anti-horário */ }
[Animação] Flutuar 3D
[Animação] Flutuar 3D Para aplicar esse efeito de animação, basta colocar o código CSS (abaixo) de qualquer widget (recomendo usar uma imagem) Defina em Avançado/Classe CSS: flutuar-3d Código CSS Copiar Código .flutuar-3d { animation: flutuar3d 3s ease-in-out infinite; transform-style: preserve-3d; } @keyframes flutuar3d { 0%, 100% { transform: rotateX(20) rotateY(60) translateY(20); } 50% { transform: rotateX(6deg) rotateY(-60deg) translateY(-20px); } }
[Animação] Girar + Pausas
[Animação] Girar + Pausas Para aplicar esse efeito de animação, basta colocar o código CSS (abaixo) de qualquer widget (recomendo usar uma imagem) Defina em Avançado/Classe CSS: girar-com-pausas Código CSS Copiar Código .girar-com-pausas { animation: girarComPausas 4s ease-in-out infinite; } @keyframes girarComPausas { 0% { transform: rotate(0deg); } 40% { transform: rotate(180deg); } 60% { transform: rotate(180deg); } /* pausa */ 100% { transform: rotate(360deg); } }
[Animação] Flutuar Diagonal
[Animação] Flutuar Diagonal Para aplicar esse efeito de animação, basta colocar o código CSS (abaixo) de qualquer widget (recomendo usar uma imagem) Defina em Avançado/Classe CSS: flutuar-diagonal Código CSS Copiar Código .flutuar-diagonal { animation: flutuarDiagonal 4s ease-in-out infinite; } @keyframes flutuarDiagonal { 0% { transform: translate(0, 0); } 50% { transform: translate(-70px, -70px); } 100% { transform: translate(0, 0); } }
[Animação] Flutuar Suave
[Animação] Flutuar Suave Para aplicar esse efeito de animação, basta colocar o código CSS (abaixo) de qualquer widget (recomendo usar uma imagem) Defina em Avançado/Classe CSS: flutuar-suave Código CSS Copiar Código .flutuar-suave { animation: flutuarSuave 4s ease-in-out infinite; } @keyframes flutuarSuave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-60px); } }
[Animação] Giro Linear
[Animação] Giro Linear Para aplicar esse efeito de animação, basta colocar o código CSS (abaixo) de qualquer widget (recomendo usar uma imagem) Não precisa definir Classe CSS Código CSS Copiar Código selector { animation: giro 6s linear infinite; } @keyframes giro{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }
[Animação] Respiro
[Animação] Escala Para aplicar esse efeito de animação, basta colocar o código CSS (abaixo) de qualquer widget (recomendo usar uma imagem) Defina em Avançado/Classe CSS: respiro-scale Código CSS Copiar Código .respiro-scale { animation: respiroScale 5s ease-in-out infinite; } @keyframes respiroScale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } } it-backdrop-filter: blur(15px); }