Cara Membuat Efek Glitch Dengan CSS - Pixel-Code

Cara Membuat Efek Glitch Dengan CSS

Gimana menurut kalian cukup bagus bukan?,  kali ini gue mau ngasih tutorial mempercantik script dengan efek glitch seperti diatas lanjut aja gimana cara buatnya, kalian cukup copy script di bawah:
/* CSS GlitchText by Pixel-Code */
.glitchtext {
    justify-content: center;
    align-items: center;
    display: flex;
  }
  .text {
    font-family: "Jolly Lodger";
    font-size: 19.5px;
    color: #000000;
    text-shadow: 0 0 12.5px #0087FF;
    margin: 4%;
    margin-top: 2%;
  }
  .dud {
    color: #757575;
  }
 
  h1 {
    color: #000000;
    font-family: "Jolly Lodger";
    font-size: 60px;
    font-weight: 400;
    text-align: center;
    margin: 0;
    line-height: 0;
    animation: glitch1 2.5s infinite;
  }
  h1:nth-child(2) {
    color: #67f3da;
    animation: glitch2 2.5s infinite;
  }
  h1:nth-child(3) {
    color: #f16f6f;
    animation: glitch3 2.5s infinite;
  }
  @keyframes glitch1 {
    0% {
      transform: none;
      opacity: 1;
    }
    7% {
      transform: skew(-0.5deg, -0.9deg);
      opacity: 0.75;
    }
    10% {
      transform: none;
      opacity: 1;
    }
    27% {
      transform: none;
      opacity: 1;
    }
    30% {
      transform: skew(0.8deg, -0.1deg);
      opacity: 0.75;
    }
  35% {
    transform: none;
    opacity: 1;
  }
  52% {
    transform: none;
    opacity: 1;
  }
  55% {
    transform: skew(-1deg, 0.2deg);
    opacity: 0.75;
  }
  50% {
    transform: none;
    opacity: 1;
  }
  72% {
    transform: none;
    opacity: 1;
  }
  75% {
    transform: skew(0.4deg, 1deg);
    opacity: 0.75;
  }
  80% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
 
@keyframes glitch2 {
  0% {
    transform: none;
    opacity: 0.25;
  }
  7% {
    transform: translate(-2px, -3px);
    opacity: 0.5;
  }
  10% {
    transform: none;
    opacity: 0.25;
  }
  27% {
    transform: none;
    opacity: 0.25;
  }
  30% {
    transform: translate(-5px, -2px);
    opacity: 0.5;
  }
  35% {
    transform: none;
    opacity: 0.25;
  }
  52% {
    transform: none;
    opacity: 0.25;
  }
  55% {
    transform: translate(-5px, -1px);
    opacity: 0.5;
  }
  50% {
    transform: none;
    opacity: 0.25;
  }
  72% {
    transform: none;
    opacity: 0.25;
  }
  75% {
    transform: translate(-2px, -6px);
    opacity: 0.5;
  }
  80% {
    transform: none;
    opacity: 0.25;
  }
  100% {
    transform: none;
    opacity: 0.25;
  }
}
 
@keyframes glitch3 {
  0% {
    transform: none;
    opacity: 0.25;
  }
  7% {
    transform: translate(2px, 3px);
    opacity: 0.5;
  }
  10% {
    transform: none;
    opacity: 0.25;
  }
  27% {
    transform: none;
    opacity: 0.25;
  }
  30% {
    transform: translate(5px, 2px);
    opacity: 0.5;
  }
  35% {
    transform: none;
    opacity: 0.25;
  }
  52% {
    transform: none;
    opacity: 0.25;
  }
  55% {
    transform: translate(5px, 1px);
    opacity: 0.5;
  }
  50% {
    transform: none;
    opacity: 0.25;
  }
  72% {
    transform: none;
    opacity: 0.25;
  }
  75% {
    transform: translate(2px, 6px);
    opacity: 0.5;
  }
  80% {
    transform: none;
    opacity: 0.25;
  }
  100% {
    transform: none;
    opacity: 0.25;
  }

    }
Gimana cara memakainya nih aku kasih tau, kalian harus memakai code <div id=" ">
 
<div id="glitchtext">
<h1>Aug6host X ./Sn00py</h1>
<h1>Aug6host X ./Sn00py</h1>
<h1>Aug6host X ./Sn00py</h1>
</div>
Demo:

Gimana cukup bagus bukan buat di script kalian? Oke mungkin cukup sekian semoga bermanfaat see you byee

0 Response to "Cara Membuat Efek Glitch Dengan CSS"

Post a Comment