El efecto de botón de agitación, también conocido como efecto de movimiento, se puede usar para hacer que el sitio web se vea más receptivo y dinámico. Este es uno de los mejores efectos para entender el concepto de regla @keyframes en CSS.
Enfoque: el efecto o la animación del botón de movimiento se puede crear usando HTML y CSS. Primero, crearemos un botón básico usando HTML y luego usaremos la regla @keyframes para especificar el código de animación. Las siguientes secciones lo guiarán sobre cómo crear el efecto.
Código HTML: en esta sección, crearemos un botón básico usando la etiqueta del botón .
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Shake Button on Hover</title> </head> <body> <div> <button id="btn">Button</button> </div> </body> </html>
Código CSS: en esta sección, primero diseñaremos el botón usando las propiedades básicas de CSS, luego, para crear el efecto de movimiento o la animación, usaremos la regla @keyframes , usaremos las funciones translateX() y rotate() para reposicionar el botón El elemento en el eje x crea el efecto deseado cuando pasamos el mouse sobre él.
<style>
body {
margin: 0;
padding: 0;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#btn {
text-align: center;
height: 60px;
width: 200px;
display: block;
font-size: 1.5em;
background: #68E73C;
}
#btn:hover {
animation: effect 0.4s infinite;
}
@keyframes effect {
0% {
transform: translateX(0px) rotate(0deg);
}
20% {
transform: translateX(-4px) rotate(-4deg);
}
40% {
transform: translateX(-2px) rotate(-2deg);
}
60% {
transform: translateX(4px) rotate(4deg);
}
80% {
transform: translateX(2px) rotate(2deg);
}
100% {
transform: translateX(0px) rotate(0deg);
}
}
</style>
Código completo: es la combinación de las dos secciones de código anteriores.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Shake Button on Hover</title>
<style>
body {
margin: 0;
padding: 0;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#btn {
text-align: center;
height: 60px;
width: 200px;
display: block;
font-size: 1.5em;
background: #68E73C;
}
#btn:hover {
animation: effect 0.4s infinite;
}
@keyframes effect {
0% {
transform: translateX(0px) rotate(0deg);
}
20% {
transform: translateX(-4px) rotate(-4deg);
}
40% {
transform: translateX(-2px) rotate(-2deg);
}
60% {
transform: translateX(4px) rotate(4deg);
}
80% {
transform: translateX(2px) rotate(2deg);
}
100% {
transform: translateX(0px) rotate(0deg);
}
}
</style>
</head>
<body>
<div>
<button id="btn">Button</button>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por lakshgoel204 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA