Cara-caranya ikuti dibawah ini:
1.Masuk ke:
- Untuk Dashboard Baru Masuk : Blogger » Layout » Add Widget/Tambah Widget
- Untuk Dashboard Lama Masuk : Blogger » Rancangan » Layout » Add Widget/Tambah Widget
3.Pastekan kode dibawah ini,, pilih salah satu yang kalian suka:
1.Keframe AtasBawah: yaitu animasi yang bergerak keatas dan kebawah
1.Keframe AtasBawah: yaitu animasi yang bergerak keatas dan kebawah
Atas Bawah
<style type="text/css">
#atasbawah
{
background:red;
width:100px;
height:100px;
font-size:20pt;
position:relative;
animation:atasbawah 2s infinite;
-moz-animation:atasbawah 2s infinite; /* Firefox */
-webkit-animation:atasbawah 2s infinite; /*Safari and Chrome*/
}
@keyframes atasbawah
{
0% {top:0px;}
50% {top:20px;}
100% {top:0px;}
}
@-moz-keyframes atasbawah /* Firefox */
{
0% {top:0px;}
50% {top:20px;}
100% {top:0px;}
}
@-webkit-keyframes atasbawah /* Safari and Chrome */
{
0% {top:0px;}
50% {top:20px;}
100% {top:0px;}
}
</style>
<div id='atasbawah'>Atas Bawah</div>
2.Keframe Muter-Muter: yaitu animasi yang bergerak muter-muter
Muter Muter
<style type="text/css">
#mutermuter
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mutermuter 5s infinite;
-moz-animation:mutermuter 5s infinite; /* Firefox */
-webkit-animation:mutermuter 5s infinite; /*Safari and Chrome*/
}
@keyframes mutermuter
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-moz-keyframes mutermuter /* Firefox */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mutermuter /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style><div id="mutermuter">
Muter Muter</div>
3.Keframe KiriKanan: yaitu animasi yang bergerak kekiri dan kekanan
Kiri kanan
Nah mungkin itu saja yang cukup saya berikan hari ini,, jangan lupa dipraktekan..atas perhatiannya terima kasih<style type="text/css">
#kirikanan
{
width:100px;
height:100px;
font-size:20pt;
background:red;
position:relative;
animation:kirikanan 5s infinite;
-moz-animation:kirikanan 5s infinite; /* Firefox */
-webkit-animation:kirikanan 5s infinite; /*Safari and Chrome*/
}
@keyframes kirikanan
{
0% {top:0px; left:0px; }
50% {top:0px; left:100px; }
100% {top:0px; left:0px;}
}
@-moz-keyframes kirikanan /* Firefox */
{
0% {top:0px; left:0px; }
50% {top:0px; left:100px; }
100% {top:0px; left:0px;}
}
@-webkit-keyframes kirikanan /* Safari and Chrome */
{
0% {top:0px; left:0px; }
50% {top:0px; left:100px; }
100% {top:0px; left:0px;}
}
</style>
<center><div id='kirikanan'>Kiri kanan</div></center>
Sumber : klik
EmoticonEmoticon