Cara Membuat Bounce Arrow dengan CSS

30/04/2020    Risman Hakim    180     Website

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..

Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More