html边框旋转,html – 使用CSS仅旋转边框[复制]

旋转父级也会旋转子项,所以最好像这里一样单独设置边框样式

.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.

Stop me please