<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div> <p> <span>O</span> <span>P</span> <span>E</span> <span>N</span> </p> </div>

@import url(https://fonts.googleapis.com/css?family=Roboto:100); :root { --text-color: #f00; --border-color: #3da7f8; --animation-time: 1s; --text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 5px var(--text-color), 0 0 10px var(--text-color), 0 0 10px var(--text-color), 0 0 10px var(--text-color), 0 0 10px var(--text-color), 0 0 20px var(--text-color), 0 0 30px var(--text-color), 0 0 40px var(--text-color), 0 0 55px var(--text-color), 0 0 75px var(--text-color); --box-shadow: inset 0 0 50px var(--border-color), 0 0 10px var(--border-color), 0 0 20px var(--border-color), 0 0 30px var(--border-color); } body { margin: 0px; background: #00061c; display: flex; justify-content: center; align-items: center; height: 100vh; } div { background-color: transparent; border: 3px solid rgba(255, 255, 255, 0.33); border-radius: 20px; padding: 14px 24px; transform: rotate(-6deg); animation: turnOnBorder 0.24s forwards step-end, flickerBorder calc(var(--animation-time) * 16) infinite step-end 1s; } p { font-family: Roboto; margin: 0px; color: #fff; } span { font-size: 100px; } p span { opacity: 0.33; animation: turnOn forwards step-end; } p span:nth-child(1) { animation-delay: 0.3s; } p span:nth-child(2) { animation-delay: 0.2s; } p span:nth-child(3) { animation-delay: 0.4s; } p span:nth-child(4) { animation: turnOn 0.27s forwards step-end, flicker var(--animation-time) infinite step-end 1s; } @keyframes turnOnBorder { 100% { border: 3px solid #fff; box-shadow: var(--box-shadow); opacity: 1; } } @keyframes turnOn { 100% { text-shadow: var(--text-shadow); opacity: 1; } } @keyframes flicker { 0% { text-shadow: var(--text-shadow); } 99% { text-shadow: none; } } @keyframes flickerBorder { 0% { box-shadow: var(--box-shadow); } 99% { box-shadow: none; } }

const setProperty = (duration) => { document.documentElement.style.setProperty( "--animation-time", duration + "s" ); }; const changeAnimationTime = () => { const animationDuration = Math.random(); setProperty(animationDuration); }; setInterval(changeAnimationTime, 1000);