Assalamu'alaikum Wrohmatullohi Wabarokatuh.
Sesuai dengan judul postingan, langsung saja kita bahas.
Script HTML :
<!DOCTYPE html>
<html>
<head>
<title>Membuat Animasi Bintang Berputar</title>
</head>
<style type="text/css">
</style>
<body>
<div class="obj-anima rota-right">
<div class="b1"></div>
</div>
<div class="obj-anima rota-left">
<div class="b1"></div>
</div>
<div class="obj-anima rota-full-left">
<div class="b1"></div>
</div>
<div class="obj-anima rota-full-right">
<div class="b1"></div>
</div>
<div class="obj-anima rota-patah">
<div class="b1"></div>
</div>
</body>
</html>
Script CSS :
<style type="text/css">
/*===General===*/
.obj-anima {
margin: 50px 55px 100px 30px;
float: left;
position: relative;
}
.obj-anima:last-child {
margin: 50px 0 100px 30px;
}
.b1 {
width: 100px;
height: 100px;
background: green;
opacity: 0.8;
z-index: 1;
position: relative;
}
.rota-right .b1,
.rota-left .b1,
.rota-patah .b1,
.rota-full-left .b1,
.rota-full-right .b1 {
background: url(http://cahcepu.com/blog/v3/anim/star.png) no-repeat center top;
}
/*===Setengah putaran ke kanan - kiri kontinyu===*/
.rota-right .b1 {
-moz-animation: rota-right 3s infinite linear;
-webkit-animation: rota-right 3s infinite linear;
}
@-moz-keyframes rota-right {
0% {-moz-transform: rotate(0deg);}
30% {-moz-transform: rotate(90deg);}
50% {-moz-transform: rotate(0deg);}
80% {-moz-transform: rotate(-90deg);}
100% {-moz-transform: rotate(0deg);}
}
@-webkit-keyframes rota-right {
0% {-webkit-transform: rotate(0deg);}
30% {-webkit-transform: rotate(90deg);}
50% {-webkit-transform: rotate(0deg);}
80% {-webkit-transform: rotate(-90deg);}
100% {-webkit-transform: rotate(0deg);}
}
/*===Setengah putaran ke kiri - kanan kontinyu===*/
.rota-left .b1 {
-moz-animation: rota-left 3s infinite linear;
-webkit-animation: rota-left 3s infinite linear;
}
@-moz-keyframes rota-left {
0% {-moz-transform: rotate(0deg);}
30% {-moz-transform: rotate(-90deg);}
50% {-moz-transform: rotate(0deg);}
80% {-moz-transform: rotate(90deg);}
100% {-moz-transform: rotate(0deg);}
}
@-webkit-keyframes rota-left {
0% {-webkit-transform: rotate(0deg);}
30% {-webkit-transform: rotate(-90deg);}
50% {-webkit-transform: rotate(0deg);}
80% {-webkit-transform: rotate(90deg);}
100% {-webkit-transform: rotate(0deg);}
}
/*===Satu putaran penuh ke kiri===*/
.rota-full-left .b1 {
-moz-animation: rota-full-left 3s infinite linear;
-webkit-animation: rota-full-left 3s infinite linear;
}
@-moz-keyframes rota-full-left {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(-360deg);}
}
@-webkit-keyframes rota-full-left {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(-360deg);}
}
/*===Satu putaran penuh ke kanan===*/
.rota-full-right .b1 {
-moz-animation: rota-full-right 3s infinite linear;
-webkit-animation: rota-full-right 3s infinite linear;
}
@-moz-keyframes rota-full-right {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes rota-full-right {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
/*===Setengah putaran ke kiri - kanan tersendat kontinyu===*/
.rota-patah .b1 {
-moz-animation: rota-patah 3s infinite ease;
-webkit-animation: rota-patah 3s infinite ease;
}
@-moz-keyframes rota-patah {
0% {-moz-transform: rotate(0deg);}
30% {-moz-transform: rotate(90deg);}
50% {-moz-transform: rotate(0deg);}
80% {-moz-transform: rotate(-90deg);}
100% {-moz-transform: rotate(0deg);}
}
@-webkit-keyframes rota-patah {
0% {-webkit-transform: rotate(0deg);}
30% {-webkit-transform: rotate(90deg);}
50% {-webkit-transform: rotate(0deg);}
80% {-webkit-transform: rotate(-90deg);}
100% {-webkit-transform: rotate(0deg);}
}
Script Full :
<!DOCTYPE html>
<html>
<head>
<title>Membuat Animasi Bintang Berputar</title>
</head>
<style type="text/css">
/*===General===*/
.obj-anima {
margin: 50px 55px 100px 30px;
float: left;
position: relative;
}
.obj-anima:last-child {
margin: 50px 0 100px 30px;
}
.b1 {
width: 100px;
height: 100px;
background: green;
opacity: 0.8;
z-index: 1;
position: relative;
}
.rota-right .b1,
.rota-left .b1,
.rota-patah .b1,
.rota-full-left .b1,
.rota-full-right .b1 {
background: url(http://cahcepu.com/blog/v3/anim/star.png) no-repeat center top;
}
/*===Setengah putaran ke kanan - kiri kontinyu===*/
.rota-right .b1 {
-moz-animation: rota-right 3s infinite linear;
-webkit-animation: rota-right 3s infinite linear;
}
@-moz-keyframes rota-right {
0% {-moz-transform: rotate(0deg);}
30% {-moz-transform: rotate(90deg);}
50% {-moz-transform: rotate(0deg);}
80% {-moz-transform: rotate(-90deg);}
100% {-moz-transform: rotate(0deg);}
}
@-webkit-keyframes rota-right {
0% {-webkit-transform: rotate(0deg);}
30% {-webkit-transform: rotate(90deg);}
50% {-webkit-transform: rotate(0deg);}
80% {-webkit-transform: rotate(-90deg);}
100% {-webkit-transform: rotate(0deg);}
}
/*===Setengah putaran ke kiri - kanan kontinyu===*/
.rota-left .b1 {
-moz-animation: rota-left 3s infinite linear;
-webkit-animation: rota-left 3s infinite linear;
}
@-moz-keyframes rota-left {
0% {-moz-transform: rotate(0deg);}
30% {-moz-transform: rotate(-90deg);}
50% {-moz-transform: rotate(0deg);}
80% {-moz-transform: rotate(90deg);}
100% {-moz-transform: rotate(0deg);}
}
@-webkit-keyframes rota-left {
0% {-webkit-transform: rotate(0deg);}
30% {-webkit-transform: rotate(-90deg);}
50% {-webkit-transform: rotate(0deg);}
80% {-webkit-transform: rotate(90deg);}
100% {-webkit-transform: rotate(0deg);}
}
/*===Satu putaran penuh ke kiri===*/
.rota-full-left .b1 {
-moz-animation: rota-full-left 3s infinite linear;
-webkit-animation: rota-full-left 3s infinite linear;
}
@-moz-keyframes rota-full-left {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(-360deg);}
}
@-webkit-keyframes rota-full-left {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(-360deg);}
}
/*===Satu putaran penuh ke kanan===*/
.rota-full-right .b1 {
-moz-animation: rota-full-right 3s infinite linear;
-webkit-animation: rota-full-right 3s infinite linear;
}
@-moz-keyframes rota-full-right {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes rota-full-right {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
/*===Setengah putaran ke kiri - kanan tersendat kontinyu===*/
.rota-patah .b1 {
-moz-animation: rota-patah 3s infinite ease;
-webkit-animation: rota-patah 3s infinite ease;
}
@-moz-keyframes rota-patah {
0% {-moz-transform: rotate(0deg);}
30% {-moz-transform: rotate(90deg);}
50% {-moz-transform: rotate(0deg);}
80% {-moz-transform: rotate(-90deg);}
100% {-moz-transform: rotate(0deg);}
}
@-webkit-keyframes rota-patah {
0% {-webkit-transform: rotate(0deg);}
30% {-webkit-transform: rotate(90deg);}
50% {-webkit-transform: rotate(0deg);}
80% {-webkit-transform: rotate(-90deg);}
100% {-webkit-transform: rotate(0deg);}
}
</style>
<body>
<div class="obj-anima rota-right">
<div class="b1"></div>
</div>
<div class="obj-anima rota-left">
<div class="b1"></div>
</div>
<div class="obj-anima rota-full-left">
<div class="b1"></div>
</div>
<div class="obj-anima rota-full-right">
<div class="b1"></div>
</div>
<div class="obj-anima rota-patah">
<div class="b1"></div>
</div>
</body>
</html>
0 Komentar untuk "MEMBUAT BINTANG BERPUTAR FULL CSS (ROTATION)"