Cara Membuat Efek Glitch Dengan CSS

Daftar Isi [Tutup]
    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