Back to Top

Blog ini berisi tentang info seputar Design blog menggunakan css,css3,html dan jquery.saya juga berbagi tips ,trik dan template blogger buatan saya sendiri untuk sobat.Tersedia CSS3 blogger template , Anime blogger template dan lainya . semoga bermanfaat ^^

Followers

Blue Wings - Working In Background

cara memabuat awan akatsuki

| Jumat, 08 Februari 2013

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV3rL1N7Yz4WLdBeAePmYYoCETdgsmUA1OSUdn1gJcQpAPeLAq_xEw9v-jmjjEetfH-wv-Ezj-ffC3DeibB-g4Z0I3hTg3NAYB2P34BIvLGWZ3TRH1H0HRHECnAzp6iWU97aDMWpLiEHY/s1600/Untitled-1.png

 

Jika ada yang belum mengerti bisa tanyakan pada saya :)

untuk memasang pada blog kamu,pertama buka blogger=>template=>edit HTML

lalu letakan CSS di atas kode ]]></b:skin>

Sedangkan Untuk HTMLnya kamu letakan kodenya di bawah code <body>


CSS

#akatsuki{position: absolute;
z-index: 0;
width:100%;
margin-top: 0px;
height: 0px;}
.akatsuki {
width: 200px; height: 138px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV3rL1N7Yz4WLdBeAePmYYoCETdgsmUA1OSUdn1gJcQpAPeLAq_xEw9v-jmjjEetfH-wv-Ezj-ffC3DeibB-g4Z0I3hTg3NAYB2P34BIvLGWZ3TRH1H0HRHECnAzp6iWU97aDMWpLiEHY/s1600/Untitled-1.png") no-repeat top center;
position: relative;
}

.awanmerah1 {
-webkit-animation: moveclouds2 15s linear infinite;
-moz-animation: moveclouds2 15s linear infinite;
-o-animation: moveclouds2 15s linear infinite;
}
.awanmerah2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: moveclouds2 25s linear infinite;
-moz-animation: moveclouds2 25s linear infinite;
-o-animation: moveclouds2 25s linear infinite;
}
.awanmerah3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds2 20s linear infinite;
-moz-animation: moveclouds2 20s linear infinite;
-o-animation: moveclouds2 20s linear infinite;
}
.awanmerah4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
-webkit-animation: moveclouds2 18s linear infinite;
-moz-animation: moveclouds2 18s linear infinite;
-o-animation: moveclouds2 18s linear infinite;
}
.awanmerah5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds2 20s linear infinite;
-moz-animation: moveclouds2 20s linear infinite;
-o-animation: moveclouds2 20s linear infinite;
}
@-webkit-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}




HTML


<div id='akatsuki'>
<div class='akatsuki awanmerah1'/><div class='akatsuki awanmerah2'/><div class='akatsuki awanmerah3'/><div class='akatsuki awanmerah4'/><div class='akatsuki awanmerah5'/></div>

Semoga artikel Cara Membuat Awan Akatsuki Di Blog ini berguna .. terima kasih
Trik Menarik lain'a

0 komentar:

Posting Komentar

Prev

Total Tayangan Halaman





Halaman

 

My Blog List

Copyright © 2010 Chery_d' lapendoz_huge | Black RockShooter | Designed by Johanes DJ