Membuat Animasi Text diisi Air di CSS
Sep 14, 2017
Add Comment
Hallo Selamat Sore, kali ini admin mau membuat tutorial cara membuat animasi text dengan efek seperti diisi air, menggunakan HTML dan CSS.
langkah pertama buat dulu htmlnya seperti berikut :
kemudian buat CSS nya seperti berikut:
untuk background gambarnya silakan download disini, anda juga bisa membuat background airnya sendiri. jika membuat background air sendiri sesuaikan background positionnya pada keyframe animate diatas sesuai ukuran gambar kalian, ok. sekianlah tutorial kali ini selamat mencoba, jika tutorial ini bermanfaat silakan bagikan ke teman anda. terimakasih sudah berkunjung ke blog ini.
langkah pertama buat dulu htmlnya seperti berikut :
<!DOCTYPE html><html><head> <title>Text Filling With water</title> <link rel="stylesheet" href="style.css"></head><body> <div class="loader"> <h1>water</h1> </div></body></html>
kemudian buat CSS nya seperti berikut:
body {
margin: 0;
padding: 0;
background: #262626;
font-family: arial;
}
.loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loader h1 {
margin: 0;
padding: 0;
text-transform: uppercase;
font-size: 10em;
color: rgba(255,255,255,.1);
background-image: url("water.png");
background-repeat: repeat-x;
background-clip: text;
-webkit-background-clip: text;
animation: animate 15s linear infinite;
}
@keyframes animate {
0% {
background-position: left 0px top 30px;
}
40% {
background-position: left 600px top -150px;
}
80% {
background-position: left 1200px top -150px;
}
100% {
background-position: left 1500px top 30px;
}
}untuk background gambarnya silakan download disini, anda juga bisa membuat background airnya sendiri. jika membuat background air sendiri sesuaikan background positionnya pada keyframe animate diatas sesuai ukuran gambar kalian, ok. sekianlah tutorial kali ini selamat mencoba, jika tutorial ini bermanfaat silakan bagikan ke teman anda. terimakasih sudah berkunjung ke blog ini.
Autodika.com menyediakan jawaban serta materi seputar tugas kuliah Manajemen Informatika, Sistem Informasi, Teknik Informatika dan berbagai macam tugas kuliah yang berkaitan tentang teknologi.
0 Response to "Membuat Animasi Text diisi Air di CSS"
Post a Comment