Membuat Animation Love di CSS

Rian
Rian
Membuat Animation Love di CSS

Jika kalian melihat kebawah pada bagian Credit Link blog ini akan terdapat Icon Love yang menggunakan Font Awesome tentu Icon tersebut ditambahkan Animasi Scale supaya terlihat seperti membesar dan mengecil. Untuk membuat Animation Love tersebut sangat mudah sekali dan tidak sepusing yang kamu pikirkan.

Saya sendiri awalnya tertarik untuk membuat Animation Love ini karena memang bagus sekali dan kita bisa mengungkapkan bahwa Template yang ada di blog kita yang dibuat sendiri maupun redesign sendiri bisa menggunakan Icon Love ini sebagai Symbol bahwa kita membuat sepenuh hati.

Apa saja yang diperlukan untuk membuat Icon Love dan Animationnya ? Bahan yang kamu perlukan adalah :




  • Bahan nya hanya 2 saja karena ini menggunakan CSS dan Font Awesome agar dapat berjalan sesuai yang kita mau.

    Membuat Animation Love di CSS


    Pertama buka Text Editor

    Kedua buat kode htmlnya
    <!DOCTYPE html>
    <html>
    <head>
     <title>Love This</title>
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/fontawesome.min.css">
     <style type="text/css">
    
     </style>
    </head>
    <body>
    
    </body>
    </html>
    Ketiga buat kode div seperti ini dan taruh tepat dibawah kode <body>
    <div id="aishiteru">
     <i class="fa fa-heart"></i>
    </div>
    Ke empat tambahkan CSS dan taruh tepat dibawah kode <style>
    body
    {
    margin: 0;
    padding: 0;
    background: rgba(115,102,187,0.5);}
    #aishiteru
    {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    }
    #aishiteru i
    {
    font-size: 100px;
    color: #f06262; 
    animation: love 2s infinite ease;
    }
    @keyframes love
    {
     from{transform: scale(1);}10%{transform: scale(1.2);}
    }
    Terakhir kalian simpan File tersebut dengan nama Heart.html

    Untuk melihat hasilnya seperti apa kalian bisa klik Tombol dibawah ini


    Sedikit penjelasan pada kode diatas supaya kalian paham.

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/fontawesome.min.css">

    Fungsi dari Font Awesome ini untuk memanggil Icon/Font yang bernama Heart supayan berubah menjadi Hati/Love.

    <div id="aishiteru">
     <i class="fa fa-heart"></i>
    </div>

    Fungsi dari aishiteru memberikan class pada div supaya bisa dibuat dengan css
    Fungsi dari fa fa-heart ini adalah untuk memanggil Icon dari Font Awesome tersebut

    #aishiteru
    {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    }
    #aishiteru i
    {
    font-size: 100px;
    color: #f06262; 
    animation: love 2s infinite ease;
    }
    @keyframes love
    {
     from{transform: scale(1);}10%{transform: scale(1.2);}
    }

    Fungsi dari #aishiteru untuk membuat posisi agar berada di tengah
    Fungsi dari #aishiteru i memberikan warna , size dan animasi pada icon
    Fungsi dari @keyframes dan ini yang penting untuk membuat animasi tersebut berjalan.

    Semoga apa yang aku bagikan ini bermanfaat bagi kalian yah 😊

    Comments : Membuat Animation Love di CSS