<main>
<h1>Revenge of the <span class="blink">Blink</span> tag!</h1>
<h2>Do you like the way <span class="blink">I can blink?</span> Don't you miss the <span class="blink">blink</span> tag?</h2>
</main>
body {
color: white;
background-color: black;
display: flex;
height: 100vh;
}
main {
margin: auto;
}
h1, h2 {
font-family: sans-serif;
text-align: center;
}
span.blink {
background-color: #B339F9;
padding: 5px;
}
const blinky = document.querySelectorAll('.blink');
blinky.forEach((span, index) => {
span.style.backgroundColor = index % 2 === 0 ? '#B339F9' : 'transparent';
});
let isBackgroundOn = true;
setInterval(() => {
isBackgroundOn = !isBackgroundOn;
blinky.forEach(span => {
span.style.backgroundColor = isBackgroundOn ? '#B339F9' : 'transparent';
});
}, 500);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.