¿cuál es el codigo html, css y script para hacer un <div> que contenga un icono svg de campana de tamaño de 24px, y que al presionar un boton se mueva el icono campana con el animacion shake con movimiento no tan rapido?
¡Por supuesto! Aquí te presento un ejemplo de cómo podrías hacerlo utilizando HTML, CSS y JavaScript:
**HTML:**
```html
<div id="contenedor">
<svg id="icono-campana" width="24" height="24" viewBox="0 0 24 24">
<path d="M12 2C8.15 2 5 5.13 5 9v2.76l-.88 1.76c-.13.28-.12.6.04.87.18.27.47.41.77.41.17 0 .35-.05.51-.16L8.2 11c.62 2.09 2.58 3.57 4.8 3.57 2.22 0 4.18-1.48 4.8-3.57l2.76.83c.16.05.34.05.51.05.3 0 .6-.14.78-.41.16-.27.18-.59.04-.87l-.88-1.76V9c0-3.87-3.15-7-7-7zm2 14c-.51 0-.91-.37-1-.86h2c-.09.49-.49.86-1 .86zm4.96-4.43c-.59 1.43-2.09 2.43-3.96 2.43s-3.37-1-3.96-2.43l-.68-1.64c-.09-.21-.04-.45.12-.61.17-.17.41-.22.62-.15 1.48.61 3.09.61 4.57 0 .22-.08.45-.03.62.15.16.16.21.39.12.61l-.68 1.64z"/>
</svg>
<button id="boton-movimiento" onclick="moverCampana()">Presionar</button>
</div>
```
**CSS:**
```css
#contenedor {
width: 50px;
height: 50px;
position: relative;
}
#icono-campana {
position: absolute;
top: 0;
left: 0;
}
.shake {
animation: shake 0.5s infinite;
}
@keyframes shake {
0% { transform: translateX(0); }
10% { transform: translateX(5px) rotate(3deg); }
20% { transform: translateX(-5px) rotate(-3deg); }
30% { transform: translateX(4px) rotate(2deg); }
40% { transform: translateX(-4px) rotate(-2deg); }
50% { transform: translateX(-3px) rotate(1deg); }
60% { transform: translateX(3px) rotate(-1deg); }
70% { transform: translateX(-2px) rotate(0); }
80% { transform: translateX(2px) rotate(0); }
90% { transform: translateX(-1px) rotate(0); }
100% { transform: translateX(1px) rotate(0); }
}
#boton-movimiento {
padding: 10px;
margin-top: 10px;
}
```
**JavaScript:**
```javascript
function moverCampana() {
var campana = document.getElementById("icono-campana");
campana.classList.add("shake");
setTimeout(function() {
campana.classList.remove("shake");
}, 500);
}
```
Este código creará un `div` con el ID `contenedor` que contiene un icono SVG de campana, con un ancho y alto de 24 píxeles. También incluye un botón con el ID `boton-movimiento` que, al hacer clic, mueve el icono de campana div utilizando una animación CSS predefinida llamada `shake`.
El archivo CSS define la animación `shake`, que se activa cuando se agrega la clase `shake` al elemento SVG usando JavaScript. El archivo JavaScript define la función `moverCampana()`, que agrega la clase `shake` al elemento SVG y luego, después de un retardo de medio segundo, elimina la clase `shake`.
Espero que esto te sea útil. Si tienes alguna pregunta o necesitas más ayuda, por favor hazme saber.
