Membuat Banner Flash dengan CSS

Bagaimana cara membuat banner flash atau flash banner hanya dengan CSS? Ikuti langkah-langkah sederhana berikut. Artikel ini pesanan dari Adri Baraka Putra Arinda. Dia menanyakan cara membuat membuat banner seperti di JelasinBlog Blue Jeans.

Efek itu sebenarnya tidak menggunakan Flash melainkan hanya CSS3 @keyframes. Dengan aturan keyframes, Anda dapat membuat animasi. Animasi ini dibuat secara bertahap berubah dari satu set gaya CSS ke gaya yang lain. Selama animasi, Anda dapat mengubah set gaya CSS berkali-kali.

Mudahnya letakkan CSS berikut dalam template Anda, kemudian simpan.

 .container {
    
}

.container .banner {
    max-width: 500px;
    height: 140px;
    margin: auto;
    overflow: hidden;
    background-color: #DDDDDD;
    position: relative;
}

.container .banner:hover {
    background-color: #2d3538;
}

.container .kotak-1 {
    position: absolute;
    z-index: 1;
}

.container .kotak-1 {
    border-radius: 35px;
    background-color: rgba(45, 53, 56, 0.2);
    width: 40%;
    height: 180%;
    top: -10%;
    left: 30%;
    -webkit-animation: rotating 4s ease-out infinite;
    -moz-animation: rotating 4s ease-out infinite;
    -ms-animation: rotating 4s ease-out infinite;
    animation: rotating 4s ease-out infinite;
}

.container .banner, .container .kotak-1 {
    -webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    -o-transition: all ease 1s;
    -ms-transition: all ease 1s;
    transition: all ease 1s;
}

.container .banner:hover .kotak-1 {
    height: 700px;
    width: 700px;
    top: -40%;
    left: -5%;
}

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes rotating {
    from{
        -moz-transform: rotate(0deg);
    }
    to{
        -moz-transform: rotate(360deg);
    }
}
@-ms-keyframes rotating {
    from{
        -ms-transform: rotate(0deg);
    }
    to{
        -ms-transform: rotate(360deg);
    }
}
@-keyframes rotating {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

Buat posting baru dalam mode HTML dan copy-paste HTML berikut kemudian publish.

<div class='container'>
    <div class='banner'>
        <div class='kotak-1' />
    </div>
</div>

Selamat mencoba.

Komentar

  1. PERTAMAXX !!

    Alhamdulillah, akhirnya sudah selesai tutorialnya, :D

    BalasHapus
  2. KEDUAX !!! :v
    mantap nih kirain ane gif, ternyata hasil CSS xD

    BalasHapus
  3. letakkan css nya di mana ya gan

    BalasHapus
  4. Letak teks yang di dalam banner dimana bang ?

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Cara Menggunakan :before dan :after

Perbedaan JavaScript dan jQuery Beserta Contoh

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template