Cara Membuat Animasi Teks Bayangan dengan CSS3
Hallo, jumpa lagi dengan saya 🙂 , Di artikel kali ini saya akan share panduan sederhana mengenai bagaimana Cara Membangun Animasi Teks Bayangan dengan CSS3, Nah bikin kalian yang suka merancang teks bayangan tak ada salah nya bagi memberikan sedikit efek animasi seperti berikut.
Kalian dapat ikuti langkah berikut ini bagi memberikan efek animasi bayangan di teks. Pertama-tama kalian mesti bikin satu buah kalimat bebas bagi teks bayangan dengan kode HTML berikut.
<body>
<section>
<h1 class=extruded>Halo Dunia</h1>
</section>
</body>
Setelah kita merancang teks nya, berikutnya kita akan desain teks tersebut dengan kode CSS3 bagi merancang efek animasi bayangan.
body {
background: #222;
padding: 1em;
color: #fff;
}
h1{
font-family: serif;
font-size: 4em;
text-align: center;
}
.extruded{
color: #888;
position: relative;
color: #FFF;
text-shadow: cyan 1px 1px,
cyan 2px 2px,
cyan 3px 3px,
cyan 4px 4px,
cyan 5px 5px,
cyan 6px 6px;
left: -6px;
top: -6px;
transition: text-shadow 1s, color 1s;
}
.extruded:hover{
text-shadow: #fff 1px 1px;
color: #aaa;
}Setelah segala kode diatas diketikan, simpan terlebih dahulu, kemudian jalankan di browser masing-masing dan lihat hasilnya. Karenanya ketika kalian arahkan kursor ke arah teks karenanya akan terjadi perubahan bayangan. Selesai
Bagus begitulah panduan sederhana mengenai bagaimana Cara Membangun Animasi Teks Bayangan dengan CSS3, semoga bermanfaat. 🙂
Sumber https://kursuswebsite.org
