So, If u notice the text is flickering
Created
July 16, 2022 10:51
-
-
Save pkneebal/34c34911e8caf59087903e3228abad26 to your computer and use it in GitHub Desktop.
CSS only Neon flicker effect!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <section> | |
| <div class="container"> | |
| <h1 data-text="neebal">neebal</h1> | |
| </div> | |
| </section> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600&display=swap"); | |
| * { | |
| padding: 0; | |
| margin: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-family: "Nunito"; | |
| } | |
| :root { | |
| --var-color: rgba(8,160, 255, 1); | |
| } | |
| section { | |
| height: 100vh; | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: #09111b; | |
| } | |
| .container h1 { | |
| font-size: 20vw; | |
| color: var(--var-color); | |
| position: relative; | |
| } | |
| .container h1::before { | |
| position: absolute; | |
| content: attr(data-text); | |
| text-shadow: 0px 0px 20px var(--var-color); | |
| filter: blur(10px) brightness(0); | |
| animation: flicker 10s infinite running; | |
| animation-delay: 1s; | |
| } | |
| @keyframes flicker { | |
| 0% { | |
| filter: blur(5px) brightness(1); | |
| } | |
| 3% { | |
| filter: blur(5px) brightness(0); | |
| } | |
| 6% { | |
| filter: blur(5px) brightness(0); | |
| } | |
| 7% { | |
| filter: blur(5px) brightness(1); | |
| } | |
| 8% { | |
| filter: blur(5px) brightness(0); | |
| } | |
| 9% { | |
| filter: blur(5px) brightness(1); | |
| } | |
| 10% { | |
| filter: blur(5px) brightness(0); | |
| } | |
| 20% { | |
| filter: blur(5px) brightness(1); | |
| } | |
| 50% { | |
| filter: blur(5px) brightness(1); | |
| } | |
| 99% { | |
| filter: blur(5px) brightness(0); | |
| } | |
| 100% { | |
| filter: blur(5px) brightness(1); | |
| } | |
| 105% { | |
| filter: blur(5px) brightness(0); | |
| } | |
| 115% { | |
| filter: blur(5px) brightness(1); | |
| } | |
| 121% { | |
| filter: blur(5px) brightness(0); | |
| } | |
| 140% { | |
| filter: blur(5px) brightness(1); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment