Pada kesempatan ini saya akan membagikan tutorial tentang cara membuat animasi love menggunakan html css , sebelumnya sahabat tentu pernah menggunakan beberapa bentuk shape di ms.word,photoshop atau pada toolbox yang lainnya, sekarang kita akan membuat nya dengan html css.Baiklah supaya tidak terlalu lama coba sahabat ikutin langkah-langkah cara membuat animasi love menggunakan html css, langkah pertam siapkan struktur HTML ketikan script berikut ini

index.html

Langkah kedua ketikan style CSS yang digunakan untuk mempercantik tampilan dan animasi ya, coba ketikan script ya dibawah ini:

  • disini saya membuat bentuk kotak terlebih dahulu lihat CSS pada property #love , maka tampilanya akan menyerupai belah ketupat karena diberikan nilai transform: rotate(45deg);
  • berikutnya saya membuat bentuk 1/2 lingkaran untuk bagian kiri dan kanan bisa dilihat pada CSS property #love:before dan #love:after, dan hasilkan kan berbentuk love deh.
  • Selanjutnya tentu efek animasi bentuk love nya dong, saya berikan sebuah @keyframes

supaya tidak penasaran sahabat jangan lupa save file yang sudah diketikan langsung saja jalankan pada browser masing-masing supaya lebih terasa hasilnya,berikut ini hasil tampilan jika sahabat berhasil :cara-membuat-animasi-shape-love-dengan-html-css.PNG

Demikian pembahasan artikel ini tentang cara membuat animasi shape love dengan html css, semoga bermanfaat dan selamat mencoba.