Advertisement
Guest User

Scanlines

a guest
Mar 18th, 2019
94
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.08 KB | None | 0 0
  1. body::before {
  2.     content: "";
  3.     display: block;
  4.     position: fixed;
  5.     left: 0;
  6.     top: 0;
  7.     width: calc(100% + 32px);
  8.     height: calc(100% + 32px);
  9.     background-image: url("https://files.catbox.moe/lkk9y9.png");
  10.     background-position: 0 0;
  11.     background-repeat: repeat;
  12.     z-index: 10000000;
  13.     animation: ScanlineAnimationLeft 2s linear infinite;
  14.     pointer-events: none;
  15.     opacity: 0.75;
  16. }
  17.  
  18. body::after {
  19.     content: "";
  20.     display: block;
  21.     position: fixed;
  22.     left: -32px;
  23.     top: 0;
  24.     width: calc(100% + 32px);
  25.     height: calc(100% + 32px);
  26.     background-image: url("https://files.catbox.moe/lkk9y9.png");
  27.     background-position: 0 0;
  28.     background-repeat: repeat;
  29.     z-index: 10000000;
  30.     animation: ScanlineAnimationRight 0.4s linear infinite;
  31.     pointer-events: none;
  32.     opacity: 0.75;
  33. }
  34.  
  35. @keyframes ScanlineAnimationLeft {
  36.     0% {
  37.         transform: translateX(0px) translateY(0px);
  38.     }
  39.     100% {
  40.         transform: translateX(-32px) translateY(-32px);
  41.     }
  42. }
  43.  
  44. @keyframes ScanlineAnimationRight {
  45.     0% {
  46.         transform: translateX(0px) translateY(0px);
  47.     }
  48.     100% {
  49.         transform: translateX(32px) translateY(-32px);
  50.     }
  51. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement