Efek Gerak Animasi Dengan CSS3 - Bila melihat sesuatu yang bergerak, sudah pasti kita ingin memperhatikannya. Efek seperti itulah yang sering digunakan pada sebuah tampilan banner iklan atau objek gambar, tujuannya hanya untuk menarik mata pengunjung agar tertarik dan betah berlama-lama berada disana.
Animasi bisa kita artikan sebagai element untuk membuat sebuah objek dapat bergerak secara otomatis atau tanpa ada perintah, akan tetapi fungsi penggunaan CSS-animation ini tidak dapat berdiri sendiri, artinya animasi effect hanya dituliskan untuk mengatur bentuk gerak pada objek target, sedangkan efek gerak akan dihasilkan dengan media keyframes (@keyframes [objek name]) seperti ini:
Selengkapnya Anda bisa pelajari pada Contoh Bentuk-Bentuk Konsep Animasi di postingan sebelumnya, karena disana sudah saya jelaskan bagaimana cara membuat efek gerak otomatis dengan CSS dan keyframes media syntax. Pertemuan kali ini saya akan memberikan efek ke- 11 lanjutan dari 10 Gaya Efek CSS Animasi Pada Teks, tampilan yang simple dan pekerjaan yang cukup mudah, tinggal Copy semua kode dibawah ini, lalu letakkan pada postingan Anda mode tulis HTML (bukan yang Compose), lengkapnya seperti ini:
Dan hasilnya :
DEMO SHOW
Sambil memahami susunan konsep CSS3 diatas, sambil bermain game yuk disini, ada hadiahnya loh, mau pilih game yang mana..?, tetapi jangan sampai KALAH ya, soalnya hadiahnya akan diberikan hanya kepada juara #1 (top one) saja, hehe...!! selamat bermain.
Animasi bisa kita artikan sebagai element untuk membuat sebuah objek dapat bergerak secara otomatis atau tanpa ada perintah, akan tetapi fungsi penggunaan CSS-animation ini tidak dapat berdiri sendiri, artinya animasi effect hanya dituliskan untuk mengatur bentuk gerak pada objek target, sedangkan efek gerak akan dihasilkan dengan media keyframes (@keyframes [objek name]) seperti ini:
// Efek gerak dengan nilai persentasi
@keyframes text {
0%{transform:rotateX(-5deg) rotateY(-50deg)}
50%{transform:rotateX(10deg) rotateY(50deg)}
70%{transform:rotateX(5deg) rotateY(70deg)}
100%{transform:rotateX(-5deg) rotateY(-50deg)}
}
@keyframes text {
0%{transform:rotateX(-5deg) rotateY(-50deg)}
50%{transform:rotateX(10deg) rotateY(50deg)}
70%{transform:rotateX(5deg) rotateY(70deg)}
100%{transform:rotateX(-5deg) rotateY(-50deg)}
}
Selengkapnya Anda bisa pelajari pada Contoh Bentuk-Bentuk Konsep Animasi di postingan sebelumnya, karena disana sudah saya jelaskan bagaimana cara membuat efek gerak otomatis dengan CSS dan keyframes media syntax. Pertemuan kali ini saya akan memberikan efek ke- 11 lanjutan dari 10 Gaya Efek CSS Animasi Pada Teks, tampilan yang simple dan pekerjaan yang cukup mudah, tinggal Copy semua kode dibawah ini, lalu letakkan pada postingan Anda mode tulis HTML (bukan yang Compose), lengkapnya seperti ini:
<style type="text/css">
.txt-css3{text-align:center;perspective:500}
.text{
font:bold 60px/90px Tahoma;color:#DC143C;text-shadow:1px 3px 2px #111;
animation:text 2s infinite;-webkit-animation:text 2s infinite;
-moz-animation:text 2s infinite;border:4px solid;transform:skew(5deg);
-webkit-transform:skew(5deg);-moz-transform:skew(5deg)}
@keyframes text {
0%{transform:rotateX(-5deg) rotateY(-50deg)}
50%{transform:rotateX(10deg) rotateY(50deg)}
70%{transform:rotateX(5deg) rotateY(70deg)}
100%{transform:rotateX(-5deg) rotateY(-50deg)}}
/* Support all peramban browser, use.. */
@-webkit-keyframes text { ... }
@-moz-keyframes text { ... }
</style>
<section class="txt-css3">
<article class="text">Sahabat Blogger 77</article>
</section>Dan hasilnya :
Sambil memahami susunan konsep CSS3 diatas, sambil bermain game yuk disini, ada hadiahnya loh, mau pilih game yang mana..?, tetapi jangan sampai KALAH ya, soalnya hadiahnya akan diberikan hanya kepada juara #1 (top one) saja, hehe...!! selamat bermain.
» Game Menyusun Angka
» Game Test Kecerdasan Ala SAHABAT BLOGGER 77
» Memory Game Picture With jQuery
No comments:
Post a Comment