Created
December 27, 2017 03:48
-
-
Save tavinus/0a459b5d69b2a2c577ee07371b74264f to your computer and use it in GitHub Desktop.
redirecionando.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style> | |
| @import url(//fonts.googleapis.com/css?family=Open+Sans:300); | |
| body { | |
| background-color: #f1c40f; | |
| overflow: hidden; | |
| } | |
| h2 { | |
| position: absolute; | |
| font-family: 'Open Sans'; | |
| font-weight: 900; | |
| font-size: 16px; | |
| text-transform: uppercase; | |
| left: 50%; | |
| top: 63%; | |
| margin-left: 4px; | |
| } | |
| h1 { | |
| position: absolute; | |
| font-family: 'Open Sans'; | |
| font-weight: 600; | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| left: 50%; | |
| top: 58%; | |
| margin-left: -42px; | |
| } | |
| .body { | |
| position: absolute; | |
| top: 50%; | |
| margin-left: -50px; | |
| left: 50%; | |
| animation: speeder .4s linear infinite; | |
| } | |
| .body > span { | |
| height: 5px; | |
| width: 35px; | |
| background: #000; | |
| position: absolute; | |
| top: -19px; | |
| left: 60px; | |
| border-radius: 2px 10px 1px 0; | |
| } | |
| .base span { | |
| position: absolute; | |
| width: 0; | |
| height: 0; | |
| border-top: 6px solid transparent; | |
| border-right: 100px solid #000; | |
| border-bottom: 6px solid transparent; | |
| } | |
| .base span:before { | |
| content: ""; | |
| height: 22px; | |
| width: 22px; | |
| border-radius: 50%; | |
| background: #000; | |
| position: absolute; | |
| right: -110px; | |
| top: -16px; | |
| } | |
| .base span:after { | |
| content: ""; | |
| position: absolute; | |
| width: 0; | |
| height: 0; | |
| border-top: 0 solid transparent; | |
| border-right: 55px solid #000; | |
| border-bottom: 16px solid transparent; | |
| top: -16px; | |
| right: -98px; | |
| } | |
| .face { | |
| position: absolute; | |
| height: 12px; | |
| width: 20px; | |
| background: #000; | |
| border-radius: 20px 20px 0 0; | |
| transform: rotate(-40deg); | |
| right: -125px; | |
| top: -15px; | |
| } | |
| .face:after { | |
| content: ""; | |
| height: 12px; | |
| width: 12px; | |
| background: #000; | |
| right: 4px; | |
| top: 7px; | |
| position: absolute; | |
| transform: rotate(40deg); | |
| transform-origin: 50% 50%; | |
| border-radius: 0 0 0 2px; | |
| } | |
| .body > span > span:nth-child(1), | |
| .body > span > span:nth-child(2), | |
| .body > span > span:nth-child(3), | |
| .body > span > span:nth-child(4) { | |
| width: 30px; | |
| height: 1px; | |
| background: #000; | |
| position: absolute; | |
| animation: fazer1 .2s linear infinite; | |
| } | |
| .body > span > span:nth-child(2) { | |
| top: 3px; | |
| animation: fazer2 .4s linear infinite; | |
| } | |
| .body > span > span:nth-child(3) { | |
| top: 1px; | |
| animation: fazer3 .4s linear infinite; | |
| animation-delay: -1s; | |
| } | |
| .body > span > span:nth-child(4) { | |
| top: 4px; | |
| animation: fazer4 1s linear infinite; | |
| animation-delay: -1s; | |
| } | |
| @keyframes fazer1 { | |
| 0% { | |
| left: 0; | |
| } | |
| 100% { | |
| left: -80px; | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes fazer2 { | |
| 0% { | |
| left: 0; | |
| } | |
| 100% { | |
| left: -100px; | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes fazer3 { | |
| 0% { | |
| left: 0; | |
| } | |
| 100% { | |
| left: -50px; | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes fazer4 { | |
| 0% { | |
| left: 0; | |
| } | |
| 100% { | |
| left: -150px; | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes speeder { | |
| 0% { | |
| transform: translate(2px, 1px) rotate(0deg); | |
| } | |
| 10% { | |
| transform: translate(-1px, -3px) rotate(-1deg); | |
| } | |
| 20% { | |
| transform: translate(-2px, 0px) rotate(1deg); | |
| } | |
| 30% { | |
| transform: translate(1px, 2px) rotate(0deg); | |
| } | |
| 40% { | |
| transform: translate(1px, -1px) rotate(1deg); | |
| } | |
| 50% { | |
| transform: translate(-1px, 3px) rotate(-1deg); | |
| } | |
| 60% { | |
| transform: translate(-1px, 1px) rotate(0deg); | |
| } | |
| 70% { | |
| transform: translate(3px, 1px) rotate(-1deg); | |
| } | |
| 80% { | |
| transform: translate(-2px, -1px) rotate(1deg); | |
| } | |
| 90% { | |
| transform: translate(2px, 1px) rotate(0deg); | |
| } | |
| 100% { | |
| transform: translate(1px, -2px) rotate(-1deg); | |
| } | |
| } | |
| .longfazers { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .longfazers span { | |
| position: absolute; | |
| height: 2px; | |
| width: 20%; | |
| background: #000; | |
| } | |
| .longfazers span:nth-child(1) { | |
| top: 20%; | |
| animation: lf .6s linear infinite; | |
| animation-delay: -5s; | |
| } | |
| .longfazers span:nth-child(2) { | |
| top: 40%; | |
| animation: lf2 .8s linear infinite; | |
| animation-delay: -1s; | |
| } | |
| .longfazers span:nth-child(3) { | |
| top: 60%; | |
| animation: lf3 .6s linear infinite; | |
| } | |
| .longfazers span:nth-child(4) { | |
| top: 80%; | |
| animation: lf4 .5s linear infinite; | |
| animation-delay: -3s; | |
| } | |
| @keyframes lf { | |
| 0% { | |
| left: 200%; | |
| } | |
| 100% { | |
| left: -200%; | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes lf2 { | |
| 0% { | |
| left: 200%; | |
| } | |
| 100% { | |
| left: -200%; | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes lf3 { | |
| 0% { | |
| left: 200%; | |
| } | |
| 100% { | |
| left: -100%; | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes lf4 { | |
| 0% { | |
| left: 200%; | |
| } | |
| 100% { | |
| left: -100%; | |
| opacity: 0; | |
| } | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| function countdown() { | |
| var i = document.getElementById('counter'); | |
| if (parseInt(i.innerHTML)<=0) { | |
| location.href = 'https://google.com'; | |
| } | |
| i.innerHTML = parseInt(i.innerHTML)-1; | |
| i.innerHTML = (i.innerHTML < 0) ? 0 : i.innerHTML; | |
| } | |
| setInterval(function(){ countdown(); },1000); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="body"> | |
| <span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </span> | |
| <div class="base"> | |
| <span></span> | |
| <div class="face"></div> | |
| </div> | |
| </div> | |
| <div class="longfazers"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <h1>Redirecionando</h1> | |
| <h2 id='counter'>20<h2> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I forgot where I found the codes for this, feel free to remind me on the comments below so I can add proper credits.
This is in portuguese, adjust the CSS if you change the text.