Home / Tutorial Blog

Cara Membuat Efek Awan Akatsuki Di BLog

By Ikhfan Post a Comment
Halo sob, brow, gan, atau yang lain terserah. Kali ini aku mau sharing tentang cara memberi efek awan Akatsuki di blog bukan sharing tentang Rahasia akatsuki dikarenakan tampilan awalnya mirip dengan posting tantang Rahasia akatsuki. Langsung saja, sebelum melakaukan tutorail  ini aku sarankan membackup terlebih dahulu blog kamu agar tidak terjadi error/kesalahan yang tidak di inginkan .

-buka blogger=>template=>edit HTML.
- letakan CSS di atas kode ]]></b:skin>
- dan 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/AVvXsEgfp4wo1BTqrf7chNBX5_GldRb59S1yyuGy71BrROV0aEhXMnBseOq0sdPST_K_i4NdV-P5llvqDaMHUGO4gUIIz3dn7TuVOC9BSO_0EhyQHxf0Mjow1ry75FPlGyaPZC9XJCt4bE-b_jY/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>





No comments for "Cara Membuat Efek Awan Akatsuki Di BLog "

Post a Comment