CSS
【CSS】グリッチエフェクトを実装するGlitch Effect CSS
March 9, 2018

Glitch Effect CSSはCSSでグリッチエフェクトを実装できます。
<h3 class="glitch">CREATE-TI</h3>
.glitch{ position: relative; top: 40%; margin: 300px auto; color: #fff; font-size: 80px; font-family: verdana; font-weight: 600; text-align: center; text-transform: uppercase; } .glitch:before, .glitch:after{ content: 'CREATE-TI'; position: absolute; top: 0; left: 0; right: 0; overflow: hidden; background-color: #4e3273; color: #fff; } .glitch:before{ left: 8px; text-shadow: 2px 0 #00ffea; animation: effect 3s infinite linear; } .glitch:after{ left: 4px; text-shadow: -2px 0 #fe3a7f; animation: effect 2s infinite linear; } @-webkit-keyframes effect{ 0%{ clip: rect(55px,9999px,56px,0); } 5%{ clip: rect(47px,9999px,30px,0); } 10%{ clip: rect(33px,9999px,36px,0); } 15%{ clip: rect(35px,9999px,9px,0); } 20%{ clip: rect(63px,9999px,59px,0); } 25%{ clip: rect(96px,9999px,98px,0); } 30%{ clip: rect(48px,9999px,77px,0); } 35%{ clip: rect(50px,9999px,34px,0); } 40%{ clip: rect(60px,9999px,72px,0); } 45%{ clip: rect(10px,9999px,81px,0); } 50%{ clip: rect(2px,9999px,60px,0); } 55%{ clip: rect(23px,9999px,89px,0); } 60%{ clip: rect(76px,9999px,91px,0); } 65%{ clip: rect(62px,9999px,30px,0); } 70%{ clip: rect(60px,9999px,73px,0); } 75%{ clip: rect(60px,9999px,87px,0); } 80%{ clip: rect(2px,9999px,14px,0); } 85%{ clip: rect(28px,9999px,87px,0); } 90%{ clip: rect(73px,9999px,50px,0); } 95%{ clip: rect(79px,9999px,70px,0); } 100%{ clip: rect(17px,9999px,79px,0); } }