SHARE
TWEET

Untitled

a guest May 26th, 2019 72 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2.  
  3. <html>
  4. <head>
  5. <title>Untitled Document</title>
  6.  
  7. <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  8.  
  9. </head>
  10.  
  11. <body>
  12.  
  13. <div align="center"><img src="https://pre00.deviantart.net/a803/th/pre/i/2015/365/d/4/wolverine___transparent_by_thearrowverse-d9m8ue8.png" width="200"></div>
  14.  
  15.  
  16. <div><h1 data-text="Hack By Wolvoring" align="justify"><span>Hack By Wolvoring</span></h1></div>
  17. <canvas id="canvas"></canvas>
  18. </body>
  19. </html>
  20.  
  21.  
  22.  
  23.  
  24. <style>
  25. body {
  26.     display: flex;
  27.     justify-content: center;
  28.     align-items: center;
  29.     height: 100vh;
  30.     background-color: #000;
  31.     overflow: hidden;
  32. }
  33.  
  34. * {
  35.   margin: 0px;
  36.   padding: 0px;
  37.   border: 0px;
  38. }
  39.  
  40. h1 {
  41.     position: relative;
  42.     font-family: 'Montserrat', Arial, sans-serif;
  43.     font-size: calc(20px + 5vw);
  44.     font-weight: 700;
  45.     color: #fff;
  46.     letter-spacing: 0.02em;
  47.     text-transform: uppercase;
  48.     text-shadow: 0 0 0.15em #1da9cc;
  49.     user-select: none;
  50.     white-space: nowrap;
  51.     filter: blur(0.007em);
  52.     animation: shake 2.5s linear forwards   infinite ;
  53.    
  54. }
  55.  
  56. h1 span {
  57.     position: absolute;
  58.     top: 0;
  59.     left: 0;
  60.     transform: translate(-50%, -50%);
  61.     -webkit-clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
  62.             clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
  63. }
  64.  
  65. h1::before,
  66. h1::after {
  67.     content: attr(data-text);
  68.     position: absolute;
  69.     top: 0;
  70.     left: 0;
  71. }
  72.  
  73. h1::before {
  74.     animation: crack1 2.5s linear forwards;
  75.     -webkit-clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
  76.             clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
  77. }
  78.  
  79. h1::after {
  80.     animation: crack2 2.5s linear forwards;
  81.     -webkit-clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
  82.             clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
  83. }
  84.  
  85. @keyframes shake {
  86.     5%, 15%, 25%, 35%, 55%, 65%, 75%, 95% {
  87.         filter: blur(0.018em);
  88.         transform: translateY(0.018em) rotate(0deg);
  89.     }
  90.  
  91.     10%, 30%, 40%, 50%, 70%, 80%, 90% {
  92.         filter: blur(0.01em);
  93.         transform: translateY(-0.018em) rotate(0deg);
  94.     }
  95.  
  96.     20%, 60% {
  97.         filter: blur(0.03em);
  98.         transform: translate(-0.018em, 0.018em) rotate(0deg);
  99.     }
  100.  
  101.     45%, 85% {
  102.         filter: blur(0.03em);
  103.         transform: translate(0.018em, -0.018em) rotate(0deg);
  104.     }
  105.  
  106.     100% {
  107.         filter: blur(0.007em);
  108.         transform: translate(0) rotate(-0.5deg);
  109.     }
  110. }
  111.  
  112. @keyframes crack1 {
  113.     0%, 95% {
  114.         transform: translate(-50%, -50%);
  115.     }
  116.  
  117.     100% {
  118.         transform: translate(-51%, -48%);
  119.     }
  120. }
  121.  
  122. @keyframes crack2 {
  123.     0%, 95% {
  124.         transform: translate(-50%, -50%);
  125.     }
  126.  
  127.     100% {
  128.         transform: translate(-49%, -53%);
  129.     }
  130. }
  131. </style>
RAW Paste Data
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
 
Top