Membuat Ucapan Selamat Datang Keren

Kali ini saya akan berbagi cara membuat ucapan selamat datang bergerak dari kanan ke kiri, ya kenapa harus bergerak ? biar gak bosen lah masak ya ucapan selamt datang di blog cuma diem saja, langsung saja ikuti tutorial di bawah ini

Ini adalah screenshotnya tulisan itu akan bergerak dari kanan ke kiri

1. Copy HTML di bawah ini masukan di bawah ini terserah mau di taruh dimana saja :
Seperti biasa yang berwarna putih bisa di edit sesuka hati anda

<div class="example1">
<h3>Selamat Datang </h3>
</div>

2. Lalu Copy Code di bawah ini taruh di atas </style> atau ]]></b:skin>

<!-- Styles --> <style style="text/css"> .example1 { height: 50px; overflow: hidden; position: relative; } .example1 h3 { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position */ -moz-transform:translateX(100%); -webkit-transform:translateX(100%); transform:translateX(100%); /* Apply animation to this element */ -moz-animation: example1 15s linear infinite; -webkit-animation: example1 15s linear infinite; animation: example1 15s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes example1 { 0% { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } } @-webkit-keyframes example1 { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } } @keyframes example1 { 0% { -moz-transform: translateX(100%); /* Firefox bug fix */ -webkit-transform: translateX(100%); /* Firefox bug fix */ transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); /* Firefox bug fix */ -webkit-transform: translateX(-100%); /* Firefox bug fix */ transform: translateX(-100%); } } </style>

3. save template anda lalu lihat hasilnya  DEMO

Baca Juga : Dasar HTML yang Ke2