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 :
- Text Editor
- Font Awesome
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><div id="aishiteru">
<i class="fa fa-heart"></i>
</div>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);}
}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 😊
Belum ada Komentar untuk "Membuat Animation Love di CSS"
Posting Komentar