Estoy haciendo un sitio web y quiero hacer una guía con animación de pulso. Hay 3 etiquetas que quiero usar. Por ejemplo, tres enlaces <a> , quiero:
Creo que puede ser posible con javascript, pero no sé cómo.
Por ejemplo:
#live-heart{ animation:pulse 1500ms infinite ; border-radius:20px; } @keyframes pulse{ 0% { box-shadow:#f33 0 0 0 0; } 75%{ box-shadow:rgba(65, 30, 30, 0.8) 0 0 0 16px } } #live-heart2{ animation:pulse 1500ms infinite ; border-radius:20px; } @keyframes pulse{ 0% { box-shadow:#f33 0 0 0 0; } 75%{ box-shadow:rgba(65, 30, 30, 0.8) 0 0 0 16px } } #live-heart3{ animation:pulse 1500ms infinite ; border-radius:20px; } @keyframes pulse{ 0% { box-shadow:#f33 0 0 0 0; } 75%{ box-shadow:rgba(65, 30, 30, 0.8) 0 0 0 16px } } <a href="#" id="live-heart2">first one</a> <p> When a user clicked on "first one" its css shoul be disabled and a second one that I linked in paragraph be enabled <a href="#" id="live-heart">second one</a> and when a user clicked on second one, its css be disabled and the third one be activeted example text: bla bla bla bla </p> <a href="#" id="live-heart3">third one</a>Básicamente, todo lo que necesita es tener un estado que contenga el índice de enlace pulsante activo. y al hacer clic en él, aumente el índice en uno.
algo como eso:
const [isPulsingIndex, setIsPulsingIndex] = useState(0); <Link className={isPulsing.index === 0 ? 'pulsing' : ''} onClick={() => setIsPulsingIndex(1)}> Link 1 </Link> <Link className={isPulsing.index === 1 ? 'pulsing' : ''} onClick={() => setIsPulsingIndex(2)}> Link 1 </Link> <Link className={isPulsing.index === 2 ? 'pulsing' : ''} onClick={() => setIsPulsingIndex(3)}> Link 1 </Link>ejemplo rápido de cómo agregar y eliminar clases de una etiqueta dinámicamente usando el estado