Belajar Membuat Animasi Bergerak menggunakan HTML dan CSS

Belajar Membuat Animasi Bergerak menggunakan HTML dan CSS
Daftar Isi Artikel

Asalamualaikum Wr Wb..
Salam Sejahterah untuk kita semua. Semoga Allah SWT senantiasa memberi Rahmad dan Hidayahnya Kepada kita dalam menjalankan aktifitas sehari-hari Amin.. :)

Selamat malam buat Sahabat K0deTani dimanapun kalian berada.. :)

kali ini saya akan membagikan source code animasi, dimana animasi ini menggunakan bahasa program html dan css.

ok langsung saja kita mulai membuat animasinya.
Sebelumnya kita buat sebuah file dengan nama index.html. kawan kawan bisa membuatnya dengan aplikasi notpad atau aplikasi texteditor sejenisnya, selanjutnya pastekan code html di ke dalam file index.html dan css kedalam file style.css berikut didalamnya :

See the Pen XyWqer by Yusuf Syahmuda BatuBara (@yusuf-syahmuda-batubara) on CodePen.


selanjutnya jalankan file index.html tadi di browser kawan kawan dan lihat hasil yang di tampilkan dari animasi yang kita buat. :)

cukup mudah bukan....:)

untuk source code lengkapnya bisa di Download Disini
Ini Link
By Ini Link

Surat Al-Hujurat ayat 6 : يَا أَيُّهَا الَّذِينَ آمَنُوا إِنْ جَاءَكُمْ فَاسِقٌ بِنَبَإٍ فَتَبَيَّنُوا أَنْ تُصِيبُوا قَوْمًا بِجَهَالَةٍ فَتُصْبِحُوا عَلَى مَا فَعَلْتُمْ نَادِمِينَ "Wahai orang-orang yang beriman, jika datang seorang yang fasik kepadamu membawa berita, maka tangguhkanlah (hingga kamu mengetahui kebenarannya) agar tidak menyebabkan kaum berada dalam kebodohan (kehancuran) sehingga kamu menyesal terhadap apa yang kamu lakukan".

Subscribe

  1. Untuk membuat judul komentar, gunakan <i rel="h2">Judul Komentar</i>
  2. Untuk membuat kotak catatan, <i rel="quote">catatan</i>
  3. Untuk membuat teks stabilo, <i rel="mark">mark</i>
  4. Untuk membuat teks mono, <i rel="kbd">kbd</i>
  5. Untuk membuat kode singkat, <i rel="code">shorcode</i>
  6. Untuk membuat kode panjang, <i rel="pre"><i rel="code">potongan kode</i></i>
  7. Untuk membuat teks tebal, <strong>tebal</strong> atau <b>tebal</b>
  8. Untuk membuat teks miring, <em>miring</em> atau <i>miring</i>