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