Cara Membuat Bounce Arrow dengan CSS

Cara Membuat Bounce Arrow dengan CSS - Pernahkah kalian melihat animasi bounce arrow, yup.. bounce arrow digunakan sebagai elemen pendukung untuk sebuah kontent yang berada dibawahnya, hal itu bertujuan agar pengguna tahu bahwa masih ada konten dibagian bawah bounce arrow. Nah, kali ini saya akan bagikan tutorial bagaimana Cara Membuat Bounce Arrow dengan CSS. Simak langkah - langkahnya berikut ini.

Untuk membuat bounce arrow perlu ada icon sebagai objeknya, pada kasus ini saya menggunakan arrow dari fontawesome, silahkan kalian sisipkan library fontawesome seperti berikut.

<!-- Fontawesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

Jika sudah disisipkan, selanjutnya kalian gunakan icon arrow seperti berikut.

<body>
    <div class="wrapper">
        <div class="bouncing-arrow">
            <i class="fas fa-chevron-down"></i>
        </div>
    </div>
</body>

Selanjutnya, untuk membuat bounce arrow kita akan styling dengan CSS untuk mengatur layout, ukuran arrow dan tentunya bouncenya, silahkan ketikan sintak CSS berikut ini.

<style>
    .fas {
        font-size: 4rem;
        display: block;
        text-align: center;
        color: darkcyan;
        line-height: 60px;    
    }
    .bouncing-arrow {
        animation: 2s ease 0s normal none infinite running bounce;
        bottom: 17px;
        height: 44px;
        left: 50%;
        position: absolute;
        width: 60px;
    }
    @keyframes bounce { 
        0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
        40% {transform: translateY(-30px);} 
        60% {transform: translateY(-15px);} 
    } 
    .bounce { 
        animation-name: bounce; 
    }
</style>

Jika sudah kalian ketikan, silahkan simpan filenya kemudian kalian bisa buka dibrowser.

Baiklah, cukup sekian tutorial sederhana tentang CSS yaitu Cara Membuat Bounce Arrow dengan CSS, semoga bermanfaat dan selamat mencoba..

30 April 2020

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