Membuat Teks Mirror Efek Bergetar Dengan HTML Dan CSS

Labkom99.Com – Belajar Membuat Teks Mirror Efek Bergetar Dengan HTML Dan CSS. Efek khusus ini menggunakan elemen semu dan animasi bingkai CSS3 untuk mendapatkan efek getaran dan efek retak pada teks. Pada kesempatan kali ini labkom99 telah menulis tutorialnya dengan singkat. 

Perlu diketahui bahwa Membuat Teks Mirror Efek Bergetar Dengan HTML dan css biasanya hanya di peruntukkan untuk desaian pada fron-end sebuah website. Sehingga dengan demikian website akan terlihat lebih menarik dan akan membuat betah para pengunjungnya.

Alat / Bahan Baku

Notepad  Bisa menggunakan Tols web programming Lain untuk pemrograman 

Perhatian 

Sebelum belajar Membuat Teks Mirror Efek Bergetar Dengan HTML pada bagian ini sebaiknya terlebih dahulu mempelajari tentang Struktur dasar HTML dan cara membuat template, cara menyimpan dan cara membuka file HTML yang sudah tulis pada pembahasan Bagaimana Cara Membuat Template HTML. Namun bagi yang sudah memahaminya tinggal di skip saja.

Metode / Langkah

Hanya memerlukan beberapa  satu tag HTML untuk bisa membuat mirror efek bergetar 

<h2 data-text="Labkom99.com"><span>Labkom99.com</span></h2>

Untuk code CSS nya

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000;
    overflow: hidden;
}
 
h2 {
    position: relative;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: calc(20px + 5vw);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: 0 0 0.15em #1da9cc;
    user-select: none;
    white-space: nowrap;
    filter: blur(0.007em);
    animation: shake 2.5s linear forwards;
}
 
h2 span {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    -webkit-clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
    clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
}
 
h2::before,
h2::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
}
 
h2::before {
    animation: crack1 2.5s linear forwards;
    -webkit-clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
}
 
h2::after {
    animation: crack2 2.5s linear forwards;
    -webkit-clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
    clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
}
 
@keyframes shake {
    5%, 15%, 25%, 35%, 55%, 65%, 75%, 95% {
        filter: blur(0.018em);
        transform: translateY(0.018em) rotate(0deg);
    }
 
    10%, 30%, 40%, 50%, 70%, 80%, 90% {
        filter: blur(0.01em);
        transform: translateY(-0.018em) rotate(0deg);
    }
 
    20%, 60% {
        filter: blur(0.03em);
        transform: translate(-0.018em, 0.018em) rotate(0deg);
    }
 
    45%, 85% {
        filter: blur(0.03em);
        transform: translate(0.018em, -0.018em) rotate(0deg);
    }
 
    100% {
        filter: blur(0.007em);
        transform: translate(0) rotate(-0.5deg);
    }
}
 
@keyframes crack1 {
    0%, 95% {
        transform: translate(-50%, -50%);
    }
 
    100% {
        transform: translate(-51%, -48%);
    }
}
 
@keyframes crack2 {
    0%, 95% {
        transform: translate(-50%, -50%);
    }
 
    100% {
        transform: translate(-49%, -53%);
    }
}

Untuk Source Code Membuat Teks Mirror Efek Bergetar Dengan HTML Dan CSS Lengkapnya Dapat di peroleh dibawah ini.