<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+128+Text" rel="stylesheet">
<div id='barcodeContainer' class='glowing-animation'>
<h1 id="barcode">
<span class = "animatedSpan ">[</span><span class = "animatedSpan">C</span><span class = "animatedSpan">S</span><span class = "animatedSpan">S</span><span class = "animatedSpan"> </span><span class = "animatedSpan">A</span><span class = "animatedSpan">n</span><span class = "animatedSpan">i</span><span class = "animatedSpan">m</span><span class = "animatedSpan">a</span><span class = "animatedSpan">t</span><span class = "animatedSpan">i</span><span class = "animatedSpan">o</span><span class = "animatedSpan">n</span><span class = "animatedSpan ">]</span>
<!-- PLANNED OBSOLESCENCE -->
<!-- <span class='animatedSpan'>P</span><span class='animatedSpan'>l</span><span class='animatedSpan'>a</span><span class='animatedSpan'>n</span><span class='animatedSpan'>n</span><span class='animatedSpan'>e</span><span class='animatedSpan'>d</span><span class='animatedSpan'> </span><span class='animatedSpan'>O</span><span class="animatedSpan">b</span><span class="animatedSpan">s</span><span class="animatedSpan">o</span><span class="animatedSpan">l</span><span class="animatedSpan">e</span><span class="animatedSpan">s</span><span class="animatedSpan">c</span><span class="animatedSpan">e</span><span class="animatedSpan">n</span><span class="animatedSpan">c</span><span class="animatedSpan">e</span> -->
</h1>
</div>
html, body {
box-sizing: border-box;
height: 100%;
margin: 0;
padding: 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
display: flex;
justify-content: center;
align-items: center;
background: #0B1110;
background: linear-gradient(45deg, #0B1110, #171717);
cursor: pointer;
}
// TODO: PUT ANIMATIONS ON PSEUDO ELEMENT INSTEAD
.glowing-animation {
animation: glowing 17000ms infinite;
}
@keyframes glowing {
0% { box-shadow: 0 0 -2px 1 rgba(61, 72, 70, .4) }
40% { box-shadow: 0 0 20px 3px rgba(61, 72, 70, .5) }
60% { box-shadow: 0 0 30px 3px rgba(61, 72, 70, .3) }
100% { box-shadow: 0 0 -10px 0 rgba(61, 72, 70, .2) }
}
#barcodeContainer {
display: flex;
justify-content: center;
align-items: center;
background-color: darken(#0B1110,2);
padding: 0px 20px;
border-radius: 15px;
box-shadow: 0 0px 1px rgba(61, 72, 70, .8);
cursor: crosshair;
}
#barcode{
position: relative;
color: #626B5B;
font-family: 'Libre Barcode 128 Text', cursive;
font-size: 5rem;
font-weight: 100;
white-space: no-wrap;
}
.animatedSpan{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
&:hover {
color: darkturquoise;
}
}
.barcodeSelected{
color: darkturquoise;
}
.highlighted{
color: aliceblue;
border-bottom: 1px solid darkred;
padding-bottom: 10px;
// text-shadow: 1px 1px 25px aqua;
text-shadow: 1px 1px 35px aqua;
}
View Compiled
let barcodeSpans = $("#barcode").children();
function barcodeAnimation()
{
barcodeSpans.each(function(i)
{
let span = $(this);
setTimeout(function()
{
// highlight each individual span with 200ms between each
span.toggleClass('highlighted');
// span.fadeToggle("slow");
}, 200*i);});
barcodeSpans.each(function(i)
{
let span = $(this);
setTimeout(function()
{
// remove the highlighting from each span with 20ms between each
span.toggleClass('highlighted');
}, 20*i);});
}
$(document).ready(function()
{
setInterval(barcodeAnimation, 4000);
});
This Pen doesn't use any external CSS resources.