Html 使用 CSS 仅旋转边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37810361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 13:23:57 来源:igfitidea点击:
Rotate only the Border using CSS
提问by Elaine Byene
I'm trying to rotate only the border using css but the font-icon is also rotating. How do I stop the rotation of the icon and make only the border?
我正在尝试仅使用 css 旋转边框，但字体图标也在旋转。如何停止图标的旋转并只制作边框？
CSS:
CSS：
.circle {
width: 100px;
height: 100px;
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;
}
@-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);}
}
HTML:
HTML：
<div class="circle">
<div class="play"><i class="fa fa-play"></i></div>
</div>
Where am I going wrong with this code?
这段代码我哪里出错了？
回答by Lucian
rotating parent will rotate child as well so it's better to style border separately like here
旋转父项也会旋转子项，因此最好像这里一样单独设置边框样式
.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);
}
}<div class="circle">
<div class="border"></div>
<div class="play"><i class="fa fa-play"></i>
</div>
</div>
<p>
PS: The icon loading is a bit slow. Wait until it shows up.
</p>
<div class="circle">
<div class="border"></div>
<div class="stop">Stop me please</div>
</div>