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.

Comments

  1. PERTAMAXX !!

    Alhamdulillah, akhirnya sudah selesai tutorialnya, :D

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

    ReplyDelete
  3. letakkan css nya di mana ya gan

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

    ReplyDelete

Post a Comment

Popular posts from this blog

Cara Menggunakan :before dan :after

Perbedaan JavaScript dan jQuery Beserta Contoh

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template