本範例應用了CSS3 中的 animation 這項屬性，詳細說明請見這裡
範例說明：
- @keyframes ：關鍵影格
- circleR ：關鍵影格名稱
本範例語法：
@keyframes circleR{
from{-webkit-transform:rotate(0);-moz-transform:rotate(0);}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);}
}
@-webkit-keyframes circleR{
from{-webkit-transform:rotate(0);-moz-transform:rotate(0);}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);}
}
@keyframes circleR2
{
0% {-moz-transform:rotate(160deg); opacity:0;}
50% {-moz-transform:rotate(145deg); opacity:1;}
100% {-moz-transform:rotate(-320deg); opacity:0;}
}
@-webkit-keyframes circleR2 /* Safari and Chrome */
{
0% {-webkit-transform:rotate(160deg); opacity:0;}
50% {-webkit-transform:rotate(145deg); opacity:1;}
100% {-webkit-transform:rotate(-320deg); opacity:0;}
}
#dm7 .light-circle{
width:200px;
height: 200px;
border-radius: 100%;
border:3px solid white;
}
#dm7 .cr1{
border-color:blue rgba(0,0,0,0) blue rgba(0,0,0,0);
-moz-animation: 1s linear 0s normal none infinite circleR;-webkit-animation: 1s linear 0s normal none infinite circleR;
}
#dm7 .cr2{
border-color:red rgba(0,0,0,0) red rgba(0,0,0,0);
-moz-animation: 1s ease-in-out 0s normal none infinite circleR2;-webkit-animation: 1s ease-in-out 0s normal none infinite circleR2;
}
#dm7 .light-circle:hover{-moz-animation-play-state:paused; -webkit-animation-play-state:paused;}