Border Ripple
Anéis de borda concêntricos se expandem para fora ou se contraem para dentro a partir do elemento ao passar o mouse.
Onde usar
Botões
Variações
- Ripple Out
- Ripple In
Prompt
Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.
Adicione um efeito de hover "Border Ripple" em [onde].
Quando o ponteiro entrar, alguns anéis de borda devem se espalhar a partir do elemento, um após o outro, e sumir: rápido e leve, como uma ondulação na água.
Reproduza uma vez por hover em vez de repetir em loop e não deixe os anéis deslocarem o layout ao redor.Animações parecidas
A
Passe o mouse por cima
Ao passar o mouse, um contorno cresce para fora do elemento ou encolhe em direção a ele.
Onde usar
Botões
Adicione um efeito de hover "Outline Expand" em [onde].
Um contorno deve começar rente à borda do elemento e se afastar até deixar um pequeno espaço ao redor, ficar assim durante o hover e voltar a se fechar quando o ponteiro sair: suave e rápido.
Desenhe o contorno de forma que ele não mude o tamanho do elemento nem empurre o conteúdo ao redor, e mostre o mesmo efeito no foco do teclado.A
Ping
Também chamada Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
Uma cópia do elemento cresce e desaparece repetidamente, como uma onda de radar.
Onde usar
Pontos de notificação, status ao vivo
Adicione um efeito "Ping" (também chamado radar ping ou pulse ring) em [onde].
Uma cópia do elemento deve crescer para fora e desaparecer, de novo e de novo em ritmo constante, enquanto o próprio elemento fica parado.
Desenhe o anel em uma camada separada para que ele nunca altere o layout, e pare o loop se o usuário preferir movimento reduzido (prefers-reduced-motion).A
Ripple Rings
Também chamada Background ripple, Concentric ripples
Círculos concêntricos se expandem a partir de um ponto central e desaparecem.
Onde usar
Peças centrais de hero, visuais de áudio ou de pareamento
Adicione um efeito "Ripple Rings" (também chamado background ripple ou concentric ripples) em [onde].
Os anéis devem se expandir sem parar a partir de um ponto central e sumir conforme crescem, um após o outro e com espaçamento igual: lento e constante.
Mantenha o elemento central parado no lugar e pare as ondas se o usuário preferir movimento reduzido (prefers-reduced-motion).Mais em Hover
A
Passe o mouse por cima
Bounce Scale
Também chamada Bounce In / Out
O elemento muda de escala com um exagero elástico quando o hover começa ou termina.
Onde usar
Botões, badges
Adicione um efeito de hover "Bounce Scale" (também chamado bounce in / out) em [onde].
O elemento deve crescer um pouco com um quique elástico visível, passando rapidamente do tamanho final antes de se assentar, e voltar com o mesmo quique quando o ponteiro sair.
Evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.ABCDEF
Mova o ponteiro aqui
Card Hover Effect
Também chamada Sliding highlight card grid
Um fundo de destaque desliza entre os cards de uma grade para acompanhar o card sob o mouse.
Onde usar
Grades de cards, listas de recursos
Adicione um "Card Hover Effect" (também chamado sliding highlight card grid) em [onde].
Um fundo de destaque suave deve aparecer atrás do card sob o ponteiro e deslizar com fluidez até o próximo card para onde o ponteiro for, sumindo quando o ponteiro sair da grade.
Faça o foco do teclado mover o destaque do mesmo jeito e evite que os próprios cards se desloquem.A
Mova o ponteiro aqui
Card Spotlight
Também chamada Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
Uma luz radial suave acompanha o ponteiro pela superfície do card e revela o fundo por baixo.
Onde usar
Cards de recursos, grades bento
Adicione um efeito "Card Spotlight" (também chamado spotlight hover, pointer glow, mouse-following glow ou radial gradient hover) em [onde].
Um brilho radial suave e discreto deve acompanhar o ponteiro pela superfície do card, surgindo quando o ponteiro entra e sumindo quando sai.
Mantenha o brilho atrás do conteúdo do card para o texto continuar legível e, em telas de toque, simplesmente deixe o card sem brilho.