旋转父级也会旋转子项,所以最好像这里一样单独设置边框样式
.circle {
width: 100px;
height: 100px;
position: relative;
}
.circle .border {
/* content: ''; */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: transparent;
border-radius: 50%;
border: 2px dashed #000;
-webkit-animation-name: Rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: Rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: Rotate;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
.play {
padding: 20px 30px;
font-size: 56px;
}
.stop {
font-size: 12px;
padding: 30px;
text-align: center;
}
@-webkit-keyframes Rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes Rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes Rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
PS: The icon loading is a bit slow. Wait until it shows up.