Question

我有一个圆形装载器和一个文本。如何将此文本保留在静态的圆圈内？因为它随着圆圈而移动。我的简单代码是：

<div class="loader">
  <div class="stop">
    STOP
  </div>
</div>

和css：

.loader {
   border-radius: 50%;
   border-top: 8px solid red;
   border-bottom: 8px solid red;
   border-right:8px solid red;
   border-left:8px solid white;
   width: 120px;
   height: 120px;
   animation: spin 4s linear infinite;
   margin:220px;
}

.stop{
  position: absolute;
  top: 45%;
  left: 40px;
  width: 100%;
  font-size:20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

任何想法的人!! ??

Answer 1

刚刚添加了一个块元素来保存两个div并且只用圆圈设置加载器div的动画，所以文本div保持静态

＆＃13;

.loader-block {
  position: relative;
  margin:50px;
  width: 120px;
  height: 120px;
}
.loader {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   border-top: 8px solid red;
   border-bottom: 8px solid red;
   border-right:8px solid red;
   border-left:8px solid white;   
   animation: spin 4s linear infinite;   
   box-sizing: border-box;
}

.stop{
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size:20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

＆＃13;

<div class="loader-block">
  <div class="loader"></div>
  <div class="stop">STOP</div>
</div>

＆＃13;

Answer 2

正如@ this.Believer所说，整个div正在旋转而不是装载器。您需要为旋转圆创建一个单独的元素，然后定位.stop元素：

HTML

<div class="loaderFrame">
  <div class="stop">STOP</div>
  <div class="loader"></div>
</div>

CSS

.loaderFrame {
   position: relative;
   width: 120px;
   height: 120px;
   margin:220px;
}

.loader {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   border-top: 8px solid red;
   border-bottom: 8px solid red;
   border-right:8px solid red;
   border-left:8px solid white;
   animation: spin 4s linear infinite;
}

.stop{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size:20px;
  transform: translate(-50%, -50%);
  margin: 0;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

请参阅jsFiddle

Answer 3

你可以试试这个

BiometricView

和css

    <div class="loader">
    </div>
   <!--removed below div from loader -->  
   <div class="stop">
        STOP
    </div>

Answer 4

问题是div class =“stop”在div class =“loader”中，所以得到它的旋转（作为一个子div得到它的定位来自它的父级。）

解决方案是改为停止和加载兄弟姐妹。

你可以尝试这样的东西（你需要摆弄宽度/高度等，但你明白了）

.loader {
   border-radius: 50%;
   border-top: 8px solid red;
   border-bottom: 8px solid red;
   border-right:8px solid red;
   border-left:8px solid white;
   width: 120px;
   height: 120px;
   animation: spin 4s linear infinite;
   margin:220px auto;
}

.stop{
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  font-size:20px;
  text-align:center;
  margin:280px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<div class="wrapper">

    <div class="loader">
    </div>

    <div class="stop">
      STOP
    </div>
</div>

这里小提琴： https://jsfiddle.net/wnpb8hwp/1/#&togetherjs=CAar1kqum2

Answer 5

＆＃13;

 .loader {
            animation: 4s linear 0s normal none infinite running spin;
            border-color: red red red white;
            border-radius: 50%;
            border-style: solid;
            border-width: 8px;
            height: 120px;
            margin: auto;
            width: 120px;
        }

        .stop {
            font-size: 20px;
            left: 45%;
            position: absolute;
            top: 55px;
            width: 100px;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .loaderblock
         {
             position:relative
         }

＆＃13;

<div class="loaderblock">
    <div class="loader">
    </div>
    <div class="stop">
        STOP
    </div>
</div>

＆＃13;

如何保持加载程序的文本静态？

5 个答案: