API tools faq
paste
Advertisement
Guest User

Showoff

a guest
Nov 17th, 2019
105
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.55 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en" >
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>VHS text</title>
  7.  
  8.  
  9.  
  10. <link rel="stylesheet" href="css/style.css">
  11.  
  12.  
  13. </head>
  14.  
  15. <body>
  16.  
  17. <link href='https://fonts.googleapis.com/css?family=Bungee' rel='stylesheet' type='text/css'>
  18. <div id='root'>
  19. <div data-text='Hacked by CowoNolep' id='text'>
  20. Hacked by Show0ff
  21. </div>di
  22. </div>
  23.  
  24. <style>
  25. * {
  26. box-sizing: border-box;
  27. -moz-box-sizing: border-box;
  28. -webkit-box-sizing: border-box;
  29. }
  30.  
  31. body {
  32. background: #111;
  33. font-family: 'Bungee', cursive;
  34. text-transform: uppercase;
  35. font-size: 50px;
  36. font-weight: bold;
  37. margin: 0;
  38. }
  39.  
  40. #root {
  41. position: absolute;
  42. top: 50%;
  43. -webkit-transform: translateY(-50%) translateX(-50%);
  44. -moz-transform: translateY(-50%) translateX(-50%);
  45. -ms-transform: translateY(-50%) translateX(-50%);
  46. -o-transform: translateY(-50%) translateX(-50%);
  47. transform: translateY(-50%) translateX(-50%);
  48. left: 50%;
  49. }
  50.  
  51. #text {
  52. top: 0;
  53. left: -6px;
  54. color: red;
  55. mix-blend-mode: screen;
  56. position: relative;
  57. white-space: nowrap;
  58. -webkit-filter: blur(1px);
  59. -moz-filter: blur(1px);
  60. filter: blur(1px);
  61. -webkit-animation: skew 2s infinite, flash .04s infinite;
  62. -moz-animation: skew 2s infinite, flash .04s infinite;
  63. -o-animation: skew 2s infinite, flash .04s infinite;
  64. animation: skew 2s infinite, flash .04s infinite;
  65. }
  66. #text:after, #text:before {
  67. content: attr(data-text);
  68. position: absolute;
  69. mix-blend-mode: screen;
  70. }
  71. #text:after {
  72. top: 0;
  73. left: 6px;
  74. color: blue;
  75. -webkit-animation: move 1.5s infinite;
  76. -moz-animation: move 1.5s infinite;
  77. -o-animation: move 1.5s infinite;
  78. animation: move 1.5s infinite;
  79. }
  80. #text:before {
  81. top: -2.4px;
  82. left: 3.6px;
  83. color: limegreen;
  84. }
  85.  
  86. .line {
  87. position: absolute;
  88. left: 0;
  89. right: 0;
  90. width: 100%;
  91. height: 1px;
  92. background: blue;
  93. mix-blend-mode: screen;
  94. -webkit-filter: blur(1px);
  95. -moz-filter: blur(1px);
  96. filter: blur(1px);
  97. }
  98. .line:after, .line:before {
  99. content: '';
  100. position: absolute;
  101. left: 0;
  102. width: 100%;
  103. height: 1px;
  104. mix-blend-mode: screen;
  105. }
  106. .line:after {
  107. top: 2px;
  108. background: red;
  109. }
  110. .line:before {
  111. top: -2px;
  112. background: limegreen;
  113. }
  114.  
  115. @-webkit-keyframes skew {
  116. 0% {
  117. -webkit-transform: none;
  118. -moz-transform: none;
  119. -ms-transform: none;
  120. -o-transform: none;
  121. transform: none;
  122. }
  123. 30% {
  124. -webkit-transform: none;
  125. -moz-transform: none;
  126. -ms-transform: none;
  127. -o-transform: none;
  128. transform: none;
  129. }
  130. 30.2% {
  131. -webkit-transform: skewX(50deg);
  132. -moz-transform: skewX(50deg);
  133. -ms-transform: skewX(50deg);
  134. -o-transform: skewX(50deg);
  135. transform: skewX(50deg);
  136. }
  137. 30.4% {
  138. -webkit-transform: skewX(-50deg);
  139. -moz-transform: skewX(-50deg);
  140. -ms-transform: skewX(-50deg);
  141. -o-transform: skewX(-50deg);
  142. transform: skewX(-50deg);
  143. }
  144. 31% {
  145. -webkit-transform: none;
  146. -moz-transform: none;
  147. -ms-transform: none;
  148. -o-transform: none;
  149. transform: none;
  150. }
  151. }
  152. @-moz-keyframes skew {
  153. 0% {
  154. -webkit-transform: none;
  155. -moz-transform: none;
  156. -ms-transform: none;
  157. -o-transform: none;
  158. transform: none;
  159. }
  160. 30% {
  161. -webkit-transform: none;
  162. -moz-transform: none;
  163. -ms-transform: none;
  164. -o-transform: none;
  165. transform: none;
  166. }
  167. 30.2% {
  168. -webkit-transform: skewX(50deg);
  169. -moz-transform: skewX(50deg);
  170. -ms-transform: skewX(50deg);
  171. -o-transform: skewX(50deg);
  172. transform: skewX(50deg);
  173. }
  174. 30.4% {
  175. -webkit-transform: skewX(-50deg);
  176. -moz-transform: skewX(-50deg);
  177. -ms-transform: skewX(-50deg);
  178. -o-transform: skewX(-50deg);
  179. transform: skewX(-50deg);
  180. }
  181. 31% {
  182. -webkit-transform: none;
  183. -moz-transform: none;
  184. -ms-transform: none;
  185. -o-transform: none;
  186. transform: none;
  187. }
  188. }
  189. @-o-keyframes skew {
  190. 0% {
  191. -webkit-transform: none;
  192. -moz-transform: none;
  193. -ms-transform: none;
  194. -o-transform: none;
  195. transform: none;
  196. }
  197. 30% {
  198. -webkit-transform: none;
  199. -moz-transform: none;
  200. -ms-transform: none;
  201. -o-transform: none;
  202. transform: none;
  203. }
  204. 30.2% {
  205. -webkit-transform: skewX(50deg);
  206. -moz-transform: skewX(50deg);
  207. -ms-transform: skewX(50deg);
  208. -o-transform: skewX(50deg);
  209. transform: skewX(50deg);
  210. }
  211. 30.4% {
  212. -webkit-transform: skewX(-50deg);
  213. -moz-transform: skewX(-50deg);
  214. -ms-transform: skewX(-50deg);
  215. -o-transform: skewX(-50deg);
  216. transform: skewX(-50deg);
  217. }
  218. 31% {
  219. -webkit-transform: none;
  220. -moz-transform: none;
  221. -ms-transform: none;
  222. -o-transform: none;
  223. transform: none;
  224. }
  225. }
  226. @keyframes skew {
  227. 0% {
  228. -webkit-transform: none;
  229. -moz-transform: none;
  230. -ms-transform: none;
  231. -o-transform: none;
  232. transform: none;
  233. }
  234. 30% {
  235. -webkit-transform: none;
  236. -moz-transform: none;
  237. -ms-transform: none;
  238. -o-transform: none;
  239. transform: none;
  240. }
  241. 30.2% {
  242. -webkit-transform: skewX(50deg);
  243. -moz-transform: skewX(50deg);
  244. -ms-transform: skewX(50deg);
  245. -o-transform: skewX(50deg);
  246. transform: skewX(50deg);
  247. }
  248. 30.4% {
  249. -webkit-transform: skewX(-50deg);
  250. -moz-transform: skewX(-50deg);
  251. -ms-transform: skewX(-50deg);
  252. -o-transform: skewX(-50deg);
  253. transform: skewX(-50deg);
  254. }
  255. 31% {
  256. -webkit-transform: none;
  257. -moz-transform: none;
  258. -ms-transform: none;
  259. -o-transform: none;
  260. transform: none;
  261. }
  262. }
  263. @-webkit-keyframes move {
  264. 0% {
  265. -webkit-transform: none;
  266. -moz-transform: none;
  267. -ms-transform: none;
  268. -o-transform: none;
  269. transform: none;
  270. }
  271. 30% {
  272. -webkit-transform: none;
  273. -moz-transform: none;
  274. -ms-transform: none;
  275. -o-transform: none;
  276. transform: none;
  277. }
  278. 31% {
  279. -webkit-transform: translateX(-6px);
  280. -moz-transform: translateX(-6px);
  281. -ms-transform: translateX(-6px);
  282. -o-transform: translateX(-6px);
  283. transform: translateX(-6px);
  284. }
  285. 33% {
  286. -webkit-transform: none;
  287. -moz-transform: none;
  288. -ms-transform: none;
  289. -o-transform: none;
  290. transform: none;
  291. }
  292. 98% {
  293. -webkit-transform: none;
  294. -moz-transform: none;
  295. -ms-transform: none;
  296. -o-transform: none;
  297. transform: none;
  298. }
  299. 100% {
  300. -webkit-transform: translateX(6px);
  301. -moz-transform: translateX(6px);
  302. -ms-transform: translateX(6px);
  303. -o-transform: translateX(6px);
  304. transform: translateX(6px);
  305. }
  306. }
  307. @-moz-keyframes move {
  308. 0% {
  309. -webkit-transform: none;
  310. -moz-transform: none;
  311. -ms-transform: none;
  312. -o-transform: none;
  313. transform: none;
  314. }
  315. 30% {
  316. -webkit-transform: none;
  317. -moz-transform: none;
  318. -ms-transform: none;
  319. -o-transform: none;
  320. transform: none;
  321. }
  322. 31% {
  323. -webkit-transform: translateX(-6px);
  324. -moz-transform: translateX(-6px);
  325. -ms-transform: translateX(-6px);
  326. -o-transform: translateX(-6px);
  327. transform: translateX(-6px);
  328. }
  329. 33% {
  330. -webkit-transform: none;
  331. -moz-transform: none;
  332. -ms-transform: none;
  333. -o-transform: none;
  334. transform: none;
  335. }
  336. 98% {
  337. -webkit-transform: none;
  338. -moz-transform: none;
  339. -ms-transform: none;
  340. -o-transform: none;
  341. transform: none;
  342. }
  343. 100% {
  344. -webkit-transform: translateX(6px);
  345. -moz-transform: translateX(6px);
  346. -ms-transform: translateX(6px);
  347. -o-transform: translateX(6px);
  348. transform: translateX(6px);
  349. }
  350. }
  351. @-o-keyframes move {
  352. 0% {
  353. -webkit-transform: none;
  354. -moz-transform: none;
  355. -ms-transform: none;
  356. -o-transform: none;
  357. transform: none;
  358. }
  359. 30% {
  360. -webkit-transform: none;
  361. -moz-transform: none;
  362. -ms-transform: none;
  363. -o-transform: none;
  364. transform: none;
  365. }
  366. 31% {
  367. -webkit-transform: translateX(-6px);
  368. -moz-transform: translateX(-6px);
  369. -ms-transform: translateX(-6px);
  370. -o-transform: translateX(-6px);
  371. transform: translateX(-6px);
  372. }
  373. 33% {
  374. -webkit-transform: none;
  375. -moz-transform: none;
  376. -ms-transform: none;
  377. -o-transform: none;
  378. transform: none;
  379. }
  380. 98% {
  381. -webkit-transform: none;
  382. -moz-transform: none;
  383. -ms-transform: none;
  384. -o-transform: none;
  385. transform: none;
  386. }
  387. 100% {
  388. -webkit-transform: translateX(6px);
  389. -moz-transform: translateX(6px);
  390. -ms-transform: translateX(6px);
  391. -o-transform: translateX(6px);
  392. transform: translateX(6px);
  393. }
  394. }
  395. @keyframes move {
  396. 0% {
  397. -webkit-transform: none;
  398. -moz-transform: none;
  399. -ms-transform: none;
  400. -o-transform: none;
  401. transform: none;
  402. }
  403. 30% {
  404. -webkit-transform: none;
  405. -moz-transform: none;
  406. -ms-transform: none;
  407. -o-transform: none;
  408. transform: none;
  409. }
  410. 31% {
  411. -webkit-transform: translateX(-6px);
  412. -moz-transform: translateX(-6px);
  413. -ms-transform: translateX(-6px);
  414. -o-transform: translateX(-6px);
  415. transform: translateX(-6px);
  416. }
  417. 33% {
  418. -webkit-transform: none;
  419. -moz-transform: none;
  420. -ms-transform: none;
  421. -o-transform: none;
  422. transform: none;
  423. }
  424. 98% {
  425. -webkit-transform: none;
  426. -moz-transform: none;
  427. -ms-transform: none;
  428. -o-transform: none;
  429. transform: none;
  430. }
  431. 100% {
  432. -webkit-transform: translateX(6px);
  433. -moz-transform: translateX(6px);
  434. -ms-transform: translateX(6px);
  435. -o-transform: translateX(6px);
  436. transform: translateX(6px);
  437. }
  438. }
  439. @-webkit-keyframes flash {
  440. 0% {
  441. opacity: 1;
  442. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  443. filter: alpha(opacity=100);
  444. }
  445. 50% {
  446. opacity: 0.5;
  447. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  448. filter: alpha(opacity=50);
  449. }
  450. }
  451. @-moz-keyframes flash {
  452. 0% {
  453. opacity: 1;
  454. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  455. filter: alpha(opacity=100);
  456. }
  457. 50% {
  458. opacity: 0.5;
  459. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  460. filter: alpha(opacity=50);
  461. }
  462. }
  463. @-o-keyframes flash {
  464. 0% {
  465. opacity: 1;
  466. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  467. filter: alpha(opacity=100);
  468. }
  469. 50% {
  470. opacity: 0.5;
  471. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  472. filter: alpha(opacity=50);
  473. }
  474. }
  475. @keyframes flash {
  476. 0% {
  477. opacity: 1;
  478. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  479. filter: alpha(opacity=100);
  480. }
  481. 50% {
  482. opacity: 0.5;
  483. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  484. filter: alpha(opacity=50);
  485. }
  486. }
  487. @-webkit-keyframes lines {
  488. 0% {
  489. opacity: 0.1;
  490. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
  491. filter: alpha(opacity=10);
  492. }
  493. 50% {
  494. opacity: 1;
  495. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  496. filter: alpha(opacity=100);
  497. }
  498. }
  499. @-moz-keyframes lines {
  500. 0% {
  501. opacity: 0.1;
  502. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
  503. filter: alpha(opacity=10);
  504. }
  505. 50% {
  506. opacity: 1;
  507. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  508. filter: alpha(opacity=100);
  509. }
  510. }
  511. @-o-keyframes lines {
  512. 0% {
  513. opacity: 0.1;
  514. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
  515. filter: alpha(opacity=10);
  516. }
  517. 50% {
  518. opacity: 1;
  519. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  520. filter: alpha(opacity=100);
  521. }
  522. }
  523. @keyframes lines {
  524. 0% {
  525. opacity: 0.1;
  526. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
  527. filter: alpha(opacity=10);
  528. }
  529. 50% {
  530. opacity: 1;
  531. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  532. filter: alpha(opacity=100);
  533. }
  534. }
  535. </style>
  536.  
  537. <script type="text/javascript">
  538. drawLines();
  539.  
  540. function getHeight(){
  541. return window.innerHeight
  542. || document.documentElement.clientHeight
  543. || document.body.clientHeight;
  544. }
  545.  
  546. function drawLines(){
  547. var lines = document.getElementsByClassName('line');
  548. if(lines.length) {
  549. for (var i = 0; i < lines.length; i++) {
  550. document.body.removeChild(lines[i]);
  551. }
  552. }
  553.  
  554. var height = getHeight();
  555. for(i=0; i< height/10; i++){
  556. var line = document.createElement("div");
  557. line.className = "line line-" + i;
  558. line.style.top = i * 10 + "px";
  559. var time = Math.random() * 5;
  560. line.style.animation = "lines " + time + "s infinite";
  561. document.body.appendChild(line) ;
  562. }
  563. }
  564.  
  565. window.onresize = function(event) {
  566. drawLines();
  567. };
  568. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!