Cara Membuat Banner Flash dengan CSS

CSS digunakan untuk mempercantik tampilan pada Blog, dengan CSS kita juga bisa membuat banner Flash. Efek tersebut yang ditimbulkan tidaklah menggunakan Flas melainkan hanya dengan CSS3 Keyframes.

Dengan Keyframes kita dapat membuat animasi dengan cara kita atur satu persatu sampai dapat merubah style CSS berkali-kali, keyframes juga meiliki efek rotasi bisa membuat efek berputar.
Untuk membuat banner CSS cukup mudah, berikut langkah mudahnya :

Selahkan anda menuju Editor Template, kemudian anda cari kode  ]]></b:skin>, lalu copy kode berikut dan pastekan diatasnya

.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);
    }
}

Selanjutnya untuk kode pemanggil anda menuju laman baru, terapkan kode berikut di Mode HTML

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

Kemudian anda Publikasikan.

Bagikan Artikel ini