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.
Efek tulisan pada animasi ini menghasilkan tulisan dengan efek bunga -bunga yang indah. Efek bung tersesbut muncul kedalam setiap huruf pada teks. Sehingga menghasilkan kesan dan nuansa romantis yang cantik pada tulisan.
Alat / Bahan Baku
Notepad
Perhatian
Untuk membuat animasi cantik pada tulisan 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
Pada bagian ini sangat penting bagi pemula yang ingin belajar HTML untuk memahami dasar dasar html tersebut. Jika dasar dasar html sudah kalian kuasai maka kalian akan mudah untuk membuat kode kode html lainya. Namun bagi yang sudah sudah mengerti tinggal skip aja di part ini.
Metode / Langkah
Dalam membuat sebuah struktur html tentunnya dimulai dengan html pembuka <html> dan html penutup </html>. Namun pada labkom99 yakin kalian semua sudah paham tentang hal itu. Bagi yang belum paham silahkan pelajari dasar dasar html seperti pada sub PERHATIAN.
Seperti yang ditunjukkan pada source code 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 :
- 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%;
}Demo Hasil dari Belajar HTML Dan CSS Membuat Animasi Cantik Pada Tulisan Sebagai Berikut Ini
