Neon Light 404 - CSS only(Static)

index.html

<div id="container">
  
    <!-- to increase performance, we change the opacity of shadow instead of changing the text-shadow directly -->
  
    <p id="text">404 ERROR</p>
  
    <p id="shadow">
        <span id="glow">40</span><span id="blink">4 E</span><span id="glow">RR</span><span id="blink">OR</span>
    </p>
  
</div>


<!-- Created by ARiyou2000 -->

neon-light-404-css-only-static.markdown

Neon Light 404 - CSS only(Static)

Simple 404 Neon responsive animated page with CSS.

A Pen by ARiyou Jahan on CodePen.

License.

script.js

// ⟁ \\

//All of code done in HTML and CSS(SCSS).

//Code by ARiyou2000

style.css

 body {
        height: 100vh;
        
   
/*     Background - Model 1 - Simple */
/*    background-color: #111111; */
    background-color: #112;
   
/*      Background - Model 2 - Wallpaper */
    background-image: url("https://images.weserv.nl/?url=i.imgur.com/6QJjYMe.jpg");
    
/*      Background - Model 3 - Wallpaper */
/*     background-image: url("https://cdn.pixabay.com/photo/2017/02/12/12/42/wall-2059909_960_720.png"); */
/*     background-image: url("https://fintechrockers.com/wp-content/uploads/2017/05/wall-2059909.png"); */
   
    
/*      Backgroun Image Settings: */
    background-repeat: repeat-y;
    background-position: center;
    background-size: cover;

/*    Optional Overflow */
    overflow: hidden;
}

  #text,
    #shadow {
        position: absolute;
        margin: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 7em;
        letter-spacing: 20px;
        font-family: Bad Script;
        color: #fff;
    }

    #text {
        color: #333
    }

    #shadow {
        text-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
    }

   #glow {
        /* Animation Time: 3s  /  Delay: 1s */
        animation: neon1 linear infinite 3s 1.5s;
        will-change: opacity;
    }

    #blink {
      /* Animation Time: 2s  /  Delay: 0s */
        animation: blink linear infinite 2s 0s;
    }


    @keyframes neon1 {
        20% {
            opacity: 1;
        }
        80% {
            opacity: 0.6;
        }
    }


    @keyframes blink {
        70% {
            opacity: 1;
        }
        79% {
            opacity: 0;
        }
        81% {
            opacity: 1;
        }
        82% {
            opacity: 0;
        }
        83% {
            opacity: 1;
        }
        92% {
            opacity: 0;
        }
        92.5% {
            opacity: 1;
        }
    }


/* Copy-right by ARiyou2000 in May2020*/

styles

<link href="https://fonts.googleapis.com/css?family=Bad+Script" rel="stylesheet" />