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.
Buat posting baru dalam mode HTML dan copy-paste HTML berikut kemudian publish.
Selamat mencoba.
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.
PERTAMAXX !!
ReplyDeleteAlhamdulillah, akhirnya sudah selesai tutorialnya, :D
Penasaran liat hasilnya :)
DeleteKEDUAX !!! :v
ReplyDeletemantap nih kirain ane gif, ternyata hasil CSS xD
letakkan css nya di mana ya gan
ReplyDeleteLetakkan di atas ]]></b:skin>
DeleteLetak teks yang di dalam banner dimana bang ?
ReplyDelete<div class='kotak-1'>TEKS DI SINI</div>
DeleteOk bang dicoba :)
Delete