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 sebaiknya 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>
<div class= "wrapper">
<div class= "text" data-text= "Labkom99">Labkom99</div>
</div>
</body>
Dan untuk mempercantik desain gunakan CSS seperti dibawah ini :
Baca Juga :
- Belajar HTML5 Dan Canvas Membuat Efek Animasi Hue Ball Berbagai Warna
- Belajar HTML5 Dan Canvas Membuat Bola Api Luncur
- Belajar HTML Dan CSS Membuat Menu Navigasi Horizontal
- Belajar HTML Dan CSS3 Membuat Mouseover Zoom Dan Efek Thumbnail
- Belajar HTML + CSS: Penggunaan Dan Penjelasan Element CSS Float
.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%;
}
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
Posting Komentar