Codepad Neon Sign

HTML
<div class="logo"><b>C<span>o</span>d<span>ep</span>ad</b></div>
CSS
html, body { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } body { background: #112 url(https://goo.gl/xF2Tr9) top center no-repeat; background-size: cover; margin: 0; } .logo { height: 250px; } .logo b { font: 100 15vw 'Nixie One', cursive; color: #fee; text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #ff4444, 0 0 0.5em #ff4444, 0 0 0.1em #ff4444, 0 10px 3px #000; } .logo b span { animation: blink linear infinite 2s; } @keyframes blink { 78% { color: inherit; text-shadow: inherit; } 79% { color: #333; } 80% { text-shadow: none; } 81% { color: inherit; text-shadow: inherit; } 82% { color: #333; text-shadow: none; } 83% { color: inherit; text-shadow: inherit; } 92% { color: #333; text-shadow: none; } 92.5% { color: inherit; text-shadow: inherit; } }
JAVASCRIPT
Expand for more options Login