Good Morning Everybody
Salam Syntax
Now, I'm going to make a tutorial "how to make a cloud animation using CSS3". First of all, you should download a cloud images like this image. Click here to Dwonload.
For the second step, let's make a html file with this code below :
<!DOCTYPE html>
<html>
<head>
<title>Animasi Awan CSS3 | Long Scripts</title>
<link href="syle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="awan">
JAWABNYA ADA, DIUJUNG LANGIT, KITA KESANA DENGAN SEORANG ANAK, ANAK YANG TANGKAS, DAN JUGA PEMBERANI (JANGAN NYANYI)<br>
<a href="http://longscripts.blogspot.com" target="_blank">Long Scripts</a>
</div>
</body>
</html>Save this file, give it a name "index.html".
OK, this is the last step, make a css file. Write this scripts on your IDE :
@charset "utf-8";
/* CSS Document */
body { background-color:#C0DEED; margin:0 auto;
font-family:arial; font-size:110%; color:#fff;text-shadow:1px 1px 3px #aaa;text-align:center;}
a { text-decoration:none; color:#444; border-bottom:1px dashed #444; padding-bottom:3px; }
/* Awalan Code CSS3 Animasi Awan */
#awan {
background-color:#C0DEED;
background: url(bg.png) center top repeat-x;
padding-top:100px;
padding-bottom:10px;
width: 100%;
height: 135px;
animation: awan-animasi 10s linear infinite;
-ms-animation: awan-animasi 10s linear infinite;
-moz-animation: awan-animasi 10s linear infinite;
-webkit-animation: awan-animasi 10s linear infinite;
}
@keyframes awan-animasi {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
};
}
@-webkit-keyframes awan-animasi {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
};
}
@-ms-keyframes awan-animasi {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
};
}
@-moz-keyframes awan-animasi {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
};
}Save with "style.css" in the same folder with "index.html". Click buttons below for DEMO.
OK, that is all, I hope that you can modify these scripts. Happy Coding :
0 komentar:
Post a Comment