Use a animação de quadro-chave @keyframes em CSS para criar esse efeito de tremor. Aqui está um exemplo simples que mostra como usar a animação de quadro-chave para obter esse efeito:
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-5px);
}
20%, 40%, 60%, 80% {
transform: translateX(5px);
}
}
.shake-text {
display: inline-block;
animation: shake 0.5s infinite;
}
No código acima:
-
Definimos uma regra @keyframes chamada shake. Esta regra define o efeito de animação de vibração do texto, que utiliza o atributo transform para alterar a posição do elemento em diferentes porcentagens de tempo.
-
As porcentagens utilizadas nas regras @keyframes representam a distribuição do tempo da animação durante sua execução. Nos pontos de tempo 0% e 100%, o texto não muda; em outros momentos, o texto treme para a esquerda e para a direita.
-
O seletor de classe .shake-text é usado para aplicar um efeito de vibração a um elemento de texto específico.
-
O atributo de animação aplica animação de vibração ao elemento de texto, define a duração da animação para 0,5s e define-a para execução de loop infinito.
Adicione este código CSS à sua folha de estilo e adicione um elemento de texto com a classe .shake-text ao seu HTML para acionar o efeito de vibração do texto ao passar o mouse:
<p class="shake-text">鼠标悬停时摇晃的文字</p>
Observe que este é apenas um exemplo simples e você pode ajustar a duração, amplitude e outros parâmetros da animação conforme necessário.