只使用CSS旋转边框 [英] Rotate only the Border using CSS

问题描述

我试图只用css旋转边框，但字体图标也在旋转。如何停止图标的旋转并仅制作边框？

CSS：

  .circle {
 width：100px; 
 height：100px; 
背景：透明; 
 border-radius：50％; 
 border：2px虚线＃000; 
 -webkit-animation-name：旋转; 
 -webkit-animation-duration：2s; 
 -webkit-animation-iteration-count：infinite; 
 -webkit-animation-timing-function：linear; 
 -moz-animation-name：旋转; 
 -moz-animation-duration：2s; 
 -moz-animation-iteration-count：infinite; 
 -moz-animation-timing-function：linear; 
 -ms-animation-name：旋转; 
 -ms-animation-duration：2s; 
 -ms-animation-iteration-count：infinite; 
 -ms-animation-timing-function：linear; 
} 
 .play {
 padding：20px 30px; 
 font-size：56px; 
} 
 
 @ -webkit-keyframes从{-webkit-transform：rotate（0deg）;} 
旋转
 {
到{-webkit- transform：rotate（360deg）;} 
} 
 @ -moz-keyframes从{-moz-transform：rotate（0deg）;} 
旋转
 {
 {-moz-transform：rotate（360deg）;} 
} 
 @ -ms-keyframes旋转
 {
 from {-ms-transform：rotate（0deg）;} 
到{-ms-transform：rotate（360deg）;} 
} 
  

HTML：

 < div class =circle> 
< div class =play>< i class =fa fa-play>< / i>< / div> 
< / div> 
  

我在哪里出错了？

DEMO JSFIDDEL

解决方案

旋转的父类也会旋转子元素，所以最好像这里一样分别设置边框样式。

.circle {width：100px; height：100px; position：relative;}。circle .border {/ * content：''; * / position：绝对; top：0;底部：0;左：0;正确：0;背景：透明;边界半径：50％;边框：2px虚线＃000; -webkit-animation-name：旋转; -webkit-animation-duration：2s; -webkit-animation-iteration-count：无限; -webkit-animation-timing-function：linear; -moz-animation-name：旋转; -moz-animation-duration：2s; -moz-animation-iteration-count：无限; -moz-animation-timing-function：linear; -ms-animation-name：旋转; -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;填充：30px; text-align：center;} @ - webkit-keyframes旋转{from {-webkit-transform：rotate（0deg）; } to {-webkit-transform：rotate（360deg）; }} @ - moz-keyframes旋转{from {-moz-transform：rotate（0deg）; } to {-moz-transform：rotate（360deg）; }} @ - ms-keyframes旋转{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为H. PS：图标加载速度有点慢。等到它出现。< / p>< div class =circle> < div class =border>< / div> < div class =stop>阻止我请< / div>< / div>

$ b

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:

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

<div class="circle">
   <div class="play"><i class="fa fa-play"></i></div>
</div>

Where am I going wrong with this code?

DEMO JSFIDDEL

解决方案

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>

这篇关于只使用CSS旋转边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！