archive ReactApp

react_OLD/src/assets/css/head.scss

@@ -0,0 +1,60 @@
+.line {
+  &:not(:first-child) {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  
+  @for $i from 1 through 10 {
+    &:nth-child(#{$i}) {
+      animation:
+        clip 6000ms $i * -600ms linear infinite,
+        glitch#{$i} 2500ms random(1000) * -1ms linear infinite;
+
+      @keyframes glitch#{$i} {
+        0% {
+          transform: translateX(0);
+        }
+        96% {
+          transform: translateX(0);
+          color: #fff;
+        }
+        97% {
+          transform: translateX(random(10) - 5px);
+          color: #4E9A26;
+        }
+        98% {
+          transform: translateX(random(10) - 5px);
+          color: #AC1212;
+        }
+        99% {
+          transform: translateX(random(10) - 5px);
+          color: #fff;
+        }
+        100% {
+          transform: translateX(0);
+        }
+      }
+    }
+  }
+}
+
+@keyframes clip {
+  0% {
+    clip-path: polygon(
+      0 100%,
+      100% 100%,
+      100% 120%,
+      0 120%
+    );
+  }
+  
+  100% {
+    clip-path: polygon(
+      0 -20%,
+      100% -20%,
+      100% 0%,
+      0 0
+    );
+  }
+}