Animasi line image disini untuk mempercantik tampilan pada gambar. Jadi saat ada efek hover pada gambar maka akan muncul animasi line border yang terdapat pada gambar. Baiklah agar tidak berlama-lama bagaimana kalau langsung saja menuju tkp.Langkah yang pertama sahabat siapkan 3 gambar sebagai contohnya. Lalu buka text editor masing-masing dan buat file html seperti berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Membuat Animasi Line</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Membuat Animasi Line Border Pada Gambar Dengan CSS</h1> <a href="#" class="car animLine" > <div style="background-image:url(DS-01.jpg)"></div> </a> <a href="#" class="car animLine rect"> <div style="background-image:url(Motor-Rossi.jpg)"></div> </a> <a href="#" class="car animLine" > <div style="background-image:url(Aventador-01.jpg)"></div> </a> </div> </body> </html> |
Nah pada code diatas saya sudah memasukkan 3 gambar seperti yang sudah diberitahukan sebelumnya.
Langkah selanjutnya tambahkan style css seperti code dibawah ini
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
body { background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%); } .container { width: 900px; margin:auto; height: 100vh; } .car > div{ width: 300px; height: 200px; } .animLine { padding:0; display:inline-block; margin: 4px; box-shadow: 0 2px 4px #000; transform: scale(0.9); transition: 1s; border-radius:4px; background: linear-gradient(-45deg,transparent 40%, #fff 40%, #fff 50%,transparent 50%); background-color:rgba(255,255,255,0.3); background-size: 400% 400%; background-position: 80% 80%; animation: beforeLineAnim 2s ease-in-out infinite; } .animLine > div{ background-size: auto 100%; background-position:center; border-radius:4px; transition:.2s; } .animLine:hover > div{ background-size: auto 100%; background-repeat: no-repeat; } .animLine:hover { padding:4px; margin:0; transform: scale(1); box-shadow: 0 2px 4px #000, 0 8px 32px rgba(0, 0, 0, 0.5); } @keyframes beforeLineAnim { to { background-position: 30% 30%; } } .animLine.rect > div{ width:200px; } |
Jika sudah semua diketikkan coba hover pada salah satu gambar ,apakah seperti tampilan gambar dibawah ini:
Jadi pada gambar diatas adalah hasil efek hover maka akan terlihat animasi line tersebut.
Saya kira cukup dalam pembahasan kali ini tentang cara membuat animasi line image dengan css, semoga bermanfaat dan sampai jumpa dilain kesempatan.
terima kasih.
