Neon Flicker Text
ネオンサインのようにランダムにちらつく文字アニメーション。
HTML
<h2 class="nft-text" id="nft-text">NEON SIGN</h2>
CSS
.nft-text {
font-size: 42px;
font-weight: 900;
letter-spacing: 4px;
color: #ec4899;
text-shadow: 0 0 10px #ec4899, 0 0 20px #ec4899, 0 0 40px #be185d;
}
.nft-char {
display: inline-block;
transition: opacity 0.05s;
}
.nft-char.dim {
opacity: 0.3;
text-shadow: none;
}
JavaScript
const text = document.getElementById('nft-text');
const chars = text.textContent.split('');
text.textContent = '';
chars.forEach(function(ch) {
const span = document.createElement('span');
span.classList.add('nft-char');
span.textContent = ch === ' ' ? '\u00A0' : ch;
text.appendChild(span);
});
const spans = text.querySelectorAll('.nft-char');
setInterval(function() {
const idx = Math.floor(Math.random() * spans.length);
spans[idx].classList.add('dim');
setTimeout(function() { spans[idx].classList.remove('dim'); }, 100 + Math.random() * 200);
}, 150);