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