Membuat Animasi Garis pada Frame Gambar

Membuat Animasi Garis pada Frame Gambar - Jika kalian pernah membuat frame pada sebuah gambar didalam website, mungkin  tutorial yang satu ini patut kalian coba karena pada tutorial ini akan dibahas bagaimana Membuat Animasi Garis pada Frame Gambar. Selain hasil yang ditampilkan cukup menarik tutorialnya pun cukup mudah untuk kita pelajari, karena tutorial membuat animasi kali ini dibuat dengan HTML dan CSS, langsung saja berikut akan saya praktekan bagaimana membuatnya.

Langkah 1 : Membuat Animasi Garis pada Frame Gambar

Baik kita mulai dengan langkah pertama, yakni kita akan membuat struktur awal untuk membuat animasi garis framenya dengan sintak HTML berikut ini. Pada kasus ini silahkan kalian siapkan gambar bebas kemudian sisipkan gambar didalam sintak CSS yang saya ketikan dengan cara inline CSS seperti berikut.

<body>
    <div class="wrapper">
        <a href="#" class="circle animate" >
            <div style="background-image:url(photo-1.jpg)"></div>
        </a>
        <a href="#" class="circle animate">
            <div style="background-image:url(photo-2.jpeg)"></div>
        </a>
        <a href="#" class="circle animate" >
            <div style="background-image:url(photo-3.jpeg)"></div>
        </a>
    </div>
</body>

Langkah 2 : Membuat Animasi Garis pada Frame Gambar

Setelah membuat struktur HTML dan memasukan gambar, selanjutnya kita akan mengatur layout dan juga animasi garis framenya dengan sintak CSS3 seperti berikut ini.

body {
    background-color: #0C1127;
}
.wrapper {
    width: 800px;
    margin: auto;
}
.circle > div{
    width: 195px;
    height: 195px;

}

.animate {
    padding:0;
    display:inline-block;
    margin: 4px;
    box-shadow: 0 2px 4px #000;
    transform: scale(0.9);
    transition: 1s;
    border-radius:50%;
    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: animateLine 2s ease-in-out infinite;
}
.animate > div{
    background-size: auto 130%;
    background-position:center;
    transition:.2s;
    border-radius:50%;
}
.animate:hover > div{
      background-size: auto 100%;
}
.animate:hover {
    padding:4px;
    margin:0;
    transform: scale(1);
    box-shadow: 0 2px 4px #000, 0 8px 32px rgba(0, 0, 0, 0.5);
}

@keyframes animateLine {
  to {
    background-position: 30% 30%;
  }
}

Setelah semua sintak diatas telah kalian ketikan semua, silahkan simpan filenya dengan nama index.html kemudian silahkan buka pada browser masing - masing dan lihat hasilnya. Maka ketika kalian arahkan kuror terhadap gambar akan terlihat efek animasi garis pada frame gambar. Selesai

Membuat Animasi Garis pada Frame Gambar

Bagaimana, cukup mudah bukan cara membuat animasi garis framenya ? Baiklah, sampai disini tutorial sederhana bagaimana Membuat Animasi Garis pada Frame Gambar, semoga tutorial ini bisa bermanfaat dan menambah referensi dalam membuat desain untuk website, selamat mencoba :)

17 April 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat