Advertisement
greenmelon

TV effect

May 14th, 2022
4,812
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.79 KB | None | 0 0
  1. <style>
  2. .lines {
  3. position: fixed;
  4. left: 0;
  5. top: 0;
  6. width: 100vw;
  7. height: 100vh;
  8. pointer-events: none;
  9. z-index: 300;
  10. opacity: 0.05;
  11. }
  12.  
  13. .lines:before {
  14. content: '';
  15. position: absolute;
  16. left: 0;
  17. top: 0;
  18. right: 0;
  19. bottom: 0;
  20. pointer-events: none;
  21. background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
  22. background-size: 100% 4px;
  23. will-change: background, background-size; animation: scanlines 0.2s linear infinite;
  24. }
  25.  
  26. @keyframes scanlines {
  27. from {
  28. background: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, .5) 51%); background-size: 100% 4px; }
  29. to {
  30. background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
  31. background-size: 100% 4px;
  32. }
  33. }
  34. @media only screen and (max-width: 600px);
  35. {
  36. </style>
  37.  
  38. <div class="lines"></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement