Membuat Animasi Text Magic Menggunakan CSS
Pada artikel berikut ini saya akan berbagi referensi dan tutorial sederhana mengenai animasi pada sebuah teks, yaitu animasi teks magic. Jika kalian sedang mencari animasi ataupun efek pada suatu objek, tutorial ini cocok sekali untuk kalian coba, karena tutorial ini sangat mudah sekali dan juga sederhana tapi animasi yang ditampilkan cukup menarik. Untuk animasi yang akan kita buat nanti kita akan dibantu dengan CSS untuk menjalankan animasi pada teksnya. Baiklah langsung saja kita akan praktekan bagaimana Membuat Animasi Teks Magic dengan CSS berikut ini.
Langkah 1 : Membuat Animasi Teks Magic dengan CSS
Kita mulai dengan langkah pertama yakni kita akan membuat struktur awal untuk membuat animasi teks magic dan menambahkan beberapa teks sebagai objek animasinya dengan sintak HTML berikut.
<div class="wrapper">
<h1 class="text1">Netsecid</h1>
<h1 class="text2">Blogg</h1>
</div>
</body>
Langkah 2 : Membuat Animasi Teks Magic dengan CSS
Selanjutnya, barulah kita akan membuat animasi pada teks diatas dengan sintak CSS berikut.
@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
body{
line-height: 0;
margin: 0;
padding: 0;
overflow: hidden;
background: #EEEEEE;
}
.wrapper{
position: absolute;
width: 100%;
top: 50%;
bottom: 50%;
filter: contrast(10);
}
h1{
font-family: 'Fredoka One', cursive;
width: 100%;
text-align: center;
position: absolute;
font-size: 100px;
margin: 0;
color: #0E69B7;
}
@keyframes animate {
0% { opacity: 0; filter: blur(28px)}
10% { opacity: 0; }
90% { opacity: 1; }
}
.text1{
animation: animate 6s infinite alternate-reverse;
}
.text2{
animation: animate 6s infinite alternate;
}
Dengan menambahkan sintak CSS keyframe kita telah atur animasi dengan mengatur blur, dan tingkat opacity dan tentunya animasi pergantian teks seolah - olah teks bergantian seperti magic.
Setelah semua sintak telah diketikan, simpan filenya kemudian silahkan buka dibrowser masing - masing dan lihat hasilnya. Selesai
Baik, itulah tadi tutorial sederhana mengenai Animasi Teks Magic dengan CSS, semoga tutorial ini bisa bermanfaat dan menambah referensi kalian dalam membuat animasi dengan CSS. Selamat mencoba :)
Belum ada Komentar untuk "Membuat Animasi Text Magic Menggunakan CSS"
Posting Komentar