Advertisement
Guest User

vhs filter

a guest
Apr 28th, 2023
474
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.82 KB | None | 0 0
  1. <!--originally taken from lolcow.crd.co-->
  2. <style>
  3. body {
  4. background: black;
  5. color: white;
  6. font-size: 2em;
  7. }
  8. .noise {
  9. position: fixed;
  10. top: 0;
  11. left: 0;
  12. width: 100vw;
  13. height: 100vh;
  14. overflow: hidden;
  15. z-index: 400;
  16. opacity: 0.8;
  17. pointer-events: none;
  18. opacity: 1;
  19. z-index: 450;
  20. }
  21. .noise:before {
  22. content: '';
  23. position: absolute;
  24. top: 0;
  25. left: 0;
  26. right: 0;
  27. bottom: 0;
  28. background: url('https://ice-creme.de/images/background-noise.png');
  29. pointer-events: none;
  30. will-change: background-position;
  31. animation: noise 1s infinite alternate;
  32. }
  33. .lines {
  34. position: fixed;
  35. left: 0;
  36. top: 0;
  37. width: 100vw;
  38. height: 100vh;
  39. pointer-events: none;
  40. z-index: 300;
  41. opacity: 0.6;
  42. will-change: opacity;
  43. animation: opacity 3s linear infinite;
  44. }
  45. .lines:before {
  46. content: '';
  47. position: absolute;
  48. left: 0;
  49. top: 0;
  50. right: 0;
  51. bottom: 0;
  52. pointer-events: none;
  53. background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
  54. background-size: 100% 4px;
  55. will-change: background, background-size;
  56. animation: scanlines 0.2s linear infinite;
  57. }
  58. .main {
  59. }
  60. .main .noise:before {
  61. background-size: 170%;
  62. }
  63. .main .vhs {
  64. position: absolute;
  65. left: 2rem;
  66. top: 2rem;
  67. will-change: text-shadow;
  68. animation: rgbText 2s steps(9) 0s infinite alternate;
  69. }
  70. .main .vhs .char {
  71. will-change: opacity;
  72. animation: type 1.2s infinite alternate;
  73. animation-delay: calc(60ms * var(--char-index));
  74. }
  75. .main .time {
  76. position: absolute;
  77. right: 2rem;
  78. top: 2rem;
  79. will-change: text-shadow;
  80. animation: rgbText 1s steps(9) 0s infinite alternate;
  81. }
  82. .main .glitchtext {
  83. will-change: text-shadow;
  84. animation: rgbText 1s steps(9) 0s infinite alternate;
  85. }
  86. @keyframes noise {
  87. 0%,
  88. 100% {
  89. background-position: 0 0;
  90. }
  91. 10% {
  92. background-position: -5% -10%;
  93. }
  94. 20% {
  95. background-position: -15% 5%;
  96. }
  97. 30% {
  98. background-position: 7% -25%;
  99. }
  100. 40% {
  101. background-position: 20% 25%;
  102. }
  103. 50% {
  104. background-position: -25% 10%;
  105. }
  106. 60% {
  107. background-position: 15% 5%;
  108. }
  109. 70% {
  110. background-position: 0 15%;
  111. }
  112. 80% {
  113. background-position: 25% 35%;
  114. }
  115. 90% {
  116. background-position: -10% 10%;
  117. }
  118. }
  119. @keyframes opacity {
  120. 0% {
  121. opacity: 0.6;
  122. }
  123. 20% {
  124. opacity: 0.3;
  125. }
  126. 35% {
  127. opacity: 0.5;
  128. }
  129. 50% {
  130. opacity: 0.8;
  131. }
  132. 60% {
  133. opacity: 0.4;
  134. }
  135. 80% {
  136. opacity: 0.7;
  137. }
  138. 100% {
  139. opacity: 0.6;
  140. }
  141. }
  142. @keyframes scanlines {
  143. from {
  144. background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
  145. background-size: 100% 4px;
  146. }
  147. to {
  148. background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
  149. background-size: 100% 4px;
  150. }
  151. }
  152. @keyframes rgbText {
  153. 0% {
  154. text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
  155. }
  156. 25% {
  157. text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
  158. }
  159. 45% {
  160. text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
  161. }
  162. 50% {
  163. text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
  164. }
  165. 55% {
  166. text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
  167. }
  168. 90% {
  169. text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
  170. }
  171. 100% {
  172. text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
  173. }
  174. }
  175. @keyframes type {
  176. 0%,
  177. 19% {
  178. opacity: 0;
  179. }
  180. 20%,
  181. 100% {
  182. opacity: 1;
  183. }
  184. }
  185. </style>
  186. <div class="lines"></div>
  187. <div class="main">
  188. <div class="noise"></div>
  189. <style>
  190. .rgbtxt {
  191. animation: rgbText 1s steps(9) 0s infinite alternate;
  192. animation-name: rgbText;
  193. animation-iteration-count: infinite;
  194. animation-timing-function: ease-in-out;
  195. }
  196. @keyframes rgbText {
  197. 0% {
  198. text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
  199. }
  200. 25% {
  201. text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
  202. }
  203. 45% {
  204. text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
  205. }
  206. 50% {
  207. text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
  208. }
  209. 55% {
  210. text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
  211. }
  212. 90% {
  213. text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
  214. }
  215. 100% {
  216. text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
  217. }
  218. }
  219. </style>
  220.  
  221. <div class="rgbtxt">pretty simple stuff, set whatever class you want this effect on to "rgbtxt" and call it a day. <p></p>also... its prob a given that you shouldnt use this on light bgs as it looks AWFUL</div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement