Belajar HTML Dan CSS Membuat Animasi Cantik Pada Tulisan

Belajar HTML Dan CSS Membuat Animasi Cantik Pada Tulisan

Labkom99.com Belajar HTML Dan CSS Membuat Animasi Cantik Pada Tulisan Ini adalah efek khusus animasi gambar dengan latar belakang css klip GIF. Efek khusus ini menggunakan teknologi klip latar belakang css untuk memotong gambar gif menjadi efek teks yang sangat keren.

Alat / Bahan Baku
Notepad

Perhatian 
Untuk membuat menu pada bagian ini sabaiknya memahami terlebih dahulu tentang Struktur dasar HTML dan cara membuat template, cara menyimpan dan cara membuka file HTML yang sudah di bahas  pada pembahasan Bagaimana Cara Membuat Template HTML 

Metode / Langkah
Seperti yang ditunjukkan pada gambar di bawah ini, pada posisi body pada umumnya berasal dari perintah div seperti pada script html di bawah ini :

<body>
        <div class= "wrapper">
            <div class= "text" data-text= "Labkom99">Labkom99</div>
        </div>
</body>


Dan untuk mempercantik desain gunakan CSS  seperti dibawah ini :

Baca Juga :

        .wrapper{
          background: #59284e;
          height: 97vh;
          border-radius: 5px;
          position: relative;
        }
        .text{
          flex: 0 0 100%;
          font-size: 14rem;
          font-weight: 900;
          color: #00000000;
          text-align: center;
          font-family: 'Lato', sans-serif;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          border-bottom: 1px solid #d4d7ff;
          border-top: 1px solid #d4d7ff;
          background: url(https://media1.giphy.com/media/kLMfRZwHtzr7a/source.gif);
          background-clip: text;
          -webkit-background-clip: text;
        }

         .text:after{
           content: attr(data-text);
           -webkit-text-stroke: 1.5px #d4d7ff;
           position: absolute;
           left: 50%;
           top: 50%;
           transform: translate(-50%, -49%);
           background: url(https://media1.giphy.com/media/kLMfRZwHtzr7a/source.gif);
           background-clip: text;
           -webkit-background-clip: text;
           background-size: 43%;

        }

Demo Hasil dari Belajar HTML Dan CSS Membuat Animasi Cantik Pada Tulisan Sebagai Berikut Ini



Labkom99

BERIKAN KOMENTAR ()