Advertisement
Guest User

Untitled

a guest
Oct 26th, 2016
65
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.70 KB | None | 0 0
  1. @-moz-keyframes glitch {
  2. 0% {
  3. -moz-transform: skew(2deg);
  4. transform: skew(2deg);
  5. }
  6. 6.66667% {
  7. -moz-transform: skew(2deg);
  8. transform: skew(2deg);
  9. }
  10. 13.33333% {
  11. -moz-transform: skew(-16deg);
  12. transform: skew(-16deg);
  13. }
  14. 20% {
  15. -moz-transform: skew(7deg);
  16. transform: skew(7deg);
  17. }
  18. 26.66667% {
  19. -moz-transform: skew(-6deg);
  20. transform: skew(-6deg);
  21. }
  22. 33.33333% {
  23. -moz-transform: skew(10deg);
  24. transform: skew(10deg);
  25. }
  26. 40% {
  27. -moz-transform: skew(-3deg);
  28. transform: skew(-3deg);
  29. }
  30. 46.66667% {
  31. -moz-transform: skew(-2deg);
  32. transform: skew(-2deg);
  33. }
  34. 53.33333% {
  35. -moz-transform: skew(-3deg);
  36. transform: skew(-3deg);
  37. }
  38. 60% {
  39. -moz-transform: skew(-17deg);
  40. transform: skew(-17deg);
  41. }
  42. 66.66667% {
  43. -moz-transform: skew(4deg);
  44. transform: skew(4deg);
  45. }
  46. 73.33333% {
  47. -moz-transform: skew(9deg);
  48. transform: skew(9deg);
  49. }
  50. 80% {
  51. -moz-transform: skew(8deg);
  52. transform: skew(8deg);
  53. }
  54. 86.66667% {
  55. -moz-transform: skew(-9deg);
  56. transform: skew(-9deg);
  57. }
  58. 93.33333% {
  59. -moz-transform: skew(-10deg);
  60. transform: skew(-10deg);
  61. }
  62. }
  63. @-webkit-keyframes glitch {
  64. 0% {
  65. -webkit-transform: skew(7deg);
  66. transform: skew(7deg);
  67. }
  68. 6.66667% {
  69. -webkit-transform: skew(-1deg);
  70. transform: skew(-1deg);
  71. }
  72. 13.33333% {
  73. -webkit-transform: skew(1deg);
  74. transform: skew(1deg);
  75. }
  76. 20% {
  77. -webkit-transform: skew(13deg);
  78. transform: skew(13deg);
  79. }
  80. 26.66667% {
  81. -webkit-transform: skew(-16deg);
  82. transform: skew(-16deg);
  83. }
  84. 33.33333% {
  85. -webkit-transform: skew(-14deg);
  86. transform: skew(-14deg);
  87. }
  88. 40% {
  89. -webkit-transform: skew(9deg);
  90. transform: skew(9deg);
  91. }
  92. 46.66667% {
  93. -webkit-transform: skew(-1deg);
  94. transform: skew(-1deg);
  95. }
  96. 53.33333% {
  97. -webkit-transform: skew(16deg);
  98. transform: skew(16deg);
  99. }
  100. 60% {
  101. -webkit-transform: skew(-18deg);
  102. transform: skew(-18deg);
  103. }
  104. 66.66667% {
  105. -webkit-transform: skew(20deg);
  106. transform: skew(20deg);
  107. }
  108. 73.33333% {
  109. -webkit-transform: skew(-2deg);
  110. transform: skew(-2deg);
  111. }
  112. 80% {
  113. -webkit-transform: skew(18deg);
  114. transform: skew(18deg);
  115. }
  116. 86.66667% {
  117. -webkit-transform: skew(5deg);
  118. transform: skew(5deg);
  119. }
  120. 93.33333% {
  121. -webkit-transform: skew(-18deg);
  122. transform: skew(-18deg);
  123. }
  124. }
  125. @keyframes glitch {
  126. 0% {
  127. -moz-transform: skew(-19deg);
  128. -ms-transform: skew(-19deg);
  129. -webkit-transform: skew(-19deg);
  130. transform: skew(-19deg);
  131. }
  132. 6.66667% {
  133. -moz-transform: skew(1deg);
  134. -ms-transform: skew(1deg);
  135. -webkit-transform: skew(1deg);
  136. transform: skew(1deg);
  137. }
  138. 13.33333% {
  139. -moz-transform: skew(-18deg);
  140. -ms-transform: skew(-18deg);
  141. -webkit-transform: skew(-18deg);
  142. transform: skew(-18deg);
  143. }
  144. 20% {
  145. -moz-transform: skew(-2deg);
  146. -ms-transform: skew(-2deg);
  147. -webkit-transform: skew(-2deg);
  148. transform: skew(-2deg);
  149. }
  150. 26.66667% {
  151. -moz-transform: skew(16deg);
  152. -ms-transform: skew(16deg);
  153. -webkit-transform: skew(16deg);
  154. transform: skew(16deg);
  155. }
  156. 33.33333% {
  157. -moz-transform: skew(-8deg);
  158. -ms-transform: skew(-8deg);
  159. -webkit-transform: skew(-8deg);
  160. transform: skew(-8deg);
  161. }
  162. 40% {
  163. -moz-transform: skew(11deg);
  164. -ms-transform: skew(11deg);
  165. -webkit-transform: skew(11deg);
  166. transform: skew(11deg);
  167. }
  168. 46.66667% {
  169. -moz-transform: skew(-9deg);
  170. -ms-transform: skew(-9deg);
  171. -webkit-transform: skew(-9deg);
  172. transform: skew(-9deg);
  173. }
  174. 53.33333% {
  175. -moz-transform: skew(19deg);
  176. -ms-transform: skew(19deg);
  177. -webkit-transform: skew(19deg);
  178. transform: skew(19deg);
  179. }
  180. 60% {
  181. -moz-transform: skew(4deg);
  182. -ms-transform: skew(4deg);
  183. -webkit-transform: skew(4deg);
  184. transform: skew(4deg);
  185. }
  186. 66.66667% {
  187. -moz-transform: skew(18deg);
  188. -ms-transform: skew(18deg);
  189. -webkit-transform: skew(18deg);
  190. transform: skew(18deg);
  191. }
  192. 73.33333% {
  193. -moz-transform: skew(12deg);
  194. -ms-transform: skew(12deg);
  195. -webkit-transform: skew(12deg);
  196. transform: skew(12deg);
  197. }
  198. 80% {
  199. -moz-transform: skew(-12deg);
  200. -ms-transform: skew(-12deg);
  201. -webkit-transform: skew(-12deg);
  202. transform: skew(-12deg);
  203. }
  204. 86.66667% {
  205. -moz-transform: skew(11deg);
  206. -ms-transform: skew(11deg);
  207. -webkit-transform: skew(11deg);
  208. transform: skew(11deg);
  209. }
  210. 93.33333% {
  211. -moz-transform: skew(11deg);
  212. -ms-transform: skew(11deg);
  213. -webkit-transform: skew(11deg);
  214. transform: skew(11deg);
  215. }
  216. }
  217. @-moz-keyframes noise {
  218. 0% {
  219. background-position: 73px 99px;
  220. }
  221. 10% {
  222. background-position: 73px 8px;
  223. }
  224. 20% {
  225. background-position: 27px -9px;
  226. }
  227. 30% {
  228. background-position: 9px -97px;
  229. }
  230. 40% {
  231. background-position: 73px -4px;
  232. }
  233. 50% {
  234. background-position: -65px -43px;
  235. }
  236. 60% {
  237. background-position: -83px -30px;
  238. }
  239. 70% {
  240. background-position: 17px -94px;
  241. }
  242. 80% {
  243. background-position: 95px 53px;
  244. }
  245. 90% {
  246. background-position: -68px -61px;
  247. }
  248. }
  249. @-webkit-keyframes noise {
  250. 0% {
  251. background-position: 44px -50px;
  252. }
  253. 10% {
  254. background-position: -11px 81px;
  255. }
  256. 20% {
  257. background-position: 29px -99px;
  258. }
  259. 30% {
  260. background-position: -27px 5px;
  261. }
  262. 40% {
  263. background-position: -67px -91px;
  264. }
  265. 50% {
  266. background-position: 91px -5px;
  267. }
  268. 60% {
  269. background-position: 7px -47px;
  270. }
  271. 70% {
  272. background-position: -47px -30px;
  273. }
  274. 80% {
  275. background-position: -57px 47px;
  276. }
  277. 90% {
  278. background-position: 78px 87px;
  279. }
  280. }
  281. @keyframes noise {
  282. 0% {
  283. background-position: -10px -67px;
  284. }
  285. 10% {
  286. background-position: 33px 2px;
  287. }
  288. 20% {
  289. background-position: 94px 52px;
  290. }
  291. 30% {
  292. background-position: 57px -13px;
  293. }
  294. 40% {
  295. background-position: 83px 50px;
  296. }
  297. 50% {
  298. background-position: -2px 93px;
  299. }
  300. 60% {
  301. background-position: -43px -96px;
  302. }
  303. 70% {
  304. background-position: 18px 52px;
  305. }
  306. 80% {
  307. background-position: -39px -11px;
  308. }
  309. 90% {
  310. background-position: -9px -34px;
  311. }
  312. }
  313. @-moz-keyframes bar {
  314. 0% {
  315. height: 111px;
  316. top: 75%;
  317. opacity: 0.72;
  318. }
  319. 10% {
  320. height: 126px;
  321. top: 68%;
  322. opacity: 0.63;
  323. }
  324. 20% {
  325. height: 517px;
  326. top: 74%;
  327. opacity: 0.14;
  328. }
  329. 30% {
  330. height: 358px;
  331. top: 73%;
  332. opacity: 0.03;
  333. }
  334. 40% {
  335. height: 202px;
  336. top: 47%;
  337. opacity: 0.74;
  338. }
  339. 50% {
  340. height: 223px;
  341. top: 87%;
  342. opacity: 0.05;
  343. }
  344. 60% {
  345. height: 448px;
  346. top: 54%;
  347. opacity: 0.14;
  348. }
  349. 70% {
  350. height: 447px;
  351. top: 10%;
  352. opacity: 0.37;
  353. }
  354. 80% {
  355. height: 507px;
  356. top: 67%;
  357. opacity: 0.12;
  358. }
  359. 90% {
  360. height: 513px;
  361. top: 12%;
  362. opacity: 0.65;
  363. }
  364. }
  365. @-webkit-keyframes bar {
  366. 0% {
  367. height: 576px;
  368. top: 5%;
  369. opacity: 0.37;
  370. }
  371. 10% {
  372. height: 303px;
  373. top: 38%;
  374. opacity: 0.16;
  375. }
  376. 20% {
  377. height: 195px;
  378. top: 13%;
  379. opacity: 0.71;
  380. }
  381. 30% {
  382. height: 574px;
  383. top: 88%;
  384. opacity: 0.39;
  385. }
  386. 40% {
  387. height: 472px;
  388. top: 55%;
  389. opacity: 0.08;
  390. }
  391. 50% {
  392. height: 105px;
  393. top: 85%;
  394. opacity: 0.59;
  395. }
  396. 60% {
  397. height: 55px;
  398. top: 66%;
  399. opacity: 0.09;
  400. }
  401. 70% {
  402. height: 348px;
  403. top: 66%;
  404. opacity: 0.25;
  405. }
  406. 80% {
  407. height: 46px;
  408. top: 89%;
  409. opacity: 0.35;
  410. }
  411. 90% {
  412. height: 600px;
  413. top: 58%;
  414. opacity: 0.24;
  415. }
  416. }
  417. @keyframes bar {
  418. 0% {
  419. height: 438px;
  420. top: 100%;
  421. opacity: 0.34;
  422. }
  423. 10% {
  424. height: 232px;
  425. top: 21%;
  426. opacity: 0.75;
  427. }
  428. 20% {
  429. height: 509px;
  430. top: 27%;
  431. opacity: 0.11;
  432. }
  433. 30% {
  434. height: 330px;
  435. top: 82%;
  436. opacity: 0.55;
  437. }
  438. 40% {
  439. height: 144px;
  440. top: 89%;
  441. opacity: 0.1;
  442. }
  443. 50% {
  444. height: 414px;
  445. top: 32%;
  446. opacity: 0.64;
  447. }
  448. 60% {
  449. height: 200px;
  450. top: 37%;
  451. opacity: 0.45;
  452. }
  453. 70% {
  454. height: 169px;
  455. top: 12%;
  456. opacity: 0.14;
  457. }
  458. 80% {
  459. height: 291px;
  460. top: 7%;
  461. opacity: 0.62;
  462. }
  463. 90% {
  464. height: 306px;
  465. top: 39%;
  466. opacity: 0.3;
  467. }
  468. }
  469. .glitch {
  470. cursor: default;
  471. position: absolute;
  472. left: 0;
  473. top: 0;
  474. right: 0;
  475. bottom: 0;
  476. color: #fff;
  477. text-align: center;
  478. font: 12vw "Jolly Lodger", helvetica, sans-serif;
  479. background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);
  480. text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
  481. -moz-animation: noise 0.3s infinite;
  482. -webkit-animation: noise 0.3s infinite;
  483. animation: noise 0.3s infinite;
  484. transition: opacity .3s ease-in;
  485. }
  486. .glitch:before {
  487. content: "";
  488. display: inline-block;
  489. vertical-align: middle;
  490. height: 100%;
  491. }
  492. .glitch:after {
  493. content: "";
  494. display: block;
  495. position: absolute;
  496. left: 0;
  497. right: 0;
  498. background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=40);
  499. -moz-animation: bar 0.5s infinite;
  500. -webkit-animation: bar 0.5s infinite;
  501. animation: bar 0.5s infinite;
  502. }
  503. .glitch > span {
  504. display: inline-block;
  505. vertical-align: middle;
  506. position: relative;
  507. z-index: 1;
  508. -moz-animation: glitch 3s infinite alternate;
  509. -webkit-animation: glitch 3s infinite alternate;
  510. animation: glitch 3s infinite alternate;
  511. }
  512.  
  513. .facebook-name {
  514. opacity: 0;
  515. }
  516. .reveal .facebook-name {
  517. opacity: 1;
  518. }
  519. .reveal .hashtag {
  520. opacity: 0;
  521. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement