pure css crt added

AB10110F · Nov 20, 2023 · baa316e · baa316e
1 parent f8f0544
commit baa316e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/public/scanlines.jpg b/public/scanlines.jpg
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -34,7 +34,7 @@ function Home() {
 
   return (
     <main className={text}>
-      <Image src="/scanlines.jpg" width={500} height={500} className={scanlines} alt="image" />
+      <span className={scanlines}></span>
       <span className={scanner}></span>
       <header className={styles.header}>
             <h1 style={dotFont.style}>{title}</h1>

diff --git a/src/css/page.module.css b/src/css/page.module.css
@@ -78,7 +78,7 @@
   height: 40%;
   animation: right 1.5s ease;
   background: repeating-linear-gradient(90deg, #ffffff 0, #ffffff 3%, transparent 0, transparent 50%), repeating-linear-gradient(180deg, #ffffff 0, #ffffff 3%, transparent 0, transparent 50%);
-        background-size: 2.5em 2.5em;
+        background-size: 8% 20%;
         background-color: #00000000;
         opacity: 1;
 }
@@ -100,6 +100,11 @@
   height: 100%;
   width: 100%;
   opacity: 25%;
+  background-color: rgb(0, 0, 0);
+  mask-image: radial-gradient(rgba(120, 120, 120, 1) 30%, rgb(60, 60, 60, 0.4) 52%);
+  background-image: linear-gradient(0deg, rgb(60, 60, 60) 50%, rgb(220, 220, 220) 50%);
+  background-size: 1.5% 1.5%;
+  animation: flicker 100ms infinite;
   pointer-events: none;
 }
 
@@ -110,7 +115,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  height: 7%;
+  height: 5%;
   width: 100%;
 }
 
@@ -119,6 +124,16 @@
   display: none;
 }
 
+@keyframes flicker {
+  0% {
+    transform: translateY(1px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+
+
 @keyframes right
 {
   0%{
@@ -212,4 +227,8 @@
   {
     width: 45%;
   }
+  .bars
+  {
+    background-size: 11% 30%;
+  }
 }