_404.scss 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. /* Source: http://codepen.io/bulby97/pen/fcvay */
  2. .glitch {
  3. position: relative;
  4. animation: glitch 2s steps(100) infinite;
  5. }
  6. @keyframes glitch {
  7. 0% {
  8. text-shadow: 1px 0 0 red, -1px 0 0 blue;
  9. }
  10. 1% {
  11. text-shadow: 1px 0 0 red, -1px 0 0 blue;
  12. }
  13. 2% {
  14. text-shadow: 1px 0 0 red, -1px 0 0 blue;
  15. }
  16. 3% {
  17. text-shadow: 1px 0 0 red, -1px 0 0 blue;
  18. }
  19. 4% {
  20. text-shadow: 1px 0 0 red, -1px 0 0 blue;
  21. }
  22. 5% {
  23. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  24. }
  25. 6% {
  26. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  27. }
  28. 7% {
  29. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  30. }
  31. 8% {
  32. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  33. }
  34. 9% {
  35. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  36. }
  37. 10% {
  38. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  39. }
  40. 11% {
  41. text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
  42. }
  43. 12% {
  44. text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
  45. }
  46. 13% {
  47. text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
  48. }
  49. 14% {
  50. text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
  51. }
  52. 15% {
  53. text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
  54. }
  55. 16% {
  56. text-shadow: -1px 0 0 red, 1px 0 0 lime;
  57. }
  58. 17% {
  59. text-shadow: -1px 0 0 red, 1px 0 0 lime;
  60. }
  61. 18% {
  62. text-shadow: -1px 0 0 red, 1px 0 0 lime;
  63. }
  64. 19% {
  65. text-shadow: -1px 0 0 red, 1px 0 0 lime;
  66. }
  67. 20% {
  68. text-shadow: -1px 0 0 red, 1px 0 0 lime;
  69. }
  70. 21% {
  71. text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
  72. }
  73. 22% {
  74. text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
  75. }
  76. 23% {
  77. text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
  78. }
  79. 24% {
  80. text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
  81. }
  82. 25% {
  83. text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
  84. }
  85. 26% {
  86. text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
  87. }
  88. 27% {
  89. text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
  90. }
  91. 28% {
  92. text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
  93. }
  94. 29% {
  95. text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
  96. }
  97. 30% {
  98. text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
  99. }
  100. 31% {
  101. text-shadow: -1px 0 0 blue, 1px 0 0 lime;
  102. }
  103. 32% {
  104. text-shadow: -1px 0 0 blue, 1px 0 0 lime;
  105. }
  106. 33% {
  107. text-shadow: -1px 0 0 blue, 1px 0 0 lime;
  108. }
  109. 34% {
  110. text-shadow: -1px 0 0 blue, 1px 0 0 lime;
  111. }
  112. 35% {
  113. text-shadow: -1px 0 0 blue, 1px 0 0 lime;
  114. }
  115. 36% {
  116. text-shadow: -1px 0 0 blue, 1px 0 0 lime;
  117. }
  118. 37% {
  119. text-shadow: -1px 0 0 blue, 1px 0 0 lime;
  120. }
  121. 38% {
  122. text-shadow: -1px 0 0 blue, 1px 0 0 lime;
  123. }
  124. 39% {
  125. text-shadow: -1px 0 0 blue, 1px 0 0 lime;
  126. }
  127. 40% {
  128. text-shadow: -1px 0 0 blue, 1px 0 0 lime;
  129. }
  130. 41% {
  131. text-shadow: 50px 0 0 blue, -50px 0 0 lime;
  132. }
  133. 42% {
  134. text-shadow: 0 0 0 blue, 0 0 0 lime;
  135. }
  136. 43% {
  137. text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
  138. }
  139. 44% {
  140. text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
  141. }
  142. 45% {
  143. text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
  144. }
  145. 46% {
  146. text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
  147. }
  148. 47% {
  149. text-shadow: -1px 0 0 red, 1px 0 0 lime;
  150. }
  151. 48% {
  152. text-shadow: -1px 0 0 red, 1px 0 0 lime;
  153. }
  154. 49% {
  155. text-shadow: -1px 0 0 red, 1px 0 0 lime;
  156. }
  157. 50% {
  158. text-shadow: -1px 0 0 red, 1px 0 0 lime;
  159. }
  160. 51% {
  161. text-shadow: 1px 0 0 red, -1px 0 0 blue;
  162. }
  163. 52% {
  164. text-shadow: 1px 0 0 red, -1px 0 0 blue;
  165. }
  166. 53% {
  167. text-shadow: 1px 0 0 red, -1px 0 0 blue;
  168. }
  169. 54% {
  170. text-shadow: 1px 0 0 red, -1px 0 0 blue;
  171. }
  172. 55% {
  173. text-shadow: 1px 0 0 red, -1px 0 0 blue;
  174. }
  175. 56% {
  176. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  177. }
  178. 57% {
  179. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  180. }
  181. 58% {
  182. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  183. }
  184. 59% {
  185. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  186. }
  187. 60% {
  188. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  189. }
  190. 61% {
  191. text-shadow: 30px 0 0 red, -30px 0 0 lime;
  192. }
  193. 62% {
  194. text-shadow: 0 0 0 red, 0 0 0 lime;
  195. }
  196. 63% {
  197. text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
  198. }
  199. 64% {
  200. text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
  201. }
  202. 65% {
  203. text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
  204. }
  205. 66% {
  206. text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
  207. }
  208. 67% {
  209. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  210. }
  211. 68% {
  212. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  213. }
  214. 69% {
  215. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  216. }
  217. 70% {
  218. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  219. }
  220. 71% {
  221. text-shadow: 70px 0 0 red, -70px 0 0 blue;
  222. }
  223. 72% {
  224. text-shadow: 0 0 0 red, 0 0 0 blue;
  225. }
  226. 73% {
  227. text-shadow: 1px 0 0 red, -1px 0 0 blue;
  228. }
  229. 74% {
  230. text-shadow: 1px 0 0 red, -1px 0 0 blue;
  231. }
  232. 75% {
  233. text-shadow: 1px 0 0 red, -1px 0 0 blue;
  234. }
  235. 76% {
  236. text-shadow: 1px 0 0 red, -1px 0 0 blue;
  237. }
  238. 77% {
  239. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  240. }
  241. 78% {
  242. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  243. }
  244. 79% {
  245. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  246. }
  247. 80% {
  248. text-shadow: -1px 0 0 red, 1px 0 0 blue;
  249. }
  250. 81% {
  251. text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
  252. }
  253. 82% {
  254. text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
  255. }
  256. 83% {
  257. text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
  258. }
  259. 84% {
  260. text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
  261. }
  262. 85% {
  263. text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
  264. }
  265. 86% {
  266. text-shadow: -1px 0 0 red, 1px 0 0 lime;
  267. }
  268. 87% {
  269. text-shadow: -1px 0 0 red, 1px 0 0 lime;
  270. }
  271. 88% {
  272. text-shadow: -1px 0 0 red, 1px 0 0 lime;
  273. }
  274. 89% {
  275. text-shadow: -1px 0 0 red, 1px 0 0 lime;
  276. }
  277. 90% {
  278. text-shadow: -1px 0 0 red, 1px 0 0 lime;
  279. }
  280. 91% {
  281. text-shadow: 60px 0 0 lime, -60px 0 0 blue;
  282. }
  283. 92% {
  284. text-shadow: 0 0 0 lime, 0 0 0 blue;
  285. }
  286. 92% {
  287. text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
  288. }
  289. 93% {
  290. text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
  291. }
  292. 94% {
  293. text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
  294. }
  295. 95% {
  296. text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
  297. }
  298. 96% {
  299. text-shadow: -1px 0 0 blue, 1px 0 0 lime;
  300. }
  301. 97% {
  302. text-shadow: -1px 0 0 blue, 1px 0 0 lime;
  303. }
  304. 98% {
  305. text-shadow: -1px 0 0 blue, 1px 0 0 lime;
  306. }
  307. 99% {
  308. text-shadow: -1px 0 0 blue, 1px 0 0 lime;
  309. }
  310. 100% {
  311. text-shadow: -1px 0 0 blue, 1px 0 0 lime;
  312. }
  313. }
  314. /* Custom */
  315. .go-home {
  316. text-align: center;
  317. }