Tutorial Details
- Judul: Jam analog as3
- Difficulty: Beginner
- Platform: css
- Bahasa Scripth: CSS3
- Software : Adobe Dreamweaver
- Estimated Completion Time: 15 minutes
- Created:Ricko Nada (Pustaka Flash)
live demo :
Scripth yang digunakan :
css3 :
.cssloading {text-align:center;}
.cssloading span {
display:inline-block;
margin:0px 1px;
width:20px;
height:20px;
background-color:cyan;
}
.cssloading span:nth-child(1) {
-webkit-animation:cssloading 0.5s infinite alternate 0s;
-moz-animation:cssloading 0.5s infinite alternate 0s;
-ms-animation:cssloading 0.5s infinite alternate 0s;
-o-animation:cssloading 0.5s infinite alternate 0s;
animation:cssloading 0.5s infinite alternate 0s;
}
.cssloading span:nth-child(2) {
-webkit-animation:cssloading 0.5s infinite alternate 0.2s;
-moz-animation:cssloading 0.5s infinite alternate 0.2s;
-ms-animation:cssloading 0.5s infinite alternate 0.2s;
-o-animation:cssloading 0.5s infinite alternate 0.2s;
animation:cssloading 0.5s infinite alternate 0.2s;
}
.cssloading span:nth-child(3) {
-webkit-animation:cssloading 0.5s infinite alternate 0.4s;
-moz-animation:cssloading 0.5s infinite alternate 0.4s;
-ms-animation:cssloading 0.5s infinite alternate 0.4s;
-o-animation:cssloading 0.5s infinite alternate 0.4s;
animation:cssloading 0.5s infinite alternate 0.4s;
}
.cssloading span:nth-child(4) {
-webkit-animation:cssloading 0.5s infinite alternate 0.6s;
-moz-animation:cssloading 0.5s infinite alternate 0.6s;
-ms-animation:cssloading 0.5s infinite alternate 0.6s;
-o-animation:cssloading 0.5s infinite alternate 0.6s;
animation:cssloading 0.5s infinite alternate 0.6s;
}
@-webkit-keyframes cssloading {
0% {opacity:0.1;}
100% {opacity:1; }
}
@-moz-keyframes cssloading {
0% {opacity:0.1;}
100% {opacity:1; }
}
@-ms-keyframes cssloading {
0% {opacity:0.1;}
100% {opacity:1; }
}
@-o-keyframes cssloading {
0% {opacity:0.1;}
100% {opacity:1; }
}
@keyframes cssloading {
0% {opacity:0.1;}
100% {opacity:1; }
}
HTML :
<div class='cssloading'>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
5 Halaman yang sering dikunjungi:
0 komentar:
Post a Comment