如何停止文字旋转动画？

时间：2019-07-15 14:38:16

标签： html css css-animations

我有以下无限的动画。我正在尝试使用向右旋转动画创建翻转，但是您在JSFiddle中看到一个向右转的圆圈，但我希望文本不转而保持在圆圈的中心。

/* contient l'orbit le tout */

#circle-orbit-container {
  position: relative;
  bottom: 100px;
  left: 43%;
  height: 300px;
  width: 300px;
}


/* ---------- 1er cercle orbit  ---------- */

#orbit1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
}


/* ---------- 1er orbit   ---------- */

.inner-orbit-cirlces {
  position: absolute;
  top: -293px;
  left: 0px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #9F98E6;
}


/* ----------2eme cercle orbit  ---------- */

#orbit2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
}


/* ---------- 2 orbit  ---------- */

.outer-orbit-cirlces {
  position: absolute;
  top: 0px;
  left: 390px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #00FFCA;
}


/* ---------- 3e cercle orbit ---------- */

#outer-orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
  animation: spin-right 20s linear infinite;
}


/* ---------- 3 orbit  ---------- */

.orbit4 {
  position: absolute;
  top: 390px;
  left: 100px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #000;
}

#cercle4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
  animation: spin-right 20s linear infinite;
}


/* ---------- 4e  orbit   ---------- */

.middle-orbit-cirlces {
  position: absolute;
  top: 76px;
  left: -300px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #4A437F;
}


/* ----------  orbit centre  ---------- */

.orbit5 {
  position: absolute;
  top: 70px;
  left: 70px;
  height: 150px;
  width: 150px;
  border-radius: 100%;
  background-color: #3C3C3C;
}


/* ---------- Animation ---------- */

@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.inner-orbit-cirlces .caption,
.inner-orbit-cirlces .content {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
}

.inner-orbit-cirlces:hover .caption {
  opacity: 1;
  transition-delay: 0s;
}

.inner-orbit-cirlces h5 {
  text-transform: uppercase;
  color: #fff;
  position: relative;
  font-size: 1.2em;
  padding-bottom: 10px;
  margin: 7%;
  opacity: 0;
  border-bottom: 1px solid white;
  -webkit-transition: all 0.4s ease-in 0.2s;
  spin-right: none !important;
}

.inner-orbit-cirlces:hover h5 {
  -webkit-transition-delay: 0.2s ease-in 0.2s;
  opacity: 1;
}

.inner-orbit-cirlces p {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12px;
  position: relative;
  color: #fff;
  padding: 0 7%;
  opacity: 0;
  -webkit-transition: all 0.8s ease-in 0.2s;
}

.inner-orbit-cirlces:hover p {
  opacity: 1;
  -webkit-transition-delay: 0.5s ease-in 0.2s;
}
<div id="circle-orbit-container">

  <!-- Circles closest to the central point -->
  <div id="orbit1">

    <div class="inner-orbit-cirlces">
      <a href="#">
        <img src="" />
        <div class="caption1">

          <p class="text-justify">ook let's gggggo </p>
          <p class="h5">Feel Natural</p>
        </div>


    </div>
  </div>

  <!-- Circles second closest to the central point -->
  <div id="orbit2">




    <div class="middle-orbit-cirlces">

      <a href="#">
        <img src="" />
        <div class="caption2">
          <h5>Feel natural></h5>
          <p> ook let's go </p>
        </div>


    </div>
  </div>

  <!-- Circles furthest away to the central point -->
  <div id="outer-orbit">


    <div class="outer-orbit-cirlces">
      <a href="#">
        <img src="" />
        <div class="caption3">
          <h5>Feel natural></h5>
          <p> ook let's go </p>
        </div>


    </div>
  </div>


  <div id="cercle4">


    <div class="orbit4">

      <a href="#">
        <img src="" />
        <div class="caption4">
          <h5>Feel natural</h5>
          <p> ook let's go </p>
        </div>

    </div>
  </div>

  <div id="cercle5">


    <div class="orbit5"></div>
  </div>

</div>

2 个答案:

答案 0 :(得分：1)

像这样简单地反转当前用于旋转的动画；

尽管您可能需要稍微修改一下框模型，以使文本块在圆圈中居中。干杯！

/* contient l'orbit le tout */

#circle-orbit-container {
  position: relative;
  bottom: 100px;
  left: 43%;
  height: 300px;
  width: 300px;
}


/* ---------- 1er cercle orbit  ---------- */

#orbit1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
}


/* ---------- 1er orbit   ---------- */

.inner-orbit-cirlces {
  position: absolute;
  top: -293px;
  left: 0px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #9F98E6;
}


/* ----------2eme cercle orbit  ---------- */

#orbit2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
}


/* ---------- 2 orbit  ---------- */

.outer-orbit-cirlces {
  position: absolute;
  top: 0px;
  left: 390px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #00FFCA;
}


/* ---------- 3e cercle orbit ---------- */

#outer-orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
  animation: spin-right 20s linear infinite;
}


/* ---------- 3 orbit  ---------- */

.orbit4 {
  position: absolute;
  top: 390px;
  left: 100px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #000;
}

#cercle4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
  animation: spin-right 20s linear infinite;
}


/* ---------- 4e  orbit   ---------- */

.middle-orbit-cirlces {
  position: absolute;
  top: 76px;
  left: -300px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #4A437F;
}


/* ----------  orbit centre  ---------- */

.orbit5 {
  position: absolute;
  top: 70px;
  left: 70px;
  height: 150px;
  width: 150px;
  border-radius: 100%;
  background-color: #3C3C3C;
}


/* ---------- Animation ---------- */

@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.inner-orbit-cirlces .caption,
.inner-orbit-cirlces .content {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
}

.inner-orbit-cirlces:hover .caption {
  opacity: 1;
  transition-delay: 0s;
}

.inner-orbit-cirlces h5 {
  text-transform: uppercase;
  color: #fff;
  position: relative;
  font-size: 1.2em;
  padding-bottom: 10px;
  margin: 7%;
  opacity: 0;
  border-bottom: 1px solid white;
  -webkit-transition: all 0.4s ease-in 0.2s;
  spin-right: none !important;
}

.inner-orbit-cirlces:hover h5 {
  -webkit-transition-delay: 0.2s ease-in 0.2s;
  opacity: 1;
}

.inner-orbit-cirlces p {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12px;
  position: relative;
  color: #fff;
  padding: 0 7%;
  opacity: 0;
  -webkit-transition: all 0.8s ease-in 0.2s;
}

.inner-orbit-cirlces:hover p {
  opacity: 1;
  -webkit-transition-delay: 0.5s ease-in 0.2s;
}

.caption1, .caption2, .caption3, .caption4 {
  color: red;
  animation: spin-right 20s linear infinite reverse; 
}
<div id="circle-orbit-container">

  <!-- Circles closest to the central point -->
  <div id="orbit1">
    <div class="inner-orbit-cirlces">
      <a href="#">
        <img src="" />
        <div class="caption1">
          <p class="text-justify">ook let's gggggo </p>
          <p class="h5">Feel Natural</p>
        </div>
    </div>
  </div>

  <!-- Circles second closest to the central point -->
  <div id="orbit2">
    <div class="middle-orbit-cirlces">
      <a href="#">
        <img src="" />
        <div class="caption2">
          <h5>Feel natural></h5>
          <p> ook let's go </p>
        </div>
    </div>
  </div>

  <!-- Circles furthest away to the central point -->
  <div id="outer-orbit">
    <div class="outer-orbit-cirlces">
      <a href="#">
        <img src="" />
        <div class="caption3">
          <h5>Feel natural></h5>
          <p> ook let's go </p>
        </div>
    </div>
  </div>

  <div id="cercle4">
    <div class="orbit4">
      <a href="#">
        <img src="" />
        <div class="caption4">
          <h5>Feel natural</h5>
          <p> ook let's go </p>
        </div>
     </div>
  </div>

  <div id="cercle5">
    <div class="orbit5"></div>
  </div>

</div>

答案 1 :(得分：0)

使任何div之间的内容居中有两种方法

1。绝对定位（传统方式） 

position:absolute; 
top:50%;
left:50%;
transform:translate(-50%,-50%)

在此技术中，我们将上述值分配给要居中的div。 注意在父级子级上使用position:relative，否则它将视口视为父级，并在视口中居中放置

  1. Flexbox（现代方式）
  display:flex;
  align-items:center;
  justify-content:center;

在技术上，我们将上述值分配给父div，并使其居中。

/* contient l'orbit le tout */
#circle-orbit-container {
  position: relative;
  bottom: 100px;
  left: 43%;
  height: 300px;
  width: 300px;
}









/* ---------- 1er cercle orbit  ---------- */
#orbit1 {
position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;

  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
}






/* ---------- 1er orbit   ---------- */
.inner-orbit-cirlces {
  position: absolute;
  top: -293px;
  left: 0px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #9F98E6;
    

}





/* ----------2eme cercle orbit  ---------- */
#orbit2 {
position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;

  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;

}




/* ---------- 2 orbit  ---------- */
.outer-orbit-cirlces {
  position: absolute;
  top: 0px;
  left: 390px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #00FFCA;
}








/* ---------- 3e cercle orbit ---------- */
#outer-orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
  animation: spin-right 20s linear infinite;
}


/* ---------- 3 orbit  ---------- */
.orbit4 {
  position: absolute;
  top: 390px;
  left: 100px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #000;
}




#cercle4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;

  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
  animation: spin-right 20s linear infinite;
}



/* ---------- 4e  orbit   ---------- */
.middle-orbit-cirlces {
  position: absolute;
  top: 76px;
  left: -300px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #4A437F;

}



/* ----------  orbit centre  ---------- */
.orbit5 {
  position: absolute;
  top:70px;
  left:70px;

  height: 150px;
  width: 150px;
  border-radius: 100%;
  background-color: #3C3C3C;
  
}


/* ---------- Animation ---------- */
@-webkit-keyframes spin-right  {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}




.inner-orbit-cirlces .caption, .inner-orbit-cirlces .content {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.7);
    opacity:0;
    -webkit-transition: all 0.2s ease-in-out;
}
.inner-orbit-cirlces:hover .caption {
    opacity:1; 
    transition-delay: 0s;
}

.inner-orbit-cirlces h5 {
    text-transform: uppercase;
    color: #fff;
    position: relative;
    font-size: 1.2em;
    padding-bottom:10px;
    margin:7%;
    opacity:0;
    border-bottom:1px solid white;
    -webkit-transition: all 0.4s ease-in 0.2s;
   spin-right:none !important;
}
.inner-orbit-cirlces:hover h5 {  
  -webkit-transition-delay: 0.2s ease-in 0.2s;
  opacity:1;
}


.inner-orbit-cirlces p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 0 7%;
    opacity:0;
    -webkit-transition: all 0.8s ease-in 0.2s;
}

.inner-orbit-cirlces:hover p {
    opacity:1;
    -webkit-transition-delay: 0.5s ease-in 0.2s;
}

.center{
  text-align:center;
  /*Morder way*/
  display:flex;
  align-items:center;
  justify-content:center;
}
<div id="circle-orbit-container">

  <!-- Circles closest to the central point -->
  <div id="orbit1">
    <div class="inner-orbit-cirlces center">
       <a href="#">
       <img src="" />  
       <div class="caption1">  
       <p class="text-justify">ook let's gggggo           </p>  
       <p class="h5">Feel Natural</p>
     </div>
    </div>
</div>

  <!-- Circles second closest to the central point -->
  <div id="orbit2">
      
      
      
      
    <div class="middle-orbit-cirlces center">
        
          <a href="#">
     <img src="" />  
     <div class="caption2">  
       <h5>Feel natural></h5>  
       <p> ook let's go </p>    
     </div>  
        
        
    </div>
  </div>

  <!-- Circles furthest away to the central point -->
  <div id="outer-orbit">
 
    <div class="outer-orbit-cirlces center">
          <a href="#">
     <img src="" />  
     <div class="caption3">  
       <h5>Feel natural></h5>  
       <p> ook let's go </p>    
     </div>  
        
        
    </div>
  </div>
  
  
  <div id="cercle4">
      
      
    <div class="orbit4 center">
        
          <a href="#">
     <img src="" />  
     <div class="caption4">  
       <h5>Feel natural</h5>  
       <p> ook let's go </p>    
     </div>  
        
    </div>
  </div>
  
  <div id="cercle5">
      
      
    <div class="orbit5"></div>
  </div>

</div>

相关问题
最新问题