.png)
Membuat Animasi Text diisi Air di CSS
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 :
<!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.
0 komentar :