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

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

BLOGGER: 8
  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

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Membuat Banner Flash dengan CSS
Membuat Banner Flash dengan CSS
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5xCMrXjKbhu7gicM4_MxXn1O1MeBA3zn0lzSQQiDa0_sehIhAhceBLjw1JsjhnAUQhzfRh5FuYkrDVqCjjJZ8AyXy8PulbSe1EvJA9VY0FyjHoqOsE_ysyh10oW_Lxme1By2RsaPJ7_4/s1600/efek+flash+menggunakan+css.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5xCMrXjKbhu7gicM4_MxXn1O1MeBA3zn0lzSQQiDa0_sehIhAhceBLjw1JsjhnAUQhzfRh5FuYkrDVqCjjJZ8AyXy8PulbSe1EvJA9VY0FyjHoqOsE_ysyh10oW_Lxme1By2RsaPJ7_4/s72-c/efek+flash+menggunakan+css.gif
Jelas in Blog
https://jelasinblog.blogspot.com/2014/08/membuat-banner-flash-dengan-css.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/08/membuat-banner-flash-dengan-css.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content