Pesquisar na Comunidade
Mostrando resultados para as tags ''efeito glitch''.
Atualmente, o índice de pesquisa está sendo processado. Os resultados atuais podem não estar completos.
Encontrado 1 registro
-
Estava sussa navegando pelos CSS antigos que tenho aqui e encontrei esse efeito de glitch. É feito com animações em CSS, funciona bem. É só não usar palavras muito grandes que fica perfeitinho. Código: <!DOCTYPE html><html class=''> <head><script src='//assets.codepen.io/assets/editor/live/console_runner-d1fe8d626b138a1ec40e0f6121de6549.js'></script><script src='//assets.codepen.io/assets/editor/live/events_runner-7cac1e4694e7b2b7a39c26e725e9d7ae.js'></script><script src='//assets.codepen.io/assets/editor/live/css_live_reload_init-bad5f8d322020126e7b4287d497c7efe.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="[Hidden Content]" /> <link rel='stylesheet prefetch' href='//codepen.io/assets/reset/normalize.css'> <style class="cp-pen-styles">@import url([Hidden Content]); html, body { height: 100%; } body { font-family: 'Press Start 2P', cursive; font-size: 16px; font-weight: bold; color: #a5a5ff; background-color: #4242e6; } /* unvisited link */ a:link { color: #FFF; text-decoration: none; } /* visited link */ a:visited { color: #FFF; text-decoration: none; } /* mouse over link */ a:hover { color: #FF00F0; text-decoration: none; } /* selected link */ a:active { color: #4242e6; text-decoration: none; } .center { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; height: 100%; width: 100%; } h1 { display: block; font-size: 3em; margin: 0.6em 0; font-weight: bold; } .glitch { position: relative; margin: 0 auto; background: #4242e6; } .glitch::before, .glitch::after { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-direction: alternate-reverse; animation-direction: alternate-reverse; overflow: hidden; position: absolute; top: 0; clip: rect(0, 900px, 0, 0); content: attr(data-text); } .glitch::after { -webkit-animation-name: glitch-animation; animation-name: glitch-animation; -webkit-animation-duration: 4s; animation-duration: 4s; left: 4px; text-shadow: -1px 0 #ffa800; background: #4242e6; } .glitch::before { -webkit-animation-name: glitch-animation-2; animation-name: glitch-animation-2; -webkit-animation-duration: 6s; animation-duration: 6s; left: -4px; text-shadow: 1px 0 #00d8ff; background: #4242e6; } /* Expanded Animations */ @-webkit-keyframes glitch-animation { 0% { clip: rect(42px, 9999px, 44px, 0); } 5% { clip: rect(12px, 9999px, 59px, 0); } 10% { clip: rect(48px, 9999px, 29px, 0); } 15.0% { clip: rect(42px, 9999px, 73px, 0); } 20% { clip: rect(63px, 9999px, 27px, 0); } 25% { clip: rect(34px, 9999px, 55px, 0); } 30.0% { clip: rect(86px, 9999px, 73px, 0); } 35% { clip: rect(20px, 9999px, 20px, 0); } 40% { clip: rect(26px, 9999px, 60px, 0); } 45% { clip: rect(25px, 9999px, 66px, 0); } 50% { clip: rect(57px, 9999px, 98px, 0); } 55.0% { clip: rect(5px, 9999px, 46px, 0); } 60.0% { clip: rect(82px, 9999px, 31px, 0); } 65% { clip: rect(54px, 9999px, 27px, 0); } 70% { clip: rect(28px, 9999px, 99px, 0); } 75% { clip: rect(45px, 9999px, 69px, 0); } 80% { clip: rect(23px, 9999px, 85px, 0); } 85.0% { clip: rect(54px, 9999px, 84px, 0); } 90% { clip: rect(45px, 9999px, 47px, 0); } 95% { clip: rect(37px, 9999px, 20px, 0); } 100% { clip: rect(4px, 9999px, 91px, 0); } } @keyframes glitch-animation { 0% { clip: rect(42px, 9999px, 44px, 0); } 5% { clip: rect(12px, 9999px, 59px, 0); } 10% { clip: rect(48px, 9999px, 29px, 0); } 15.0% { clip: rect(42px, 9999px, 73px, 0); } 20% { clip: rect(63px, 9999px, 27px, 0); } 25% { clip: rect(34px, 9999px, 55px, 0); } 30.0% { clip: rect(86px, 9999px, 73px, 0); } 35% { clip: rect(20px, 9999px, 20px, 0); } 40% { clip: rect(26px, 9999px, 60px, 0); } 45% { clip: rect(25px, 9999px, 66px, 0); } 50% { clip: rect(57px, 9999px, 98px, 0); } 55.0% { clip: rect(5px, 9999px, 46px, 0); } 60.0% { clip: rect(82px, 9999px, 31px, 0); } 65% { clip: rect(54px, 9999px, 27px, 0); } 70% { clip: rect(28px, 9999px, 99px, 0); } 75% { clip: rect(45px, 9999px, 69px, 0); } 80% { clip: rect(23px, 9999px, 85px, 0); } 85.0% { clip: rect(54px, 9999px, 84px, 0); } 90% { clip: rect(45px, 9999px, 47px, 0); } 95% { clip: rect(37px, 9999px, 20px, 0); } 100% { clip: rect(4px, 9999px, 91px, 0); } } @-webkit-keyframes glitch-animation-2 { 0% { clip: rect(65px, 9999px, 100px, 0); } 5% { clip: rect(52px, 9999px, 74px, 0); } 10% { clip: rect(79px, 9999px, 85px, 0); } 15.0% { clip: rect(75px, 9999px, 5px, 0); } 20% { clip: rect(67px, 9999px, 61px, 0); } 25% { clip: rect(14px, 9999px, 79px, 0); } 30.0% { clip: rect(1px, 9999px, 66px, 0); } 35% { clip: rect(86px, 9999px, 30px, 0); } 40% { clip: rect(23px, 9999px, 98px, 0); } 45% { clip: rect(85px, 9999px, 72px, 0); } 50% { clip: rect(71px, 9999px, 75px, 0); } 55.0% { clip: rect(2px, 9999px, 48px, 0); } 60.0% { clip: rect(30px, 9999px, 16px, 0); } 65% { clip: rect(59px, 9999px, 50px, 0); } 70% { clip: rect(41px, 9999px, 62px, 0); } 75% { clip: rect(2px, 9999px, 82px, 0); } 80% { clip: rect(47px, 9999px, 73px, 0); } 85.0% { clip: rect(3px, 9999px, 27px, 0); } 90% { clip: rect(26px, 9999px, 55px, 0); } 95% { clip: rect(42px, 9999px, 97px, 0); } 100% { clip: rect(38px, 9999px, 49px, 0); } } @keyframes glitch-animation-2 { 0% { clip: rect(65px, 9999px, 100px, 0); } 5% { clip: rect(52px, 9999px, 74px, 0); } 10% { clip: rect(79px, 9999px, 85px, 0); } 15.0% { clip: rect(75px, 9999px, 5px, 0); } 20% { clip: rect(67px, 9999px, 61px, 0); } 25% { clip: rect(14px, 9999px, 79px, 0); } 30.0% { clip: rect(1px, 9999px, 66px, 0); } 35% { clip: rect(86px, 9999px, 30px, 0); } 40% { clip: rect(23px, 9999px, 98px, 0); } 45% { clip: rect(85px, 9999px, 72px, 0); } 50% { clip: rect(71px, 9999px, 75px, 0); } 55.0% { clip: rect(2px, 9999px, 48px, 0); } 60.0% { clip: rect(30px, 9999px, 16px, 0); } 65% { clip: rect(59px, 9999px, 50px, 0); } 70% { clip: rect(41px, 9999px, 62px, 0); } 75% { clip: rect(2px, 9999px, 82px, 0); } 80% { clip: rect(47px, 9999px, 73px, 0); } 85.0% { clip: rect(3px, 9999px, 27px, 0); } 90% { clip: rect(26px, 9999px, 55px, 0); } 95% { clip: rect(42px, 9999px, 97px, 0); } 100% { clip: rect(38px, 9999px, 49px, 0); } } </style></head><body> <main class="center"> <h1> <span class="glitch" data-text="help me"> i'm fine </span> </h1> </main> <title> h3lp m3; </title> </body></html> Prévia online.
